/* Planeador de Producción IA · componentes base. Sólo usa tokens.css; ningún color suelto. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--superficie);color:var(--tinta);font:var(--peso-normal) var(--t-base)/1.5 var(--font);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--app);outline-offset:2px}
.titulo{font-stretch:var(--ancho-titulo);font-weight:var(--peso-titulo);letter-spacing:-.01em;line-height:1.15;margin:0}
.t-xl{font-size:var(--t-xl)}.t-l{font-size:var(--t-l)}.t-m{font-size:var(--t-m)}
.meta{font-size:var(--t-s);color:var(--tinta-3)}
.num{font-variant-numeric:tabular-nums}

/* ── botón ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:var(--toque);
  padding:0 var(--e5);border-radius:var(--r-boton);border:1.5px solid transparent;font-weight:var(--peso-fuerte);
  cursor:pointer;text-decoration:none;transition:transform var(--t-rapido) var(--suave),background var(--t-rapido) var(--suave);
  -webkit-tap-highlight-color:transparent;user-select:none}
.btn-principal{background:var(--amarillo);color:var(--tinta)}
.btn-principal:hover,.btn-principal.is-hover{background:#FFDB5C}
.btn-principal:active,.btn-principal.is-press{background:var(--amarillo-press);transform:scale(.97)}
.btn-secundario{background:var(--blanco);color:var(--tinta);border-color:var(--linea)}
.btn-secundario:hover,.btn-secundario.is-hover{border-color:var(--app-line);background:var(--app-soft)}
.btn-secundario:active,.btn-secundario.is-press{transform:scale(.97)}
.btn-texto{background:none;color:var(--app);padding:0 var(--e3)}
.btn-peligro{background:var(--blanco);color:var(--mal);border-color:#F3C4C0}
.btn[disabled],.btn.is-disabled{background:var(--superficie);color:var(--tinta-3);border-color:var(--linea);cursor:not-allowed;transform:none}
.btn.is-cargando{color:transparent;position:relative;pointer-events:none}
.btn.is-cargando::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--tinta);border-right-color:transparent;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.btn-icono{width:var(--toque);padding:0}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-ancho{width:100%}

/* ── campo ─────────────────────────────────────────────── */
.campo{display:block;margin:0 0 var(--e4)}
.campo > span{display:block;font-weight:var(--peso-fuerte);font-size:var(--t-s);margin:0 0 var(--e1)}
.campo input,.campo select{width:100%;min-height:var(--toque);padding:0 var(--e3);border:1.5px solid var(--linea);
  border-radius:var(--r-campo);background:var(--blanco);font-size:var(--t-base)}
.campo input::placeholder{color:var(--tinta-3)}
.campo textarea{width:100%;min-height:88px;padding:var(--e3);border:1.5px solid var(--linea);border-radius:var(--r-campo);background:var(--blanco);font:inherit;font-size:var(--t-base);color:var(--tinta);resize:vertical}
.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--app);box-shadow:0 0 0 3px var(--app-soft)}
.campo input:focus,.campo.is-foco input{outline:none;border-color:var(--app);box-shadow:0 0 0 3px var(--app-soft)}
.campo .ayuda{display:block;font-size:var(--t-xs);color:var(--tinta-3);margin-top:var(--e1)}
.campo.is-error input{border-color:var(--mal);box-shadow:0 0 0 3px var(--mal-soft)}
.campo.is-error .ayuda{color:var(--mal)}

/* ── tarjeta y lista ───────────────────────────────────── */
.tarjeta{background:var(--blanco);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);padding:var(--e4)}
.lista{list-style:none;margin:0;padding:0}
.lista > li{display:flex;align-items:center;gap:var(--e3);min-height:56px;padding:var(--e2) 0;border-bottom:1px solid var(--linea)}
.lista > li:last-child{border-bottom:0}
.lista .crece{flex:1;min-width:0}
.lista b{display:block;font-weight:var(--peso-fuerte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── chip y pastilla ───────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--e3);border-radius:var(--r-chip);
  background:var(--blanco);border:1.5px solid var(--linea);font-size:var(--t-s);font-weight:var(--peso-fuerte);white-space:nowrap;
  color:var(--tinta);text-decoration:none}
.chip.is-activo{background:var(--app);color:var(--blanco);border-color:var(--app)}
.chip .n{font-variant-numeric:tabular-nums;opacity:.8}
.chip.mal{background:var(--mal-soft);border-color:#F3C4C0;color:var(--mal)}
.chip.aviso{background:var(--aviso-soft);border-color:#F0D98A;color:var(--aviso)}
.punto{width:10px;height:10px;border-radius:50%;flex:none}

/* ── pestañas ──────────────────────────────────────────── */
.pestanas{display:flex;gap:var(--e1);background:var(--superficie);border-radius:var(--r-boton);padding:var(--e1)}
.pestanas a{flex:1;text-align:center;min-height:40px;line-height:40px;border-radius:9px;color:var(--tinta-2);
  text-decoration:none;font-weight:var(--peso-fuerte);font-size:var(--t-s)}
.pestanas a.is-activo{background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra-1)}

/* ── barra de arriba y navegación al alcance del pulgar ── */
.barra{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--e2);
  padding:var(--e3) var(--gutter);background:var(--superficie)}
.barra .crece{flex:1;min-width:0}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;
  background:var(--blanco);border-top:1px solid var(--linea);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;
  font-size:11.5px;font-weight:var(--peso-fuerte);color:var(--tinta-3);text-decoration:none}
.nav a.is-activo{color:var(--app)}
.nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flota{position:fixed;right:var(--gutter);bottom:84px;z-index:7;box-shadow:var(--sombra-2)}

/* ── hoja inferior ─────────────────────────────────────── */
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--blanco);border-radius:20px 20px 0 0;
  box-shadow:var(--sombra-hoja);padding:var(--e2) var(--gutter) calc(var(--e4) + env(safe-area-inset-bottom));
  animation:sube var(--t-entrada) var(--entra)}
.hoja::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--linea);margin:0 auto var(--e3)}
@keyframes sube{from{transform:translateY(40px);opacity:0}}
.velo{position:fixed;inset:0;z-index:7;background:rgba(20,33,61,.35)}

/* ── aviso (toast) ─────────────────────────────────────── */
.aviso{display:flex;align-items:center;gap:var(--e3);background:var(--tinta);color:var(--blanco);border-radius:var(--r-boton);
  padding:var(--e3) var(--e4);font-size:var(--t-s);box-shadow:var(--sombra-2)}
.aviso .btn-texto{color:var(--amarillo);min-height:36px;margin-left:auto}

/* ── vacío, error y carga ──────────────────────────────── */
.vacio{text-align:center;padding:var(--e6) var(--e4)}
.vacio p{color:var(--tinta-2);margin:var(--e2) 0 var(--e4)}
.error{background:var(--mal-soft);border-radius:var(--r-tarjeta);padding:var(--e4);color:var(--tinta)}
.error b{color:var(--mal)}
.esq{display:block;border-radius:6px;background:linear-gradient(90deg,#E8EBF0 25%,#F4F6F9 50%,#E8EBF0 75%);
  background-size:200% 100%;animation:brillo 1.2s linear infinite}
@keyframes brillo{to{background-position:-200% 0}}

/* ── pizarrón ──────────────────────────────────────────── */
.piz{display:grid;grid-template-columns:76px repeat(var(--dias,3),1fr);gap:0;background:var(--blanco);
  border-radius:var(--r-tarjeta);box-shadow:var(--sombra-1);overflow:hidden}
.piz .cab{position:sticky;top:0;padding:var(--e2) var(--e1);text-align:center;font-size:var(--t-xs);font-weight:var(--peso-fuerte);
  color:var(--tinta-2);background:var(--blanco);border-bottom:1px solid var(--linea);border-left:1px solid var(--linea)}
.piz .cab b{display:block;font-size:var(--t-base);color:var(--tinta)}
.piz .cab.hoy{color:var(--app);background:var(--app-soft)}.piz .cab.hoy b{color:var(--app)}
.piz .quien{padding:var(--e2);font-size:var(--t-xs);font-weight:var(--peso-fuerte);border-bottom:1px solid var(--linea);
  display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1.2}
.piz .quien i{font-style:normal;font-weight:var(--peso-normal);color:var(--tinta-3)}
.piz .celda{border-left:1px solid var(--linea);border-bottom:1px solid var(--linea);display:grid;grid-template-rows:1fr 1fr;gap:3px;padding:3px;min-height:84px}
.piz .celda.hoy{background:#F8F9FD}
.bloque{border-radius:var(--r-bloque);padding:4px 6px;font-size:11.5px;line-height:1.2;color:var(--blanco);font-weight:var(--peso-fuerte);
  overflow:hidden;min-height:36px;display:flex;flex-direction:column;justify-content:center}
.bloque i{font-style:normal;font-weight:var(--peso-normal);opacity:.9}
.bloque.libre{background:none;border:1.5px dashed var(--linea);color:var(--tinta-3);font-weight:var(--peso-normal);align-items:center}
.bloque.hecho{opacity:.45;text-decoration:line-through}
.bloque.tarde{box-shadow:inset 0 0 0 2px var(--mal)}
.bloque.arrastra{transform:scale(1.04) rotate(-1deg);box-shadow:var(--sombra-2)}