/* BRIDGE · estilo. Todo sale de aquí: ni un color ni un tamaño escrito a mano
   por ahí suelto. Claro y oscuro, y el mismo aspecto en Blink y en WebKit.
   El acento es VIOLETA a propósito: BRIDGE no es nexOS y no se confunde con él. */

:root{
  --bg:#eef0f3;
  --surface:#ffffff;
  --surface-2:#e7e9ee;
  --surface-3:#f5f6f9;
  --ink:#181c22;
  --ink-muted:#5b6470;
  --ink-soft:#818b98;
  --line:#d7dbe1;
  --line-fuerte:#c2c8d1;
  --accent:#54469b;
  --accent-soft:#ece9f7;
  --accent-borde:#c9c0ea;
  --sobre-acento:#ffffff;

  --ok-fuerte:#1f9d55; --ok:#15713c; --ok-soft:#e4f5ea;
  --avi-fuerte:#d98b00; --avi:#8a5a00; --avi-soft:#fdf1dc;
  --mal-fuerte:#d64545; --mal:#a32323; --mal-soft:#fdeaea;
  --info:#2f5f8a; --info-soft:#e3ecf3;

  /* Tres colores que solo sirven para decir QUIÉN ES IGUAL A QUIÉN (las tres
     versiones de «Subidas»). No son avisos: nada de verde-bien ni rojo-mal. */
  --acc-a:#54469b; --acc-a-soft:#efecfa;
  --acc-b:#0f6c72; --acc-b-soft:#e2f1f2;
  --acc-c:#8a4b1d; --acc-c-soft:#fbeee2;

  --radio:9px;
  --radio-chico:6px;
  --sombra:0 1px 2px rgba(20,26,36,.06), 0 6px 18px rgba(20,26,36,.06);
  --sombra-alta:0 8px 30px rgba(20,26,36,.16);
  --barra-alto:52px;
  --rail:232px;
  --lista:392px;
  --tipo:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --t-rapida:120ms;
  --t-normal:180ms;
}

:root[data-tema="oscuro"]{
  --bg:#14171b;
  --surface:#1b1f24;
  --surface-2:#242930;
  --surface-3:#1f242a;
  --ink:#e7e9ec;
  --ink-muted:#98a1ac;
  --ink-soft:#79828e;
  --line:#2c323a;
  --line-fuerte:#3a414b;
  --accent:#a99bef;
  --accent-soft:#272343;
  --accent-borde:#463c78;
  --sobre-acento:#14121f;
  --ok:#5fd18c; --ok-soft:#14291d;
  --avi:#e2b45c; --avi-soft:#2b2317;
  --mal:#f0918f; --mal-soft:#2e1a1c;
  --info:#7db0dd; --info-soft:#1b2833;
  --acc-a:#a99bef; --acc-a-soft:#272343;
  --acc-b:#6fcbd1; --acc-b-soft:#12282a;
  --acc-c:#e0a273; --acc-c-soft:#2c1f16;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sombra-alta:0 10px 40px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.45 var(--tipo);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--accent-soft); color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ── Barra de arriba: SIEMPRE visible, nunca se encoge ────────────────────── */
.barra{
  position:fixed; inset:0 0 auto 0; height:var(--barra-alto); z-index:40;
  display:flex; align-items:center; gap:14px; padding:0 16px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.marca{display:flex; align-items:center; gap:9px; font-weight:650; letter-spacing:.14em; font-size:12.5px}
.marca .punto{
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #b9aef4, var(--accent) 62%);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.marca small{letter-spacing:0; font-weight:500; font-size:11.5px; color:var(--ink-soft)}
.barra .crece{flex:1}

.buscador{
  display:flex; align-items:center; gap:7px; min-width:220px; max-width:340px; flex:1;
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--radio-chico);
  padding:5px 10px; transition:border-color var(--t-rapida), background var(--t-rapida);
}
.buscador:focus-within{border-color:var(--accent-borde); background:var(--surface)}
.buscador input{border:0; background:none; width:100%; outline:none}
.buscador span{color:var(--ink-soft); font-size:13px}

/* ── Armazón de tres columnas ─────────────────────────────────────────────── */
.armazon{
  position:fixed; inset:var(--barra-alto) 0 0 0;
  display:grid; grid-template-columns:var(--rail) var(--lista) 1fr; min-height:0;
}
.rail{border-right:1px solid var(--line); background:var(--surface); overflow-y:auto; padding:10px 8px 24px}
.centro{border-right:1px solid var(--line); background:var(--surface-3); overflow-y:auto; display:flex; flex-direction:column}
.ficha{background:var(--surface); overflow-y:auto; padding:0 0 40px}

.rail h2{
  margin:14px 8px 6px; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:650;
}
.rail button{
  width:100%; display:flex; align-items:center; gap:9px; padding:7px 9px; margin:1px 0;
  background:none; border:0; border-radius:var(--radio-chico); cursor:pointer; text-align:left;
  color:var(--ink); transition:background var(--t-rapida);
}
.rail button:hover{background:var(--surface-2)}
.rail button[aria-current="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.rail button span.texto{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail button .n{margin-left:auto; color:var(--ink-soft); font-variant-numeric:tabular-nums; font-size:12.5px}
.rail button[aria-current="true"] .n{color:var(--accent)}
.rail .icono{
  width:20px; height:20px; display:grid; place-items:center; border-radius:5px;
  background:var(--surface-2); font-size:11px; color:var(--ink-muted); flex:none;
}
.rail button[aria-current="true"] .icono{background:var(--surface); color:var(--accent)}

/* ── Captura ──────────────────────────────────────────────────────────────── */
.captura{padding:14px 16px 10px; background:var(--surface); border-bottom:1px solid var(--line)}
.captura .caja{
  border:1px solid var(--line-fuerte); border-radius:var(--radio); background:var(--surface);
  transition:border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.captura .caja:focus-within{border-color:var(--accent-borde); box-shadow:0 0 0 3px var(--accent-soft)}
.captura textarea{
  width:100%; border:0; background:none; resize:none; padding:11px 12px 4px; outline:none;
  min-height:62px; max-height:220px; line-height:1.5;
}
.captura .pie{display:flex; align-items:center; gap:8px; padding:6px 8px 7px 12px}
.captura .pie .crece{flex:1}
#pista-captura{margin:6px 2px 0}
.pista{color:var(--ink-soft); font-size:11.5px}
.adjuntos{display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 8px}
.adjunto{
  display:flex; align-items:center; gap:6px; background:var(--surface-2); border-radius:20px;
  padding:3px 9px; font-size:12px;
}
.adjunto img{width:22px; height:22px; object-fit:cover; border-radius:4px}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 13px; border-radius:var(--radio-chico); border:1px solid var(--line-fuerte);
  background:var(--surface); color:var(--ink); cursor:pointer; font-weight:500;
  transition:background var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida);
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.principal{background:var(--accent); border-color:var(--accent); color:var(--sobre-acento)}
.btn.principal:hover{filter:brightness(1.08)}
.btn.suave{border-color:transparent; background:var(--surface-2)}
.btn.fantasma{border-color:transparent; background:none; color:var(--ink-muted)}
.btn.fantasma:hover{background:var(--surface-2); color:var(--ink)}
.btn.chico{padding:3px 9px; font-size:12.5px}
.btn.peligro{color:var(--mal); border-color:var(--mal-soft); background:var(--mal-soft)}

/* ── Lista de tareas ──────────────────────────────────────────────────────── */
.lista{padding:8px; position:relative}
/* En directo (Juan, 23-09): la tarjeta que se va se desvanece donde estaba y la
   que llega entra con un fundido. Solo opacidad y desplazamiento: nada cambia de
   tamaño ni empuja lo de al lado. */
.tarjeta.se-va{position:absolute; margin:0; box-sizing:border-box; pointer-events:none; z-index:1;
  animation:tarjeta-se-va .32s ease-in forwards}
.tarjeta.llega{animation:tarjeta-llega .36s ease-out}
@keyframes tarjeta-se-va{to{opacity:0; transform:translateX(18px)}}
@keyframes tarjeta-llega{from{opacity:0; transform:translateY(-6px)}}
.rail .buzon .n.late{animation:cifra-late .7s ease-out}
@keyframes cifra-late{30%{transform:scale(1.35); color:var(--accent)}}
.lista h3{
  margin:12px 8px 6px; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:650; display:flex; align-items:center; gap:8px;
}
.tarjeta{
  width:100%; text-align:left; display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radio); padding:10px 12px; margin:6px 0; cursor:pointer;
  transition:border-color var(--t-rapida), box-shadow var(--t-rapida), transform var(--t-rapida);
}
.tarjeta:hover{border-color:var(--line-fuerte); box-shadow:var(--sombra)}
.tarjeta[aria-current="true"]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.tarjeta .cabeza{display:flex; align-items:center; gap:8px; margin-bottom:3px}
.tarjeta .titulo{font-weight:560; line-height:1.35; overflow-wrap:anywhere}
.tarjeta .meta{display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap}
.num{font:600 11.5px var(--mono); color:var(--ink-soft); flex:none}

.chip{
  display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:2px 9px;
  font-size:11.5px; font-weight:560; background:var(--surface-2); color:var(--ink-muted);
  border:1px solid transparent; white-space:nowrap;
}
.chip .p{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.avi{background:var(--avi-soft); color:var(--avi)}
.chip.mal{background:var(--mal-soft); color:var(--mal)}
.chip.info{background:var(--info-soft); color:var(--info)}
.chip.acc{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-borde)}
.chip.deducido{border:1px dashed var(--line-fuerte); background:none}

/* ── Ficha ────────────────────────────────────────────────────────────────── */
.ficha .cabecera{
  position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--line);
  padding:14px 20px 0; z-index:5;
}
.ficha h1{margin:0 0 6px; font-size:19px; line-height:1.3; font-weight:640; overflow-wrap:anywhere}
.ficha .sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px}
/* Se doblan en vez de salirse: con seis pestañas, o con el texto grande, las
   últimas quedaban fuera de la pantalla del teléfono y no había forma de
   llegar a ellas (ALI-01). */
.pestanas{display:flex; gap:2px; flex-wrap:wrap; row-gap:0}
.pestanas button{
  background:none; border:0; border-bottom:2px solid transparent; padding:8px 11px; cursor:pointer;
  color:var(--ink-muted); font-weight:540; transition:color var(--t-rapida), border-color var(--t-rapida);
}
.pestanas button:hover{color:var(--ink)}
.pestanas button[aria-selected="true"]{color:var(--accent); border-color:var(--accent)}
/* En el teléfono las cuatro caben en una fila si se reparten el ancho; solo
   con la letra grande vuelven a doblarse, que es lo que no deja nada fuera. */
@media (max-width:560px){
  .pestanas{flex-wrap:wrap}
  .pestanas button{flex:1 1 auto; padding:8px 4px; white-space:nowrap}
}
.hoja{padding:16px 20px; max-width:860px}
.hoja h4{margin:20px 0 8px; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft)}
.hoja h4:first-child{margin-top:4px}

.caja{background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radio); padding:12px 14px}
.caja + .caja{margin-top:8px}
.literal{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55}
.literal .fuente{display:block; margin-top:7px; color:var(--ink-soft); font-size:11.5px}

.lineas{list-style:none; margin:0; padding:0}
.lineas li{display:flex; gap:9px; padding:5px 0; border-bottom:1px solid var(--line)}
.lineas li:last-child{border:0}
.lineas .cuando{color:var(--ink-soft); font:11.5px/1.7 var(--mono); flex:none; width:104px}
.lineas .quien{flex:none; width:72px; color:var(--ink-muted); font-size:12px}
.lineas.pasos .quien{width:18px; color:var(--accent); font-weight:650; text-align:center}
.lineas.pasos li{align-items:flex-start}

/* ── Preguntas ────────────────────────────────────────────────────────────── */
.pregunta{border:1px solid var(--accent-borde); background:var(--surface); border-radius:var(--radio); padding:14px; margin:10px 0}
.pregunta.respondida{border-color:var(--line); background:var(--surface-3)}
.pregunta .texto{font-weight:580; margin-bottom:3px}
.pregunta .ayuda{color:var(--ink-muted); font-size:12.5px; margin-bottom:9px}
.opciones{display:flex; flex-direction:column; gap:6px; margin:8px 0 10px}
.opcion{
  display:flex; align-items:flex-start; gap:9px; padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--radio-chico); cursor:pointer; background:var(--surface);
  transition:border-color var(--t-rapida), background var(--t-rapida);
}
.opcion:hover{border-color:var(--line-fuerte)}
.opcion input{margin:2px 0 0}
.opcion.elegida{border-color:var(--accent); background:var(--accent-soft)}
.pregunta .pie{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.pregunta textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radio-chico); padding:8px 10px;
  background:var(--surface); resize:vertical; min-height:60px; outline:none;
}
.pregunta textarea:focus{border-color:var(--accent-borde); box-shadow:0 0 0 3px var(--accent-soft)}

/* ── Avisos ───────────────────────────────────────────────────────────────── */
.aviso{
  display:flex; gap:10px; align-items:flex-start; border-radius:var(--radio); padding:11px 13px;
  border:1px solid transparent; margin:10px 0;
}
.aviso .ic{font-size:14px; line-height:1.2; flex:none}
.aviso.info{background:var(--info-soft); color:var(--info); border-color:transparent}
.aviso.avi{background:var(--avi-soft); color:var(--avi)}
.aviso.mal{background:var(--mal-soft); color:var(--mal)}
.aviso.ok{background:var(--ok-soft); color:var(--ok)}
.aviso .cuerpo{color:var(--ink)}
.aviso .cuerpo strong{color:inherit}
/* El «Te toca a ti» de un encargo finalizado es el pie de la ficha, fuera de
   lo que se desplaza: la ficha pasa a columna, arriba lo que corre y abajo el
   pie quieto. No depende de «sticky», que no aguantaba (Juan, 23-09). */
.ficha-desliza{min-height:0}
.ficha.con-pie, body.con-ficha .ficha.con-pie{display:flex; flex-direction:column; overflow:hidden; padding:0}
body.en-subidas .ficha.con-pie, body.en-comunicados .ficha.con-pie{display:none}
.ficha.con-pie .ficha-desliza{flex:1 1 auto; overflow-y:auto; padding-bottom:24px}
.ficha.con-pie .aviso.veredicto{
  flex:none; margin:0; border-radius:0; border:0; border-top:1px solid var(--line);
  box-shadow:0 -6px 16px rgba(0,0,0,.08); padding:11px 20px;
}

/* ── Guardado / recados ───────────────────────────────────────────────────── */
.recados{position:fixed; right:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; gap:8px}
.recado{
  display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ok); border-radius:var(--radio); padding:10px 14px; box-shadow:var(--sombra-alta);
  animation:entra var(--t-normal) ease both; max-width:380px;
}
.recado.mal{border-left-color:var(--mal)}
.recado.avi{border-left-color:var(--avi)}
.recado .btn{margin-left:auto}
@keyframes entra{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}

/* ── Vacíos ───────────────────────────────────────────────────────────────── */
.vacio{padding:40px 24px; text-align:center; color:var(--ink-soft)}
.mas-antiguos{margin:14px 0 24px; text-align:center}
.vacio .grande{font-size:30px; margin-bottom:8px; opacity:.5}
.vacio p{margin:4px 0}

/* ── Ventana (importar la cola, preparar encargo…) ────────────────────────── */
.velo{
  position:fixed; inset:0; background:rgba(15,18,24,.45); z-index:70; display:grid; place-items:center;
  grid-template-rows:minmax(0,1fr); padding:28px; animation:aparece var(--t-rapida) ease both;
}
@keyframes aparece{from{opacity:0} to{opacity:1}}
.ventana{
  background:var(--surface); border-radius:12px; box-shadow:var(--sombra-alta); width:min(920px,100%);
  max-height:min(100%, calc(100vh - 56px)); display:flex; flex-direction:column;
  animation:sube var(--t-normal) ease both;
}
@keyframes sube{from{opacity:0; transform:translateY(10px) scale(.99)} to{opacity:1; transform:none}}
.ventana header{padding:16px 20px 12px; border-bottom:1px solid var(--line); flex:none}
.ventana footer{flex:none}
.ventana header h2{margin:0 0 3px; font-size:16.5px}
.ventana header p{margin:0; color:var(--ink-muted); font-size:13px}
.ventana .cuerpo{padding:14px 20px; overflow:auto; min-height:0; flex:1}
.ventana footer{padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:9px; align-items:center}
.ventana footer .crece{flex:1}

table.datos{width:100%; border-collapse:collapse; font-size:13px}
table.datos th{
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  padding:6px 8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface);
}
table.datos td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top}
table.datos tr:hover td{background:var(--surface-3)}

/* ── El árbol de temas: rail, filtros, clasificador y selector ────────────── */
/* Ni un color ni un tamaño suelto: todo sale de las variables de arriba, y se
   ve igual en Blink y en WebKit (norma de compatibilidad). */
.cambio-vista{display:flex; gap:2px; padding:2px; margin:2px 4px 10px; background:var(--surface-2); border-radius:var(--radio-chico)}
.cambio-vista button{
  flex:1; min-width:0; border:0; background:none; border-radius:var(--radio-chico);
  padding:5px 8px; font-size:12.5px; color:var(--ink-muted); cursor:pointer; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.cambio-vista button[aria-current="true"]{background:var(--surface); color:var(--accent); font-weight:600; box-shadow:var(--sombra)}
.cambio-vista .icono{font-size:12px}
.cambio-vista .icono + .texto{margin-left:5px}

.arbol{padding-bottom:12px}
.nodo{display:flex; align-items:stretch; gap:0}
.nodo .abre{
  flex:none; width:20px; border:0; background:none; color:var(--ink-soft); cursor:pointer;
  font-size:10px; line-height:1; padding:0; border-radius:var(--radio-chico);
}
.nodo .abre:hover{background:var(--surface-2); color:var(--ink)}
.nodo .abre.vacio{cursor:default}
.rail .rama, .ventana .rama{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px; text-align:left;
  border:0; background:none; cursor:pointer; padding:5px 8px; border-radius:var(--radio-chico);
  color:var(--ink); line-height:1.35;
}
.rail .rama:hover, .ventana .rama:hover{background:var(--surface-2)}
.rail .rama[aria-current="true"], .ventana .rama[aria-current="true"]{
  background:var(--accent-soft); color:var(--accent); font-weight:600;
}
.rama .texto{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rama .n{flex:none; color:var(--ink-soft); font-variant-numeric:tabular-nums; font-size:12px}
.rama[aria-current="true"] .n{color:var(--accent)}
.rama.todo{margin:0 0 4px 20px; font-weight:600}
.nodo.n1 > .rama{font-weight:600}
.nodo.n2 > .rama, .nodo.n3 > .rama{font-size:13px}
.hijos{margin-left:14px; border-left:1px solid var(--line)}
.hijos .nodo.n3 > .rama{color:var(--ink-muted)}

/* Mirando por temas el rail necesita anchura de verdad: los nombres son frases,
   y un nombre cortado no clasifica nada (ALI-01). */
body[data-vista="temas"]{--rail:288px}

.filtros{
  padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px;
}
.filtros .linea{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
/* `hidden` tiene que poder con el display de arriba: si no, lo plegado se ve. */
.filtros .linea[hidden], .clasifica .fila[hidden]{display:none}
.filtros .linea .crece{flex:1}
.filtros .linea.despliegue{padding:2px 0 4px; border-top:1px solid var(--line)}
.filtros .linea.repasa{padding-top:4px; border-top:1px solid var(--line)}
.filtros .sep{width:1px; align-self:stretch; background:var(--line); margin:0 3px}
.chip.elige{cursor:pointer; border-color:var(--line); background:var(--surface-3)}
.chip.elige:hover{border-color:var(--line-fuerte); color:var(--ink)}
.chip.elige .ic{font-size:11px; opacity:.8}
.chip .quita{
  border:0; background:none; cursor:pointer; color:inherit; padding:0 0 0 4px;
  font-size:13px; line-height:1;
}
.chip.tema{background:var(--surface-2); color:var(--ink-muted)}
/* En la tarjeta de la lista el tema largo se cortaba contra el borde (ALI-01):
   se queda en su sitio con puntos suspensivos, y entero al pasar por encima. */
span.chip.tema{display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle}
.chip.indole{background:none; border-color:var(--line-fuerte); color:var(--ink-muted)}
.chip.marca{background:none; border-style:dotted; color:var(--ink-soft)}
.chip.tema.deducido, .chip.indole.deducido{border:1px dashed var(--line-fuerte); background:none}

/* El clasificador de la caja de apuntar */
.clasifica{padding:0 12px 8px; display:flex; flex-direction:column; gap:6px}
/* Arriba, no al medio: con la columna estrecha el selector ocupa tres renglones
   y la etiqueta tiene que seguir enfrente del primero (ALI-01). */
.clasifica .fila{display:flex; align-items:flex-start; gap:7px; flex-wrap:wrap}
.clasifica .fila > .chip{margin-top:3px}
.clasifica .et{
  flex:none; width:62px; padding-top:5px; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.clasifica .fila.chips{padding-left:69px; gap:5px}
/* «Partes»: varias a la vez, en fila junto a su etiqueta. */
.clasifica .fila > .chips{flex:1 1 150px; min-width:0; display:flex; flex-wrap:wrap; gap:5px; padding-top:1px}
.clasifica select{
  flex:1 1 150px; min-width:0; max-width:100%; border:1px solid var(--line);
  background:var(--surface); border-radius:var(--radio-chico); padding:4px 7px;
  font-size:12.5px; color:var(--ink);
}
.clasifica select:focus{border-color:var(--accent-borde); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.clasifica .porque{
  font-size:11.5px; color:var(--ink-muted); background:var(--surface-3);
  border-radius:var(--radio-chico); padding:6px 9px; line-height:1.45;
}
.clasifica .porque.falta{color:var(--avi); background:var(--avi-soft)}
.clasifica .porque em{font-style:normal; color:var(--ink)}

.selector-tema{display:flex; gap:5px; flex-wrap:wrap; flex:1; min-width:0}
.selector-tema select{
  min-width:0; max-width:100%; flex:1 1 140px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--radio-chico); padding:4px 7px; font-size:12.5px; color:var(--ink);
}
.selector-tema select:focus{border-color:var(--accent-borde); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
/* El buscador del sitio: ocupa su renglón entero y las sugerencias caen debajo
   sin empujar nada (flotan), para que los desplegables no se muevan al teclear. */
.busca-tema-caja{position:relative; flex:1 1 100%; min-width:0}
.busca-tema{width:100%; box-sizing:border-box; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--radio-chico); padding:5px 8px; font-size:12.5px; color:var(--ink); font-family:inherit}
.busca-tema:focus{border-color:var(--accent-borde); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.sugerencias-tema{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; max-height:260px;
  overflow:auto; background:var(--surface); border:1px solid var(--line-fuerte); border-radius:var(--radio-chico);
  box-shadow:var(--sombra-alta); padding:4px}
.sugerencias-tema button{display:block; width:100%; text-align:left; border:0; background:none; color:var(--ink);
  font:inherit; font-size:12.5px; line-height:1.35; padding:6px 8px; border-radius:var(--radio-chico); cursor:pointer}
.sugerencias-tema button:hover,.sugerencias-tema button:focus{background:var(--accent-soft); outline:none}
.sugerencias-tema .pista{margin:6px 8px}
.hoja .caja .chips{display:flex; gap:6px; flex-wrap:wrap}

/* ── Pantallas estrechas: las columnas se apilan, las barras no se van ────── */
@media (max-width:1180px){
  :root{--rail:64px; --lista:340px}
  /* Solo se encogen los botones de estado: el conmutador y el árbol tienen sus
     propias reglas más abajo, porque un nombre de rama cortado no clasifica nada. */
  .rail button[data-filtro] span.texto{display:none}
  .rail h2{display:none}
  .rail button[data-filtro]{justify-content:center}
  .rail button[data-filtro] .n{margin:0; font-size:11px}
  body[data-vista="estados"] .cambio-vista{flex-direction:column; gap:3px}
  body[data-vista="estados"] .cambio-vista .texto{display:none}
  /* Por temas el rail no se encoge: lo que se estrecha es la lista, no el árbol. */
  body[data-vista="temas"]{--rail:264px; --lista:300px}
  body[data-vista="temas"] .cambio-vista button{padding:5px 4px}
}
@media (max-width:860px){
  /* La barra de arriba NO se esconde ni pierde nada: cuando no cabe de una
     tirada, se reparte en dos renglones y CRECE. El alto lo mide la pantalla
     (mideBarra), así lo de debajo baja con ella y nada se tapa (ALI-01). */
  .barra{
    flex-wrap:wrap; height:auto; min-height:var(--barra-alto);
    padding:7px 12px; gap:8px; row-gap:7px; align-content:center;
  }
  .marca{flex:0 0 auto; white-space:nowrap}
  .barra .crece{display:none}
  .buscador{order:9; flex:1 1 100%; min-width:0; max-width:none}
  .armazon{grid-template-columns:1fr}
  .rail{display:none}
  .centro{display:none}
  body.con-ficha .ficha{display:block}
  /* Y sin ficha abierta, la ficha NO se ve: en el teléfono solo cabe una cosa,
     y las dos a la vez dejaban la lista y el «elige algo de la lista» pegados. */
  body:not(.con-ficha) .ficha{display:none}
  body:not(.con-ficha) .centro{display:flex}
}

/* ══════════════════════════════════════════════════════════════════════════
   AJU-P1 · TODO EN LA BARRA DE LA IZQUIERDA, Y LO QUE ELIGE CADA UNO
   (Juan, 2026-09-20: «los botones de arriba a la derecha no tienen nada que ver
   entre ellos: todo a la barra de la izquierda, ordenado y estructurado, y
   arriba solo la marca, el buscador, configuración y salir»).

   Aquí va: el tamaño y los colores que se eligen en Configuración, la barra de
   la izquierda por grupos, y la barra de abajo del teléfono (que es por donde
   se llega a lo de la izquierda cuando no cabe · BAR-01).
   ══════════════════════════════════════════════════════════════════════════ */

/* El tamaño de todo. En el monitor crece con `zoom`, así que crece TODO junto y
   no hay nada que se descoloque (ALI-01). En una pantalla táctil `--ui-zoom`
   vale 1 y lo que crece es la letra: ahí el zoom encoge lo que se estira a la
   pantalla y deja franjas en blanco (lección de nexOS, MOV-55). */
body{zoom:var(--ui-zoom, 1)}

/* ── El color de BRIDGE ───────────────────────────────────────────────────── */
:root[data-acento="indigo"]{--accent:#40509f;--accent-soft:#e8eaf7;--accent-borde:#c0c7e8}
:root[data-acento="ciruela"]{--accent:#8e3f7d;--accent-soft:#f6e9f3;--accent-borde:#e0bfd8}
:root[data-acento="petroleo"]{--accent:#136d74;--accent-soft:#e0f0f1;--accent-borde:#b3d8da}
:root[data-acento="grafito"]{--accent:#41505e;--accent-soft:#e8ebee;--accent-borde:#c4ccd4}
:root[data-tema="oscuro"][data-acento="indigo"]{--accent:#9aabf2;--accent-soft:#1f2542;--accent-borde:#394479}
:root[data-tema="oscuro"][data-acento="ciruela"]{--accent:#e39bd4;--accent-soft:#2d1e2a;--accent-borde:#5d3a55}
:root[data-tema="oscuro"][data-acento="petroleo"]{--accent:#6ec9d0;--accent-soft:#12282a;--accent-borde:#2c5c60}
:root[data-tema="oscuro"][data-acento="grafito"]{--accent:#b3c0cd;--accent-soft:#232a31;--accent-borde:#404a55}
/* El punto de la marca sale del acento, no de un violeta escrito a mano: si se
   cambia el color, cambia con él. */
.marca .punto{
  background:radial-gradient(circle at 34% 32%, color-mix(in srgb, var(--accent) 42%, #fff), var(--accent) 62%);
}

/* ── Densidad, esquinas y movimiento ──────────────────────────────────────── */
:root[data-densidad="compacta"] .rail button{padding:4px 8px}
:root[data-densidad="compacta"] .rail h2{margin:9px 8px 4px}
:root[data-densidad="compacta"] .tarjeta{padding:7px 10px; margin:4px 0}
:root[data-densidad="compacta"] .lista{padding:5px}
:root[data-densidad="compacta"] .lista h3{margin:8px 8px 4px}
:root[data-densidad="compacta"] .captura{padding:9px 12px 7px}
:root[data-densidad="compacta"] .filtros{padding:5px 10px; gap:5px}
:root[data-densidad="compacta"] .ficha .cabecera{padding:9px 14px 0}
:root[data-densidad="compacta"] .hoja{padding:11px 14px}
:root[data-densidad="compacta"] .caja{padding:8px 11px}
:root[data-densidad="compacta"] .aj-fila{padding:8px 0}

:root[data-esquinas="suaves"]{--radio:5px; --radio-chico:4px}
:root[data-esquinas="rectas"]{--radio:2px; --radio-chico:2px}

:root[data-movimiento="reducido"] *,
:root[data-movimiento="reducido"] *::before,
:root[data-movimiento="reducido"] *::after{
  animation-duration:.001ms !important; transition-duration:.001ms !important;
}

/* ── Ancho de las columnas ────────────────────────────────────────────────── */
:root[data-columnas="estrecho"]{--rail:196px; --lista:332px}
:root[data-columnas="ancho"]{--rail:268px; --lista:470px}
/* Mirando por temas el rail necesita más sitio (los nombres son frases), pero
   sigue respetando lo que se haya elegido. */
:root[data-columnas="estrecho"] body[data-vista="temas"]{--rail:250px; --lista:332px}
:root[data-columnas="ancho"] body[data-vista="temas"]{--rail:320px; --lista:470px}

:root[data-caja="alta"] .captura textarea{min-height:122px}

/* ── Los recados: cuánto duran lo dice el JS; dónde salen, esto ───────────── */
:root[data-recados="abajo-izquierda"] .recados{right:auto; left:16px; align-items:flex-start}
:root[data-recados="arriba-derecha"] .recados{bottom:auto; top:calc(var(--barra-alto) + 14px)}
.recado .quita-recado{margin-left:auto; font-size:15px; line-height:1; padding:1px 8px}

/* ── La barra de arriba: marca, buscador, configuración y salir ───────────── */
.barra-btn{gap:6px}
.barra-btn .ic{font-size:13px; line-height:1}
@media (max-width:560px){
  .barra-btn .texto{display:none}
  .barra-btn{padding:5px 9px}
  .marca small{display:none}
}

/* ── El medidor semanal de Claude (T-0098) ────────────────────────────────────
   La pista entera lleva el semáforo (verde → ámbar → rojo) apagado; lo que
   toca a esta hora se enciende hasta --cuota. La rayita oscura es lo que marcó
   la última ventana (--real). En el móvil: solo cifras y la rayita de color. */
.cuota{display:flex; align-items:center; gap:7px; flex:0 0 auto; cursor:help;
  font-size:11.5px; line-height:1.15; color:var(--ink-muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; border-radius:6px; padding:2px 4px}
.cuota:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.cuota-rotulo{font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px}
.cuota-pista{position:relative; width:92px; height:8px; border-radius:99px; flex:0 0 auto;
  background:linear-gradient(90deg, var(--ok-fuerte), var(--avi-fuerte) 55%, var(--mal-fuerte));
  box-shadow:inset 0 0 0 1px var(--line)}
.cuota-pista::before{content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--surface); opacity:.72;
  clip-path:inset(0 0 0 calc(var(--cuota, 0) * 1%))}
.cuota-toca{position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:2px;
  left:calc(var(--cuota, 0) * 1% - 1px); background:var(--ink-muted)}
.cuota-marca{display:none; position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
  left:calc(var(--real, 0) * 1% - 5px); transform:translateY(-50%);
  background:var(--ok); box-shadow:0 0 0 2px var(--surface)}
.cuota.con-real .cuota-marca{display:block}
.cuota.pasado .cuota-marca{background:var(--mal)}
.cuota-cifras{display:flex; align-items:baseline; gap:4px}
.cuota-real{font-weight:650; color:var(--ok)}
.cuota.pasado .cuota-real{color:var(--mal)}
.cuota.con-real .cuota-num::before{content:"de "; font-weight:400}
.cuota:not(.con-real) .cuota-num::before{content:"máx. "}
/* Con la pantalla a medias, el medidor cede sitio antes que la marca y el
   buscador: fuera el rótulo y la pista más corta (ALI-01). */
.marca{white-space:nowrap}
@media (max-width:1180px){
  .cuota-rotulo{display:none}
  .cuota-pista{width:64px}
}
@media (max-width:560px){
  .cuota{flex-direction:column; align-items:stretch; gap:3px; padding:2px}
  .cuota-rotulo{display:none}
  .cuota-pista{width:auto; min-width:44px; height:4px}
  .cuota-toca{top:-2px; bottom:-2px}
  .cuota-marca{width:7px; height:7px}
  .cuota-cifras{justify-content:center; font-size:11px}
  .cuota.con-real .cuota-num::before{content:"/ "}
  .cuota:not(.con-real) .cuota-num::before{content:none}
}

/* ── La barra de la izquierda, por grupos ─────────────────────────────────── */
.rail{flex-direction:column; padding:0; overflow:hidden}
@media (min-width:861px){ .rail{display:flex} }
.rail-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 8px 14px}
.rail-grupo + .rail-grupo{margin-top:6px; padding-top:6px; border-top:1px solid var(--line)}
.rail-grupo h2:first-child{margin-top:6px}
.rail-pie{flex:none; padding:5px 8px 9px; border-top:1px solid var(--line); background:var(--surface)}
.rail-pie h2{
  margin:4px 8px 3px; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:650;
}
.rail-pie button{min-height:28px}
.rail-pie button .texto{font-size:12px; color:var(--ink-muted)}
.punto-estado{
  width:8px; height:8px; border-radius:50%; flex:none; margin:0 6px; background:var(--ink-soft);
}
.punto-estado.ok{background:var(--ok)}
.punto-estado.avi{background:var(--avi)}
.punto-estado.info{background:var(--info)}
.punto-estado.mal{background:var(--mal)}
.rail button[data-abre] .n.mal{color:var(--mal); margin-left:auto}
.rail-cabeza{display:none}

/* ── La barra de abajo del teléfono ───────────────────────────────────────── */
.barra-abajo{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
  align-items:stretch; gap:2px; padding:3px 4px calc(3px + env(safe-area-inset-bottom, 0px));
  background:var(--surface); border-top:1px solid var(--line);
}
.barra-abajo button{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 2px; border:0; background:none; border-radius:var(--radio-chico);
  color:var(--ink-muted); cursor:pointer;
}
.barra-abajo button[aria-current="true"]{color:var(--accent); background:var(--accent-soft)}
.barra-abajo .ic{font-size:15px; line-height:1.1; position:relative; display:block}
.barra-abajo .lbl{
  font-size:10.5px; line-height:1.2; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.barra-abajo .punto-aviso{
  position:absolute; top:-1px; right:-7px; width:6px; height:6px; border-radius:50%;
  background:var(--mal); display:block;
}

/* ── Pantalla estrecha: la barra de la izquierda se queda en iconos ───────── */
@media (max-width:1180px){
  .rail button[data-abre] span.texto,
  .rail-pie button .texto{display:none}
  .rail button[data-abre],
  .rail-pie button{justify-content:center}
  .rail-pie h2{display:none}
  .punto-estado{margin:0}
  .rail button[data-abre] .n.mal{margin:0; font-size:11px}
}

/* ── Teléfono: la de la izquierda entra y sale; la de abajo no se va ──────── */
@media (max-width:860px){
  .armazon{inset:var(--barra-alto) 0 var(--barra-abajo-alto, 54px) 0}
  .barra-abajo{display:flex}
  .recados{bottom:calc(14px + var(--barra-abajo-alto, 54px))}
  body.rail-abierto .rail{
    display:flex; position:fixed; left:0; top:var(--barra-alto);
    bottom:var(--barra-abajo-alto, 54px); width:min(316px, 86vw); z-index:46;
    box-shadow:var(--sombra-alta); border-right:1px solid var(--line-fuerte);
  }
  body.rail-abierto .rail button[data-abre] span.texto,
  body.rail-abierto .rail-pie button .texto{display:block}
  body.rail-abierto .rail button[data-abre],
  body.rail-abierto .rail-pie button{justify-content:flex-start}
  body.rail-abierto .rail h2,
  body.rail-abierto .rail-pie h2{display:block}
  body.rail-abierto .rail button[data-filtro] span.texto{display:block}
  /* Y el conmutador «Estados | Temas» se lee entero: en el cajón hay sitio. */
  body.rail-abierto[data-vista] .cambio-vista{flex-direction:row; gap:2px}
  body.rail-abierto[data-vista] .cambio-vista .texto{display:inline}
  body.rail-abierto .rail button[data-filtro]{justify-content:flex-start}
  body.rail-abierto .rail button[data-filtro] .n{margin-left:auto; font-size:12.5px}
  body.rail-abierto .rail-cabeza{
    display:flex; align-items:center; gap:8px; flex:none;
    padding:9px 10px 8px 14px; border-bottom:1px solid var(--line); background:var(--surface);
  }
  body.rail-abierto .rail-cabeza b{flex:1; font-size:13px}
  /* Lo de detrás se oscurece, y se toca para cerrar (lo cierra el JS). */
  body.rail-abierto::after{
    content:""; position:fixed; inset:var(--barra-alto) 0 var(--barra-abajo-alto, 54px) 0;
    background:rgba(15,18,24,.42); z-index:45;
  }
}

/* Un recado que sale con la Configuración abierta tiene que VERSE: si no, lo
   que confirma que una copia se ha guardado queda detrás del velo. */
.recados{z-index:80}

/* ALI-01 · En el teléfono, una etiqueta larga se parte en vez de salirse de la
   tarjeta: recortarla escondería el final, que es justo lo que distingue una
   rama del árbol de otra. */
@media (max-width:560px){
  .tarjeta .meta .chip,
  .ficha .sub .chip{white-space:normal; max-width:100%}
}

/* Las herramientas y el estado no se deslizan con la bandeja: se quedan abajo. */
.rail-fijo{flex:none; background:var(--surface); border-top:1px solid var(--line)}
.rail-fijo .rail-grupo{margin:0; padding:3px 8px 4px; border-top:0}
.rail-fijo .rail-grupo h2:first-child{margin-top:4px}

/* ══════════════════════════════════════════════════════════════════════════
   COLA-03 · LA PANTALLA DE LA COLA, REHECHA (Juan, 2026-09-20)
   «No me gusta nada esta sección, no se entiende nada, no acierta nada bien.»

   Aquí va lo que se ve de: la sección propia de Nueva tarea, los dos ejes
   (aparato y visual/función), el botón TRABAJO con su medidor, el punto azul
   de lo acabado sin abrir, y elegir varias tareas a la vez.
   Ni un color ni un tamaño suelto: todo sale de las variables de arriba, y se
   mide en los dos motores (norma de compatibilidad · ALI-01).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Las dos secciones del centro ─────────────────────────────────────────── */
.centro > .pane{display:flex; flex-direction:column; min-height:0}
.centro > .pane[hidden]{display:none}
.pane.nueva{padding:0 0 28px; overflow-y:auto}
.nueva-cabeza{padding:16px 16px 4px}
.nueva-cabeza h2{margin:0 0 4px; font-size:16px; font-weight:640}
.nueva-cabeza p{margin:0; line-height:1.5}
/* Aquí la caja de escribir ya no va pegada a la lista: es la sección. */
.pane.nueva .captura{border-bottom:0; background:none; padding:12px 16px 0}
.pane.nueva .captura textarea{min-height:104px}
.nueva-ia{display:flex; align-items:flex-start; gap:9px; padding:9px 12px 4px; flex-wrap:wrap}
.nueva-ia .pista{flex:1 1 220px; min-width:0; line-height:1.45}
.pane.nueva #pista-captura{padding:0 18px}
.pane.nueva #parecidas{padding:8px 16px 0}

/* ── Los dos ejes nuevos en las tarjetas ─────────────────────────────────── */
.chip.eje{background:var(--surface-2); color:var(--ink-muted); border-color:var(--line)}

/* ── El punto azul: acabada y todavía sin abrir ──────────────────────────── */
.punto-azul{
  width:8px; height:8px; border-radius:50%; flex:none; display:inline-block;
  background:var(--info); box-shadow:0 0 0 2px var(--info-soft);
}
.chip.elige .punto-azul{margin-right:5px}
.barra-abajo .punto-aviso{background:var(--info)}

/* ── Elegir varias tareas (modo TRABAJO) ─────────────────────────────────── */
.tarjeta .elegir{
  flex:none; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--line-fuerte);
  display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1;
  color:var(--sobre-acento); background:var(--surface);
}
.tarjeta .elegir.si{background:var(--accent); border-color:var(--accent)}
.tarjeta.elegida{border-color:var(--accent); background:var(--accent-soft)}

/* ── La barra del TRABAJO, encima de la lista ────────────────────────────── */
.barra-trabajo{padding:8px 12px 0}
.barra-trabajo:empty{display:none}
.btn-trabajo{
  width:100%; display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  border:1px solid var(--accent-borde); background:var(--accent-soft); color:var(--accent);
  border-radius:var(--radio); padding:10px 13px; line-height:1.3;
}
.btn-trabajo:hover{filter:brightness(1.03)}
.btn-trabajo .ic{font-size:17px; line-height:1; flex:none}
.btn-trabajo .txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.btn-trabajo strong{letter-spacing:.09em; font-size:12.5px}
.btn-trabajo small{color:var(--ink-muted); font-size:11.5px; overflow-wrap:anywhere}
.barra-trabajo .eligiendo{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  border:1px solid var(--accent-borde); background:var(--surface); border-radius:var(--radio);
  padding:7px 9px;
}
.barra-trabajo .eligiendo .crece{flex:1}

/* ── El medidor de agrupación ────────────────────────────────────────────── */
.medidor{
  border:1px solid var(--line); background:var(--surface-3);
  border-radius:var(--radio); padding:11px 13px; margin-bottom:12px;
}
.medidor.gana{border-color:var(--ok-soft); background:var(--ok-soft)}
.medidor .cifras{display:flex; align-items:baseline; gap:7px 13px; flex-wrap:wrap}
.medidor .cifras strong{font-size:16px; font-variant-numeric:tabular-nums}
.medidor .flecha{color:var(--ink-soft)}
.medidor .barra{
  height:7px; border-radius:99px; background:var(--surface-2); margin:9px 0 7px; overflow:hidden;
}
.medidor .barra i{display:block; height:100%; border-radius:99px; background:var(--accent)}
.medidor.gana .barra i{background:var(--ok)}
.medidor .pista{line-height:1.45; display:block}

/* ── Los grupos que propone ──────────────────────────────────────────────── */
.grupos .grupo{
  border:1px solid var(--line); border-radius:var(--radio); padding:10px 12px; margin-bottom:9px;
  background:var(--surface);
}
.grupos .grupo.juntas{border-color:var(--accent-borde)}
.grupos .grupo .cabeza{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.grupos .grupo .cabeza .crece{flex:1}
.grupos .grupo .porque{margin:8px 0 4px; color:var(--ink-muted); font-size:12.5px; line-height:1.45}
.grupos .grupo .lineas .quien{width:64px; font:600 11.5px var(--mono)}

/* ── Teléfono: la sección de Nueva tarea ocupa lo suyo y nada se sale ────── */
@media (max-width:860px){
  .pane.nueva{padding-bottom:18px}
  .nueva-cabeza{padding:12px 14px 2px}
  .pane.nueva .captura{padding:10px 14px 0}
}
@media (max-width:560px){
  .medidor .cifras strong{font-size:15px}
  .grupos .grupo .lineas li{flex-wrap:wrap}
  .grupos .grupo .lineas .quien{width:auto}
}

/* ── El tope del mes y los apuntes de gasto ────────────────────────────────
   El color de la barra dice en qué zona va, pero nunca va solo: al lado están
   siempre la cifra, el porcentaje y lo que queda (ALI-01). Y todo se mide en
   `em`, así que con la letra al 125 % crece junto y no se descoloca nada. */
.tope-cab{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tope-cab > span:first-child{font-weight:600}
.tope-barra{
  height:.6em; min-height:7px; margin:9px 0 7px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line); overflow:hidden;
}
.tope-barra i{display:block; height:100%; border-radius:99px; background:var(--ok)}
.tope-barra i.avi{background:var(--avi)}
.tope-barra i.mal{background:var(--mal)}
.tope-cifras{margin:0; font-size:13px}
.pie-tope{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px}

form.apunta{display:flex; flex-direction:column; gap:9px}
form.apunta label{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* El rótulo tiene ancho fijo en `ch`: los campos quedan alineados en columna
   con cualquier tamaño de letra, y en el teléfono el rótulo se pone encima. */
form.apunta label > span:first-child{flex:none; width:13ch; color:var(--ink-muted); font-size:13px}
form.apunta input, form.apunta select{
  flex:1; min-width:0; padding:7px 10px; border-radius:var(--radio-chico, 8px);
  border:1px solid var(--line-fuerte); background:var(--surface-3);
}
form.apunta input:focus, form.apunta select:focus{
  border-color:var(--accent-borde); outline:none; box-shadow:0 0 0 3px var(--accent-soft);
}
form.apunta .par{display:flex; gap:8px; flex:1; min-width:0}
form.apunta .par select{flex:none; width:8.5ch}
form.apunta .pie{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px}
@media (max-width:560px){
  form.apunta label{align-items:stretch; flex-direction:column; gap:4px}
  form.apunta label > span:first-child{width:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA FICHA DE UN ENCARGO, EN CUATRO PESTAÑAS (Juan, 2026-09-22)
   Encargo · Lanzadera · Informe · Historial. Todo se mide en `em` para que con
   la letra al 125 % crezca junto y no se descoloque nada (ALI-01).
   ═════════════════════════════════════════════════════════════════════════ */

/* El desplegable de arriba: el estado, que es lo mismo que el buzón. Parece un
   chip porque hace de chip, pero se puede cambiar en cualquier momento. */
.estado-cambia{
  display:inline-flex; align-items:center; gap:.35em; padding:0 .2em 0 .55em;
  border:1px solid var(--line-fuerte); border-radius:99px; background:var(--surface-2);
  max-width:100%;
}
.estado-cambia .p{
  width:.5em; height:.5em; min-width:6px; min-height:6px; border-radius:50%;
  background:var(--ink-soft); flex:none;
}
.estado-cambia.ok .p{background:var(--ok)}
.estado-cambia.acc .p{background:var(--accent)}
.estado-cambia.avi .p{background:var(--avi)}
.estado-cambia.info .p{background:var(--info)}
.estado-cambia select{
  border:0; background:none; color:inherit; font:inherit; font-size:12.5px;
  padding:.25em 1.4em .25em .1em; margin:0; cursor:pointer; max-width:16em;
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - .75em) 55%, calc(100% - .45em) 55%;
  background-size:.3em .3em, .3em .3em; background-repeat:no-repeat;
}
.estado-cambia select:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:99px}
.estado-cambia select option:disabled{color:var(--ink-soft)}

/* La caja de escribir y el pie de botones que llevan varias cajas. */
.caja.escribir textarea{
  width:100%; border:0; background:none; outline:none; resize:vertical;
  font:inherit; color:inherit; min-height:3.4em;
}
.pie-caja{display:flex; align-items:center; gap:.6em; flex-wrap:wrap; margin-top:.6em}
.pie-caja .crece{flex:1}
.linea-chips{display:flex; align-items:center; gap:.5em; flex-wrap:wrap; margin-bottom:.6em}
.linea-chips:empty{display:none}
.fotos-ficha{display:flex; gap:.6em; flex-wrap:wrap}
.fotos-ficha img{max-height:7.5em; border-radius:var(--radio-chico); border:1px solid var(--line); display:block}

/* Las opciones del encargo: dos columnas en el monitor, una en el teléfono, y
   cada recuadro con su rótulo arriba para que se lean en vertical. */
.opciones-encargo{display:grid; grid-template-columns:1fr 1fr; gap:.7em}
.opciones-encargo .op{
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radio);
  padding:.7em .8em; min-width:0;
}
.opciones-encargo .op.ancha{grid-column:1 / -1}
.opciones-encargo .et{
  display:flex; align-items:center; gap:.5em; flex-wrap:wrap; margin-bottom:.5em;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:650;
}
.opciones-encargo .ahora{margin:0 0 .5em; font-weight:600; overflow-wrap:anywhere}
.opciones-encargo .chips{display:flex; gap:.35em; flex-wrap:wrap}
.opciones-encargo .pista{margin:.5em 0 0}
.opciones-encargo .pie-op{display:flex; align-items:center; gap:.6em; flex-wrap:wrap; margin-top:.6em}
.opciones-encargo select{max-width:100%}
@media (max-width:760px){
  .opciones-encargo{grid-template-columns:1fr}
}

/* BRIDGEA: el botón que escribe el encargo entero. Grande porque es el que se
   pulsa, y con lo que hace escrito al lado, no dentro. */
.caja.puentea .nota-ventana{display:block; margin:.7em 0 0; font-size:13px; color:var(--ink-muted)}
.caja.puentea .nota-ventana textarea{
  display:block; width:100%; margin-top:.4em; padding:.55em .7em; font:inherit; color:var(--ink);
  border:1px solid var(--line-fuerte); border-radius:var(--radio-chico);
  background:var(--surface); resize:vertical;
}
.puentea-pie{display:flex; align-items:flex-start; gap:.9em; flex-wrap:wrap; margin-top:.9em}
.puentea-dice{flex:1 1 16em; min-width:0; display:flex; flex-direction:column; gap:.3em}
.btn.grande{
  padding:.7em 1.5em; font-size:15px; font-weight:700; letter-spacing:.08em;
  border-radius:var(--radio); flex:none;
}
.int-chica{display:inline-flex; align-items:center; gap:.45em; font-size:12.5px; color:var(--ink-muted); cursor:pointer}
.int-chica input{margin:0}
.caja.puenteado textarea{
  width:100%; min-height:20em; margin:0; padding:.7em .8em; resize:vertical;
  font:12.5px/1.6 var(--mono); color:var(--ink);
  border:1px solid var(--line-fuerte); border-radius:var(--radio-chico); background:var(--surface);
}

/* El historial: la fecha con su hora, siempre en la misma columna. */
.lineas.historial .cuando{width:8.6em}
@media (max-width:560px){
  .lineas.historial li{flex-wrap:wrap}
  .lineas.historial .cuando, .lineas.historial .quien{width:auto}
}

/* ── Al pie de la barra de la izquierda: CONFIGURACIÓN ─────────────────────
   Juan, 22-09: fuera de arriba a la derecha y aquí abajo, con formato de
   verdad: su azulejo, su nombre y, debajo, qué hay dentro. */
.rail-pie{display:flex; flex-direction:column; gap:.4em}
.rail-pie .preparando{
  margin:0; padding:0 .5em; font-size:12px; color:var(--ink-soft);
  display:flex; align-items:center; gap:.4em;
}
.rail-pie .preparando .giro{display:inline-block; animation:puente-giro 1.6s linear infinite}
:root[data-movimiento="reducido"] .rail-pie .preparando .giro{animation:none}
@keyframes puente-giro{to{transform:rotate(360deg)}}
.rail-pie .pie-ajustes{
  display:flex; align-items:center; gap:.6em; width:100%; min-height:2.8em;
  padding:.5em .6em; border:1px solid var(--line); border-radius:var(--radio);
  background:var(--surface-2); color:var(--ink); cursor:pointer; text-align:left;
}
.rail-pie .pie-ajustes:hover{background:var(--accent-soft); border-color:var(--accent-borde)}
.rail-pie .pie-ajustes .icono{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:1.9em; height:1.9em; border-radius:var(--radio-chico);
  background:var(--surface); border:1px solid var(--line); font-size:13px;
}
.rail-pie .pie-ajustes:hover .icono{color:var(--accent); border-color:var(--accent-borde)}
.rail-pie .pie-ajustes .texto{display:flex; flex-direction:column; min-width:0; gap:.1em}
.rail-pie .pie-ajustes .texto b{font-size:13px; font-weight:650; color:var(--ink)}
.rail-pie .pie-ajustes .texto small{
  font-size:11px; line-height:1.35; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Estrecha: se queda el azulejo solo, centrado, y el nombre en el título. */
@media (max-width:1180px){
  .rail-pie .pie-ajustes{justify-content:center}
  .rail-pie .pie-ajustes .texto{display:none}
  .rail-pie .preparando{justify-content:center; padding:0}
  .rail-pie .preparando span:not(.giro){display:none}
}
@media (max-width:860px){
  body.rail-abierto .rail-pie .pie-ajustes{justify-content:flex-start}
  body.rail-abierto .rail-pie .pie-ajustes .texto{display:flex}
}

/* ── Informe de la ventana, en resumen (T-0082) ─────────────────────────────
   Un semáforo arriba, lo pedido frente a lo hecho y una luz por apartado. Todo
   dobla solo si el texto crece o la pantalla estrecha (ALI-01): sin tablas. */
.inf-semaforo{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:var(--radio);
  border:1px solid var(--line); background:var(--surface-3)}
.inf-semaforo .luz{flex:none; width:18px; height:18px; border-radius:50%}
.inf-semaforo .cuerpo{display:flex; flex-direction:column; gap:2px; min-width:0}
.inf-semaforo strong{font-size:16px; line-height:1.3}
.inf-semaforo .cuerpo span{color:var(--ink-muted); overflow-wrap:anywhere}
.inf-semaforo.ok{background:var(--ok-soft); border-color:transparent}  .inf-semaforo.ok strong{color:var(--ok)}
.inf-semaforo.avi{background:var(--avi-soft); border-color:transparent} .inf-semaforo.avi strong{color:var(--avi)}
.inf-semaforo.mal{background:var(--mal-soft); border-color:transparent} .inf-semaforo.mal strong{color:var(--mal)}
.inf-semaforo.ok .luz, .inf-luces li.ok > .luz{background:var(--ok-fuerte)}
.inf-semaforo.avi .luz, .inf-luces li.avi > .luz{background:var(--avi-fuerte)}
.inf-semaforo.mal .luz, .inf-luces li.mal > .luz{background:var(--mal-fuerte)}
.inf-luces li.gris > .luz{background:var(--line-fuerte)}

.inf-frente{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:8px; margin-top:10px}
.inf-frente .caja + .caja{margin-top:0}
.inf-frente .que{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}

.inf-luces{list-style:none; margin:10px 0 0; padding:0; border:1px solid var(--line); border-radius:var(--radio); background:var(--surface)}
.inf-luces > li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:9px 12px; border-bottom:1px solid var(--line)}
.inf-luces > li:last-child{border-bottom:0}
.inf-luces > li > .luz{flex:none; width:11px; height:11px; border-radius:50%; align-self:center}
.inf-luces .nombre{flex:none; min-width:92px; font-weight:600}
.inf-luces .valor{flex:1 1 180px; min-width:0; overflow-wrap:anywhere}
.inf-luces .valor .pista{margin-left:6px}
.inf-luces ul{flex:1 1 100%; margin:2px 0 0; padding-left:34px}
.inf-luces ul li{margin:3px 0; overflow-wrap:anywhere}

.inf-detalle{margin-top:18px; border-top:1px solid var(--line); padding-top:10px}
.inf-detalle > summary, .inf-literal > summary{cursor:pointer; color:var(--ink-muted); font-weight:600; padding:4px 0}
.inf-detalle .lineas li{overflow-wrap:anywhere}
.inf-literal{margin-top:12px}
.inf-literal .caja{margin-top:6px; font-size:12.5px}
.inf-detalle .lineas li{display:block}

/* ── BRIDGEA: se ve si piensa, si está caído y, al acabar, el texto ────────
   Juan, 25-09: «nunca sé si está pensando, si está bloqueado o si está caído». */
.velo-puentea .ventana{width:min(760px,100%)}
.pz-estado{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  background:var(--ok-soft); color:var(--ok); margin-bottom:12px}
.pz-estado > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.pz-estado .pista{color:inherit; opacity:.85}
.pz-estado.caido, .pz-estado.mal{background:var(--mal-soft); color:var(--mal)}
.pz-luz{flex:none; width:12px; height:12px; border-radius:50%; background:currentColor}
.pz-estado.piensa .pz-luz{animation:pz-late 1.2s ease-in-out infinite}
@keyframes pz-late{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)}}
.pz-reloj{flex:none; font-variant-numeric:tabular-nums; font-weight:650; font-size:18px}
.pz-pasos{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px}
.pz-pasos li{display:flex; align-items:baseline; gap:8px; color:var(--ink-muted)}
.pz-pasos li.hecho{color:var(--ok)}
.pz-pasos li.va{color:var(--ink); font-weight:600}
.pz-marca{flex:none; width:1.2em; text-align:center}
.pz-pasos li.va .pz-marca{display:inline-block; animation:puente-giro 1.6s linear infinite}
.pz-texto{width:100%; box-sizing:border-box; min-height:40vh; margin-top:10px; resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.5;
  border:1px solid var(--line); border-radius:8px; padding:10px; background:var(--surface); color:var(--ink)}
:root[data-movimiento="reducido"] .pz-luz, :root[data-movimiento="reducido"] .pz-pasos li.va .pz-marca{animation:none}
@media (prefers-reduced-motion:reduce){.pz-luz, .pz-pasos li.va .pz-marca{animation:none}}