:root{
  --oliva:#474434; --oliva-osc:#2E2C20; --tinta:#2B2A22; --gris:#67645A; --gris2:#5A574C;
  --fondo:#F6F4EE; --tarjeta:#FFFFFF; --filete:#E2DED2; --suave:#EFECE2; --crema:#E9E6D6;
  --acento:#DFA253; --boton:#A15F12; --boton-osc:#844C0C;
  --ok:#2F5A2B; --ok-suave:#DCEBD8; --ok-caja:#EEF2E6;
  --aviso:#7A4A0C; --aviso-suave:#F8E6C6;
  --mal:#8A2E1C; --mal-suave:#F8E2D9; --mal-borde:#E4B8A8;
  --display:'Spectral',Georgia,serif; --cuerpo:'Open Sans',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.55 var(--cuerpo)}
a{color:var(--oliva)} a:hover{color:var(--oliva-osc)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.ancho{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
header.cab{background:var(--oliva);color:#fff;padding-block:30px 32px}
header.cab .fila{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.quien{display:flex;gap:18px;align-items:center}
.foto{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.85);flex:none;background:var(--suave)}
.marca{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--crema)}
h1{margin:0;font:700 38px/1.1 var(--display)}
.sub{font-size:15px;color:var(--crema)}
.avance{display:flex;flex-direction:column;gap:8px;flex:0 1 340px;min-width:240px}
.avance .lin{display:flex;justify-content:space-between;font-size:14px;color:var(--crema)}
.avance b{color:#fff}
.barra{height:10px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
.barra>div{height:100%;background:var(--acento);border-radius:6px}
header.mini{background:var(--oliva);color:#fff;padding-block:16px}
header.mini .fila{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
header.mini a{color:#fff;font-weight:600;text-decoration:none}
header.mini .foto{width:40px;height:40px;border-width:0}
main{padding-block:30px 70px;display:flex;flex-direction:column;gap:30px}
h2{margin:0;font:600 26px/1.2 var(--display)}
h3{margin:0;font:700 30px/1.15 var(--display)}
.titulo-sec{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between}
.nota{font-size:14px;color:var(--gris)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.paso{text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:132px;padding:14px 14px 12px;border-radius:14px;background:var(--tarjeta);border:2px solid var(--filete);color:var(--tinta);font-size:15px}
.paso.pronto{background:var(--suave)}
.paso.activo{border-color:var(--oliva)}
.paso .arriba{display:flex;justify-content:space-between;align-items:center;gap:8px}
.paso .n{font-weight:700;font-size:13px;color:var(--gris)}
.paso .nom{font:600 19px/1.2 var(--display)}
.paso .cu{margin-top:auto;font-size:13px;color:var(--gris)}
.chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.chip.hecho{background:var(--ok-suave);color:var(--ok)}
.chip.curso,.chip.proximo{background:var(--aviso-suave);color:var(--aviso)}
.chip.pronto{background:var(--suave);color:var(--gris2)}
.chip.ahora{background:var(--mal-suave);color:var(--mal)}
.chip.listo,.chip.ok{background:var(--ok-suave);color:var(--ok)}
.chip.luego{background:var(--suave);color:var(--gris2)}
.chip.falta{background:var(--mal-suave);color:var(--mal)}
.dos{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.ancha{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.lado{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.caja{background:var(--tarjeta);border:1px solid var(--filete);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px}
.caja.fuerte{border:2px solid var(--oliva)}
.etiq{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.etiq.verde{color:var(--ok)}
.para{margin:0;font-size:18px;color:#3C3A30;max-width:62ch}
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tres>div{background:var(--fondo);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.tres>div.verde{background:var(--ok-caja)}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;border:0;background:var(--boton);color:#fff;font-weight:700;font-size:16px;padding:13px 20px;border-radius:12px;text-decoration:none;min-height:46px}
.btn:hover{background:var(--boton-osc);color:#fff}
.btn.borde{background:#fff;color:var(--oliva);border:1px solid var(--oliva)}
.btn.borde:hover{background:var(--suave);color:var(--oliva)}
.btn:disabled{opacity:.55;cursor:default}
.peque{font-size:15px;padding:9px 14px;min-height:40px}
.item{display:flex;gap:10px;align-items:flex-start}
.punto{flex:none;width:10px;height:10px;border-radius:50%;background:#C25B3F;margin-top:7px}
.lista-ent>div{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--suave)}
.lista-ent>div:last-child{border-bottom:0;padding-bottom:0}
.fases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.fases li{background:var(--suave);border:1px solid var(--filete);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.fases li.hecho{background:var(--ok-caja)} .fases li.curso{background:#fff;border-color:var(--oliva)}
.fases .e{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris2)}
.fases li.hecho .e{color:var(--ok)} .fases li.curso .e{color:var(--aviso)}
.acciones{display:flex;flex-wrap:wrap;gap:10px}
.grabando{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#FBEDEA;border-radius:12px;padding:10px 14px}
.latido{width:12px;height:12px;border-radius:50%;background:#B3412C;animation:latido 1s infinite}
@keyframes latido{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.latido{animation:none}}
.archivo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;background:var(--fondo);border-radius:10px;padding:10px 14px;font-size:15px}
.archivo audio{width:100%}
.archivo .quitar{border:0;background:none;color:#9A3324;cursor:pointer;font-size:14px;font-weight:600}
.archivo .ok{font-size:13px;color:var(--ok);font-weight:700}
textarea,input[type=password],input[type=text]{width:100%;font:15px/1.5 var(--cuerpo);border:1px solid var(--filete);border-radius:10px;padding:11px 12px;background:#fff;color:var(--tinta)}
label.l{font-size:14px;font-weight:600;color:#3C3A30}
.carga{height:8px;background:var(--suave);border-radius:4px;overflow:hidden}
.carga>div{height:100%;width:0;background:var(--oliva);transition:width .3s}
.aviso{font-size:14px} .aviso.mal{color:#9A3324} .aviso.bien{color:var(--ok);font-weight:600}
.bloque{border:1px solid var(--filete);border-radius:12px;overflow:hidden}
.bloque>button{width:100%;cursor:pointer;border:0;background:var(--fondo);display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:15px;font-weight:700;color:var(--tinta);text-align:left}
.bloque .dentro{padding:8px 16px 14px;display:flex;flex-direction:column;gap:12px}
.preg{display:flex;gap:12px;align-items:flex-start}
.num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--suave);color:var(--oliva);font-weight:700;font-size:13px;display:grid;place-items:center}
.pieza{border-radius:12px;padding:12px 14px;background:#FBFAF6;border:1px dashed #CFCAB8;display:flex;flex-direction:column;gap:2px}
.pieza.listo{background:var(--ok-caja);border-color:#9DB894}
.pieza .e{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris2)}
.pieza.listo .e{color:var(--ok)}
.oscura{background:var(--oliva);color:#fff;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px}
.oscura .etiq{color:var(--crema)}
.oscura .grande{font:700 34px/1.1 var(--display)}
.candado{background:#fff;border:1px solid var(--filete);border-radius:14px;padding:14px 18px;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.contadores{display:flex;gap:10px;flex-wrap:wrap}
.contadores span{font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px}
.accesos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.acceso{background:#fff;border:1px solid var(--filete);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px}
.acceso.ahora{border-color:var(--mal-borde)}
.acceso .t{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.acceso h3{font:600 22px/1.2 var(--display)}
.datos{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.datos span{background:var(--fondo);border-radius:8px;padding:4px 10px}
.acceso ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login form{background:#fff;border:1px solid var(--filete);border-radius:20px;padding:30px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.login h1{font-size:30px;color:var(--tinta)}
.cargando{padding:60px 20px;text-align:center;color:var(--gris)}
footer.pie{text-align:center;color:var(--gris);font-size:13px;padding:10px 20px 40px}
@media (max-width:560px){h1{font-size:30px}h3{font-size:25px}.caja{padding:18px}.foto{width:60px;height:60px}}