/* ⚠️ Acá había `@import url("/marca/fuentes.css")`, y el @import se quitó a
   propósito: un @import obliga al navegador a bajar ESTE archivo, leerlo, y
   solo entonces pedir el otro — un viaje encadenado de más. Medido: las
   fuentes no empezaban a bajar hasta los 54 ms. Ahora `fuentes.css` se pide
   desde el HTML, al mismo tiempo que este archivo. */

/* ═══════════════════════════════════════════════════════════════
   DGNOVA Agents
   Marca: dgnova.co · Tipografía: ui-ux-pro-max --domain typography
   Tema: HÍBRIDO — menú marino de la marca, área de trabajo clara.
   Nunca toda oscura (la destreza lo lista como anti-patrón).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── la marca, intocable ── */
  --marino:      #0E1B30;
  --marino-alto: #2A3854;
  --turquesa:    #00D9C0;
  --azul:        #2F7BF6;
  --degradado:   linear-gradient(135deg, #2F7BF6 0%, #00D9C0 100%);

  /* ── el menú: marino en todos los temas ── */
  --menu:        #0E1B30;
  --menu-2:      #16243C;
  --menu-3:      #1B3350;
  --menu-txt:    #E3E9F2;
  --menu-txt-2:  #93A0B4;
  --menu-borde:  #22304A;

  /* ── el área de trabajo: clara ── */
  --piso:        #F4F7FA;
  --carta:       #FFFFFF;
  --carta-2:     #EDF2F7;
  --carta-3:     #E3EAF2;
  --borde:       #D6DEE8;
  --borde-2:     #E7EDF3;
  --txt:         #101A28;
  --txt-2:       #45536B;
  --txt-3:       #55647E;   /* medido: 5,98:1 sobre blanco - 5,31:1 sobre carta-2 */

  /* ⚠️ El acento pasa por --marca-acento para que la empresa pueda cambiarlo
     SIN pisar el del tema oscuro. Antes app.js escribía --acento en línea y
     eso le ganaba al bloque de abajo: el tema oscuro tenía su color y nunca
     se usaba. Medido: 3,42:1 sobre la tarjeta oscura. */
  --acento:      var(--marca-acento, #1B5FBF);   /* medido: 4,89:1 sobre blanco. Sirve para sus DOS
                               papeles, que son el mismo cálculo: relleno con
                               letra blanca (el botón) y texto sobre tarjeta (la
                               pestaña viva). ⚠️ Aquí decía «4.9:1» del #0D8E80
                               anterior, y ese color mide 4,04:1 — no pasaba.
                               ⚠️ Y no puede ser #0A7266: ese ya es --acento-2,
                               que es el hover y el texto sobre el turquesa
                               claro. Si fueran iguales, el hover no se vería. */
  --acento-2:    #0A7266;

  /* ⚠️ QUÉ LETRA VA ENCIMA DE UN RELLENO DE COLOR. No es siempre blanca:
     el tema oscuro aclara los colores para usarlos de texto, y cuando esos
     mismos colores hacen de relleno la letra blanca se pierde. Medido en el
     barrido: «Enviar» daba 2,90:1 y la insignia de avisos 2,60:1.
     Si la empresa cambia su color, app.js vuelve a medir y reescribe esto. */
  --sobre-acento:    var(--marca-sobre-acento, #ffffff);
  --sobre-fuerte:    #ffffff;   /* encima de los rellenos de estado */
  --sobre-degradado: #0B1220;   /* medido sobre el degradado de DGNOVA: 4,71:1
                                   en su punto más difícil, el extremo azul.
                                   Con letra blanca ahí daba 1,80:1. */
  --acento-piso: #E0F7F4;
  --acento-bord: #9FE5DC;
  --enlace:      #1B5FBF;

  --bien: #17734B; --bien-piso: #DFF3E9;
  --ojo:  #8A5A0B; --ojo-piso:  #FBEFD8;
  --mal:  #A32B22; --mal-piso:  #FADEDB;

  --r:    10px;
  --r-2:  7px;
  --r-3:  999px;
  --sombra:   0 1px 2px rgba(16,26,40,.06), 0 6px 18px rgba(16,26,40,.07);
  --sombra-2: 0 2px 6px rgba(16,26,40,.10), 0 18px 44px rgba(16,26,40,.14);

  --letra: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --menu-ancho: 268px;
  --panel-ancho: 400px;
}

/* El sistema pide oscuro y la persona no eligió claro: cambia el ÁREA,
   el menú se queda marino. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="hibrido"]) {
    --piso: #0B1220; --carta: #131E2F; --carta-2: #1A2739; --carta-3: #223145;
    --borde: #27374E; --borde-2: #1E2C40;
    --txt: #E3E9F2; --txt-2: #9CADBC; --txt-3: #8DA0B2;   /* medido: 4,90:1 en el peor fondo (carta-3). El #6E7F8F de antes daba 3,20:1 */
    --acento: var(--marca-acento-claro, #2FD9C6); --acento-2: #5FE5D6;   /* la versión aclarada del color de la empresa */
    --sobre-acento: var(--marca-sobre-acento-claro, #0B1220);
    --sobre-fuerte: #0B1220;   /* aquí los colores de estado son claros */
    --acento-piso: #0A2E2C; --acento-bord: #12564F; --enlace: #6FA8F0;
    --bien: #56C295; --bien-piso: #0E2A1F;
    --ojo:  #D6AC5C; --ojo-piso:  #2A2113;
    --mal:  #E5877C; --mal-piso:  #2E1815;
    --sombra:   0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.30);
    --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.40);
  }
}
:root[data-tema="oscuro"] {
  --piso: #0B1220; --carta: #131E2F; --carta-2: #1A2739; --carta-3: #223145;
  --borde: #27374E; --borde-2: #1E2C40;
  --txt: #E3E9F2; --txt-2: #9CADBC; --txt-3: #8DA0B2;   /* medido: 4,90:1 en el peor fondo (carta-3). El #6E7F8F de antes daba 3,20:1 */
  --acento: var(--marca-acento-claro, #2FD9C6); --acento-2: #5FE5D6;   /* la versión aclarada del color de la empresa */
    --sobre-acento: var(--marca-sobre-acento-claro, #0B1220);
    --sobre-fuerte: #0B1220;   /* aquí los colores de estado son claros */
  --acento-piso: #0A2E2C; --acento-bord: #12564F; --enlace: #6FA8F0;
  --bien: #56C295; --bien-piso: #0E2A1F;
  --ojo:  #D6AC5C; --ojo-piso:  #2A2113;
  --mal:  #E5877C; --mal-piso:  #2E1815;
  --sombra:   0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.30);
  --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.40);
}

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--piso);
  color: var(--txt);
  font-family: var(--letra);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--acento-piso); color: var(--acento-2); }
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -.016em; font-weight: 700; }
a { color: var(--enlace); }
.oculto { display: none !important; }
/* ⚠️ `margin: 0` y anclada arriba: sin eso, el margen del <p> empujaba la
   pagina 16px mas abajo del alto de la pantalla y salia una SEGUNDA barra de
   desplazamiento, con una franja blanca al final. Una caja invisible no puede
   mover el diseno. */
.solo-lectores {
  position: absolute; top: 0; left: 0; margin: 0; padding: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── barra de desplazamiento discreta ── */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borde); border-radius: var(--r-3); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--txt-3); background-clip: content-box; }

/* ═══════════ ENTRADA ═══════════ */
#entrar {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--piso);
}
.entrar-obra {
  position: relative; overflow: hidden;
  background: var(--marino);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px;
  color: var(--menu-txt);
}
/* La imagen de la entrada: generada para DGNOVA, vive en el servidor.
   Se funde con el marino por abajo para que el texto se lea encima. */
.entrar-obra::before {
  content: ""; position: absolute; inset: 0;
  /* ⚠️ DOS renglones a propósito. El primero es el respaldo: un navegador
     que no entienda `image-set` se queda con el PNG y se ve igual. El
     segundo escoge WebP cuando se puede — medido, 768 KB → 31 KB, un 96%
     menos, con una diferencia promedio de 0,92 sobre 255 (imperceptible).
     La original NO se tocó: sigue ahí, entera. */
  background: url("/marca/entrada.png") center 22% / cover no-repeat;
  /* ⚠️ Una empresa con imagen propia la pone en `--obra-fondo` y gana; sin ella
     la variable no existe, se usa el respaldo y la de la casa se queda igual. */
  background-image: var(--obra-fondo, image-set(url("/marca/entrada-v2.webp") type("image/webp"),
                                                url("/marca/entrada.png") type("image/png")));
  opacity: .95;
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
}
.entrar-obra::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 44% at 26% 20%, rgba(47,123,246,.30), transparent 72%),
    linear-gradient(180deg, transparent 40%, var(--marino) 96%);
}
.entrar-malla { display: none; }   /* la imagen ya trae su propia retícula */
/* ⚠️ El ::after es un elemento posicionado y va DESPUÉS en el orden de
   pintado: sin z-index se monta encima del texto y la frase se ve apagada.
   Pasó. Por eso el contenido va explícitamente por encima. */
.entrar-obra::before { z-index: 0; }
.entrar-obra::after  { z-index: 1; }
.entrar-obra > *     { position: relative; z-index: 2; }
/* ⚠️ En una columna flex los hijos se ESTIRAN a todo el ancho por defecto
   (align-items: stretch). Con una imagen eso la deforma, y `width: auto` NO
   lo evita. Hay que sacarla de ese estiramiento con align-self. Pasó. */
.entrar-logo {
  height: 34px; width: auto; max-width: 210px;
  align-self: flex-start; object-fit: contain; object-position: left center;
}
.entrar-frase {
  max-width: 19ch;
  text-shadow: 0 2px 18px rgba(6,12,22,.85), 0 1px 3px rgba(6,12,22,.7);
}
.entrar-frase h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.03em; color: #fff;
}
.entrar-frase h1 em {
  font-style: normal;
  background: var(--degradado);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.entrar-frase p { color: var(--menu-txt-2); font-size: 1.02rem; margin: 16px 0 0; max-width: 34ch; }
.entrar-pie { display: flex; gap: 22px; font-size: 12.5px; color: var(--menu-txt-2); font-family: var(--mono); }
.entrar-pie span { display: flex; align-items: center; gap: 7px; }
.entrar-pie i { width: 7px; height: 7px; border-radius: 2px; background: var(--turquesa); display: block; }

.entrar-caja { display: grid; place-items: center; padding: 32px; }
.entrar-form { width: 100%; max-width: 384px; }
.entrar-form h2 { font-size: 1.62rem; }
.entrar-form .sub { color: var(--txt-2); margin: 8px 0 30px; }

/* ═══════════ CAMPOS ═══════════ */
.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--txt-2);
  margin-bottom: 7px; letter-spacing: .01em;
}
.campo input, .campo select, .campo textarea, .campo-inline {
  width: 100%; background: var(--carta); color: var(--txt);
  border: 1px solid var(--borde); border-radius: var(--r-2);
  padding: 11px 13px; font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:hover, .campo select:hover, .campo-inline:hover { border-color: var(--txt-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .campo-inline:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-piso);
}
.campo .pista { display: block; margin-top: 6px; font-size: 12.5px; color: var(--txt-3); }

/* ═══════════ BOTONES — con fondo, nunca fantasmas ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acento); color: var(--sobre-acento); border: 1px solid transparent;
  border-radius: var(--r-2); padding: 11px 18px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.005em;
  min-height: 44px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--acento-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-ancho { width: 100%; }
.btn-2 { background: var(--carta-2); color: var(--txt); border-color: var(--borde); }
.btn-2:hover { background: var(--carta-3); }
.btn-mal { background: var(--mal); }
.btn-chico { padding: 7px 12px; font-size: 13px; min-height: 36px; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ═══════════ ARMAZÓN ═══════════ */
#app { display: grid; grid-template-columns: var(--menu-ancho) 1fr; height: 100dvh; }
#app.con-panel { grid-template-columns: var(--menu-ancho) 1fr var(--panel-ancho); }

/* ── el menú: marino ── */
#aside {
  background: var(--menu); color: var(--menu-txt);
  border-right: 1px solid var(--menu-borde);
  display: flex; flex-direction: column; min-height: 0;
}
.aside-cabeza {
  padding: 18px 18px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--menu-borde);
}
.aside-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aside-logo img { height: 26px; width: auto; }
#marca-lateral { font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.aside-zona { padding: 14px; }
/* Los títulos largos se cortan con puntos, no empujan la caja. */
.aside-lista .conv { min-width: 0; }
.aside-lista .conv > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⚠️ `overflow-x: hidden`: sin esto un título largo empujaba la lista y salía
   una barra horizontal en el menú. Un menú no se desplaza de lado. */
.aside-lista {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 0 10px 10px;
}
.aside-titulillo {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--menu-txt-2); padding: 14px 8px 8px;
}
.conv {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 0; border-radius: var(--r-2);
  padding: 9px 10px; text-align: left; color: var(--menu-txt-2);
  font-size: 14px; min-height: 40px;
  transition: background .15s ease, color .15s ease;
}
.conv:hover { background: var(--menu-2); color: var(--menu-txt); }
.conv.viva { background: var(--menu-3); color: #fff; font-weight: 600; }
.conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* ⚠️ Un SVG sin tamaño se estira a lo que dé la fila. Todos los íconos de la
   aplicación llevan medida explícita: sin esto salen gigantes. */
.conv svg, .conv-fila svg { width: 17px; height: 17px; flex: none; }
.aside-logo img { height: 26px; max-width: 132px; object-fit: contain; object-position: left; }
.aside-pie { border-top: 1px solid var(--menu-borde); padding: 12px 14px 14px; display: grid; gap: 4px; }
.aside-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: var(--r-2);
  padding: 9px 10px; color: var(--menu-txt-2); font-size: 14px; min-height: 40px;
  transition: background .15s ease, color .15s ease;
}
.aside-btn:hover { background: var(--menu-2); color: var(--menu-txt); }
.aside-btn svg { width: 17px; height: 17px; flex: none; }

/* medidor de consumo */
.medidor { padding: 10px 4px 12px; }
.medidor-riel { height: 5px; background: var(--menu-2); border-radius: var(--r-3); overflow: hidden; }
.medidor-riel > i { display: block; height: 100%; background: var(--degradado); border-radius: var(--r-3); transition: width .4s ease; }
/* ⚠️ SIN letra de máquina de escribir. Era el ÚNICO renglón del menú en
   JetBrains Mono —medido: hasta su vecino de al lado va en Plus Jakarta— y por
   eso «49% del cupo del mes» se leía como si fuera código y no como lo que es:
   una frase que dice cuánto le queda.
   Los números sí van de ancho fijo, para que la cifra no baile al cambiar. */
.medidor p {
  margin: 8px 0 0; font-size: 11.5px; color: var(--menu-txt-2);
  font-variant-numeric: tabular-nums;
}

/* ── el área de trabajo ── */
/* El velo del menú va SIEMPRE fuera del flujo: si no, ocupa una celda de la
   rejilla y parte el armazón en dos filas. */
#velo {
  position: fixed; inset: 0; z-index: 55; background: rgba(6,12,22,.5);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
#velo.viva { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { #velo { display: none; } }

#obra { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--piso); }
.barra {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--carta); border-bottom: 1px solid var(--borde-2);
}
.barra h1 { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icono-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-2);
  color: var(--txt-2); transition: background .15s ease, color .15s ease;
}
.icono-btn:hover { background: var(--carta-2); color: var(--txt); }
.icono-btn svg { width: 19px; height: 19px; }
#b-menu { display: none; }

/* ═══════════ EL HILO — su propio scroll ═══════════ */
#hilo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 20px 8px; scroll-behavior: smooth;
}
/* ═══════════ el ancho del chat ═══════════
   Luis: «no aprovecha los espacios de la pantalla… en pantalla grande deja los
   espacios en blanco». Cierto: estaba topado en 860px.

   Pero tampoco se puede estirar el texto de lado a lado — a partir de ~75
   caracteres por línea el ojo se pierde al saltar de renglón. La solución que
   usan los chats buenos: el TEXTO se queda legible, y lo que sí se aprovecha
   del ancho —tablas, código, imágenes, tarjetas— se sale por encima. */
.hilo-dentro {
  width: 100%;
  max-width: min(1180px, 100%);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 30px;
}
/* En pantallas muy grandes, un poco más de aire a los lados. */
@media (min-width: 1700px) { .hilo-dentro { max-width: 1460px; } }
/* 1.460 px sale de medir SU captura: columna 1.654 px con el texto en 1.445.
   Antes estaba en 1.320 y por eso el parrafo se plantaba en 1.278 px. */

/* EL TOPE QUE FALTABA. El comentario de arriba describe bien el diseño
   -el texto legible, y las tablas y el código saliéndose por encima- y hasta
   estaba escrita la salida de emergencia de abajo. Lo que nunca se puso fue el
   cerco del que esas cosas se escapan: sin él, `max-width: none` no hacía nada,
   porque `none` ya era el valor. Medido antes de esto: 106 caracteres por
   renglón en una ventana normal, contra los 75 que dice el comentario. */
.burbuja > p,
.burbuja > ul, .burbuja > ol,
.burbuja > h1, .burbuja > h2, .burbuja > h3,
.burbuja > blockquote { max-width: 60ch; }
/* ⚠️ 60ch, no 72ch: la unidad `ch` mide el «0», que en esta fuente es más
   ancho que el promedio. Medido en el navegador: 72ch daba 817 px = 97
   caracteres reales. 60ch da ~680 px = ~81, que es el tope cómodo para
   pantalla. Bajar hasta 75 exactos dejaría el párrafo en 632 px dentro de
   un hilo de 962 y volvería el reclamo del espacio en blanco. */

/* Lo que aprovecha el ancho completo, aunque el párrafo no. */
.burbuja .tabla-chat,
.burbuja pre,
.captura-nav,
.archivo-tarjeta { max-width: none; }
.msg { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.quien-msg {
  width: 30px; height: 30px; border-radius: var(--r-2); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--marino-alto);
  font-family: var(--mono); letter-spacing: -.02em;
}
/* ⚠️ La letra va oscura, no blanca: medido sobre el degradado de la marca,
   el blanco daba entre 1,80:1 y 3,97:1 — no pasaba en ningún punto. */
.msg.de-agente .quien-msg { background: var(--degradado); color: var(--sobre-degradado); }
.msg-cuerpo { min-width: 0; }
.msg-quien { font-size: 12.5px; font-weight: 700; color: var(--txt-2); margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
.msg-quien .etiqueta {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  background: var(--acento-piso); color: var(--acento-2); padding: 2px 6px; border-radius: 4px;
}
.burbuja {
  background: var(--carta); border: 1px solid var(--borde-2); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--sombra); overflow-wrap: anywhere;
}
.msg.de-mi .burbuja { background: var(--acento-piso); border-color: var(--acento-bord); }
.burbuja > :first-child { margin-top: 0; }
.burbuja > :last-child { margin-bottom: 0; }
.burbuja p { margin: 0 0 10px; }
.burbuja ul, .burbuja ol { margin: 0 0 10px; padding-left: 22px; }
.burbuja li { margin-bottom: 4px; }
.burbuja h1, .burbuja h2, .burbuja h3 { font-size: 1.03rem; margin: 16px 0 8px; }
.burbuja code {
  font-family: var(--mono); font-size: .87em;
  background: var(--carta-2); padding: .12em .36em; border-radius: 4px;
}
.burbuja pre {
  position: relative; background: var(--marino); color: #E3E9F2;
  border-radius: var(--r-2); padding: 14px 16px; overflow-x: auto; margin: 0 0 12px;
}
.burbuja pre code { background: none; padding: 0; font-size: 13px; line-height: 1.55; }
.burbuja table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 12px; }
.burbuja th, .burbuja td { border: 1px solid var(--borde-2); padding: 7px 10px; text-align: left; }
.burbuja th { background: var(--carta-2); font-size: 12.5px; }
.msg-acciones { display: flex; gap: 4px; margin-top: 7px; opacity: 0; transition: opacity .15s ease; }
.msg:hover .msg-acciones, .msg:focus-within .msg-acciones { opacity: 1; }
.msg-accion {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; border-radius: 6px; padding: 4px 8px;
  font-size: 12px; color: var(--txt-3); min-height: 30px;
}
.msg-accion:hover { background: var(--carta-2); color: var(--txt-2); }
.msg-accion svg { width: 13px; height: 13px; }

/* actividad del agente: lista que se abre y se cierra */
.haciendo { margin: 0 0 10px; }
.haciendo summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--txt-2); background: var(--carta-2);
  border: 1px solid var(--borde-2); border-radius: var(--r-3); padding: 5px 12px;
  font-family: var(--mono);
}
.haciendo summary::-webkit-details-marker { display: none; }
.haciendo summary::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--acento); flex: none;
}
.haciendo[open] summary { border-radius: var(--r-2) var(--r-2) 0 0; }
.haciendo-lista {
  border: 1px solid var(--borde-2); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2);
  background: var(--carta); padding: 8px 12px; font-size: 12.5px; font-family: var(--mono); color: var(--txt-2);
}
.haciendo-lista div { padding: 3px 0; display: flex; gap: 9px; }
.haciendo-lista b { color: var(--txt); font-weight: 600; }
/* El razonamiento del agente, cuando el motor lo manda. NO es una fila de dos
   columnas como los pasos: es un párrafo, y como tal necesita ancho completo y
   los renglones respetados. Sin esto hereda el `display:flex` de arriba y se
   aplasta en una línea ilegible. */
/* El razonamiento del agente. NO es una fila de dos columnas como los pasos:
   es un párrafo corrido y necesita ancho completo y sus renglones respetados.
   Sin `display:block` hereda el flex de arriba y sale una palabra por renglón. */
.haciendo-lista .razono {
  display: block; white-space: pre-wrap; line-height: 1.6;
  padding: 4px 0; margin: 6px 0 2px; color: var(--txt-3);
  font-family: var(--mono); font-size: 12px;
}
/* Mientras llega, un puntico que respira para que se note que sigue pensando. */
.haciendo-lista .razono-vivo::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px;
  border-radius: 50%; background: var(--acento); vertical-align: baseline;
  animation: latir 1.2s infinite;
}
.pensando { display: inline-flex; gap: 4px; padding: 4px 0; }
.pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); animation: latir 1.2s infinite; }
.pensando i:nth-child(2) { animation-delay: .18s; }
.pensando i:nth-child(3) { animation-delay: .36s; }
@keyframes latir { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* archivos que produjo */
.adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adjunto {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r-2);
  padding: 8px 12px; font-size: 13px; min-height: 40px;
}
.adjunto svg { width: 16px; height: 16px; color: var(--acento); flex: none; }

/* ir al final */
#b-abajo {
  /* MEDIDO: con bottom:16px el boton caia ENCIMA del texto. El hilo se ve de
     y=63 a y=872 y el boton quedaba en 816-856, tapando el renglon «Opcion B:
     le preparo el informe completo…». Se saca del hilo por completo: se pone
     en la ranura de la caja de escribir, que para eso se le agrandan 20 px de
     margen arriba. Cuesta 20 px de alto y a cambio no tapa nada, a ningun ancho. */
  position: absolute; left: 50%; bottom: -42px; transform: translateX(-50%) translateY(8px);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--carta); color: var(--txt); border: 1px solid var(--borde);
  border-radius: var(--r-3); padding: 8px 15px; font-size: 13px; font-weight: 600;
  box-shadow: var(--sombra-2); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 5; min-height: 40px;
}
#b-abajo.viva { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#b-abajo svg { width: 15px; height: 15px; }
.hilo-envoltura { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ═══════════ COMPOSITOR ═══════════ */
#compositor { flex: none; padding: 30px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--piso); }
.comp-dentro {
  /* Del MISMO ancho que la conversacion. Antes 860 px fijos contra un
     hilo de 1.460: la caja se veia metida y chiquita en el medio. */
  max-width: min(1180px, 100%); margin: 0 auto;
  background: var(--carta); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra); transition: border-color .15s ease, box-shadow .15s ease;
}
.comp-dentro:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-piso); }
#previos { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px 0; }
#previos:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: var(--r-3);
  padding: 5px 11px; font-size: 12.5px; color: var(--txt-2); max-width: 260px;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { background: none; border: 0; color: var(--txt-3); padding: 0 0 0 2px; line-height: 1; font-size: 15px; }
.chip button:hover { color: var(--mal); }
#entrada {
  width: 100%; border: 0; background: none; resize: none;
  padding: 13px 14px 4px; font-size: 15.5px; line-height: 1.55;
  max-height: 40dvh; overflow-y: auto;
}
#entrada:focus { outline: none; }
.comp-pie { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 10px; }
.comp-pie .crece { flex: 1; }
.comp-ayuda { font-size: 11.5px; color: var(--txt-3); font-family: var(--mono); padding-right: 6px; }
#b-voz.grabando { background: var(--mal); color: var(--sobre-fuerte); }
#b-voz.grabando svg { animation: pulso 1.1s infinite; }
@keyframes pulso { 50% { opacity: .45; } }

/* grabando */
.grabador {
  display: none; align-items: center; gap: 12px; padding: 10px 14px;
  border-top: 1px solid var(--borde-2); background: var(--mal-piso);
}
.grabador.viva { display: flex; }
.onda { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; }
.onda i { flex: 1; background: var(--mal); border-radius: 2px; height: 12%; transition: height .09s linear; }
.grabador time { font-family: var(--mono); font-size: 13px; color: var(--mal); font-variant-numeric: tabular-nums; }

/* ═══════════ PANEL DERECHO ═══════════ */
#panel { display: none; flex-direction: column; background: var(--carta); border-left: 1px solid var(--borde); min-height: 0; }
#app.con-panel #panel { display: flex; }
.panel-cabeza { flex: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--borde-2); }
#panel-titulo { font-size: 14px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
#panel-cuerpo img { max-width: 100%; border-radius: var(--r-2); border: 1px solid var(--borde-2); }
#panel-cuerpo iframe { width: 100%; height: 100%; min-height: 460px; border: 1px solid var(--borde-2); border-radius: var(--r-2); background: #fff; }

/* ═══════════ VISTAS (paneles de administración) ═══════════ */
.vista { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 26px 24px 44px; }
.vista.viva { display: block; }
.vista-dentro { max-width: 1180px; margin: 0 auto; }
.vista h2 { font-size: 1.5rem; }
.vista .sub { color: var(--txt-2); margin: 7px 0 24px; }
.tarjeta { background: var(--carta); border: 1px solid var(--borde-2); border-radius: var(--r); box-shadow: var(--sombra); padding: 20px; margin-bottom: 18px; }
.tarjeta h3 { font-size: 1.02rem; margin-bottom: 4px; }
.tarjeta .sub { margin: 4px 0 16px; font-size: 13.5px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--carta); border: 1px solid var(--borde-2); border-radius: var(--r); padding: 15px 17px; box-shadow: var(--sombra); }
.kpi dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--txt-3); }
.kpi dd { margin: 6px 0 0; font-size: 1.68rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi dd small { display: block; font-size: .74rem; font-weight: 500; color: var(--txt-2); letter-spacing: 0; margin-top: 2px; }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: var(--r); padding: 13px 15px; margin-bottom: 16px; }
.filtros .campo { margin: 0; min-width: 172px; flex: 1 1 172px; }
.filtros .campo input, .filtros .campo select { background: var(--carta); }

.marco { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r); background: var(--carta); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 11px 15px; white-space: nowrap; position: sticky; top: 0;
  background: var(--carta-2); border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--txt-2); font-weight: 700;
}
th[data-orden] { cursor: pointer; user-select: none; }
th[data-orden]:hover { color: var(--txt); }
th[data-orden]::after { content: "↕"; opacity: .3; margin-left: 5px; }
th[data-orden].asc::after { content: "↑"; opacity: 1; }
th[data-orden].desc::after { content: "↓"; opacity: 1; }
td { padding: 12px 15px; border-bottom: 1px solid var(--borde-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--carta-2); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
td .sec { display: block; color: var(--txt-3); font-size: 12px; font-family: var(--mono); }

/* ⚠️ Lo mismo, pero SIN letra de máquina de escribir.
   `.sec` va en mono a propósito donde el dato es técnico —un slug, un código
   de respaldo, una fecha, una cifra que se alinea en columna—. Pero también
   carga los CORREOS, y un correo no es código: se lee como una dirección que
   una persona escribió. Va con la letra de la interfaz, como el nombre que
   tiene encima. */
td .sec.texto { font-family: inherit; font-size: 12.5px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-3);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .03em;
  background: var(--carta-2); color: var(--txt-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.activa, .pill.bien { background: var(--bien-piso); color: var(--bien); }
.pill.demo { background: var(--acento-piso); color: var(--acento-2); }
.pill.suspendida { background: var(--ojo-piso); color: var(--ojo); }
.pill.baja, .pill.mal { background: var(--mal-piso); color: var(--mal); }

.rejilla2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; align-items: end; }
.ok { background: var(--bien-piso); color: var(--bien); border-radius: var(--r-2); padding: 11px 14px; margin-top: 13px; font-size: 14px; }
.error { background: var(--mal-piso); color: var(--mal); border-radius: var(--r-2); padding: 11px 14px; margin-top: 13px; font-size: 14px; }
#err-entrar { display: none; }
#err-entrar.viva { display: block; }

/* vacío / cargando */
.vacio { text-align: center; padding: 54px 20px; color: var(--txt-2); }
.vacio-icono { width: 46px; height: 46px; margin: 0 auto 14px; color: var(--txt-3); }
.vacio h3 { font-size: 1.05rem; color: var(--txt); margin-bottom: 6px; }
.vacio p { margin: 0 auto; max-width: 42ch; font-size: 14px; }
.esqueleto { background: linear-gradient(90deg, var(--carta-2) 25%, var(--carta-3) 37%, var(--carta-2) 63%); background-size: 400% 100%; animation: brillo 1.3s infinite; border-radius: 6px; height: 14px; }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ═══════════ CELULAR ═══════════ */
@media (max-width: 900px) {
  #app, #app.con-panel { grid-template-columns: 1fr; }
  #b-menu { display: grid; }
  #aside {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 60;
    transform: translateX(-100%); transition: transform .24s ease;
    padding-top: env(safe-area-inset-top);
  }
  #aside.abierta { transform: none; box-shadow: var(--sombra-2); }
  #panel { position: fixed; inset: 0; z-index: 70; border-left: 0; padding-top: env(safe-area-inset-top); }
  #hilo { padding: 18px 14px 8px; }
  /* Los mismos 30 px de arriba que en el escritorio: es donde vive el boton
     «Ir al final». Con los 8 px de antes el boton se montaba sobre el texto y
     sobre la caja a la vez -medido en un celular de 390: boton 714-758, hilo
     hasta 716, caja desde 724-. */
  #compositor { padding: 30px 12px calc(12px + env(safe-area-inset-bottom)); }
  /* En el celular el boton mide 44 px de alto -el minimo para el dedo- y no
     los 40 del escritorio: con -42 se metia 2 px en el hilo. */
  #b-abajo { bottom: -46px; }
  .vista { padding: 18px 14px 40px; }
  .comp-ayuda { display: none; }
  #entrar { grid-template-columns: 1fr; }
  .entrar-obra { padding: 26px 22px; min-height: 216px; }
  .entrar-frase h1 { font-size: 1.72rem; }
  .entrar-frase p, .entrar-pie { display: none; }
  .entrar-caja { padding: 24px 20px 40px; align-items: start; }

  /* Con el dedo, nada por debajo de 44px — lo pide la lista de ui-ux-pro-max. */
  .icono-btn { width: 44px; height: 44px; }
  .aside-btn, .conv, .msg-accion, .chip, .adjunto,
  .btn-chico, #b-abajo, .conv-mas, .copiar-codigo,
  .menu-flotante button { min-height: 44px; }
  .conv-mas { width: 44px; opacity: 1; }   /* con el dedo no hay hover */
  .msg-acciones { opacity: 1; }          /* en celular no hay hover: siempre visibles */
  .msg-accion { padding: 6px 11px; }
}
@media (max-width: 420px) { .kpis { grid-template-columns: 1fr 1fr; } }

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

/* ═══════════ lista de conversaciones ═══════════ */
.aside-buscar {
  position: relative; margin: 0 14px 6px;
  display: flex; align-items: center;
}
.aside-buscar svg {
  position: absolute; left: 11px; width: 15px; height: 15px; color: var(--menu-txt-2); pointer-events: none;
}
.aside-buscar input {
  width: 100%; background: var(--menu-2); color: var(--menu-txt);
  border: 1px solid var(--menu-borde); border-radius: var(--r-2);
  padding: 9px 11px 9px 33px; font-size: 13.5px; min-height: 40px;
  transition: border-color .15s ease;
}
.aside-buscar input::placeholder { color: var(--menu-txt-2); }
.aside-buscar input:focus { outline: none; border-color: var(--turquesa); }
.aside-buscar input::-webkit-search-cancel-button { filter: invert(.6); }

.conv-fila { display: flex; align-items: center; border-radius: var(--r-2); }
.conv-fila:hover { background: var(--menu-2); }
.conv-fila.viva { background: var(--menu-3); }
.conv-fila.viva .conv { color: #fff; font-weight: 600; }
.conv-fila .conv { background: none; }
.conv-fila .conv:hover { background: none; }
.conv-pin {
  width: 17px; height: 17px; flex: none; display: grid; place-items: center;
}
.conv-pin::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--turquesa); }
.conv-mas {
  flex: none; width: 30px; height: 34px; background: none; border: 0; border-radius: var(--r-2);
  color: var(--menu-txt-2); font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s ease;
}
.conv-fila:hover .conv-mas, .conv-fila:focus-within .conv-mas { opacity: 1; }
.conv-mas:hover { background: var(--menu-3); color: #fff; }

/* menú flotante — z-index por escala: 10 paneles · 20 flotantes · 50 velo · 60 menú · 100 entrada */
.menu-flotante {
  position: fixed; z-index: 80; min-width: 190px;
  background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-2); padding: 5px; display: grid; gap: 1px;
}
.menu-flotante button {
  text-align: left; background: none; border: 0; border-radius: 6px;
  padding: 9px 12px; font-size: 14px; color: var(--txt); min-height: 40px;
}
.menu-flotante button:hover { background: var(--carta-2); }
.menu-flotante button.peligro { color: var(--mal); }
.menu-flotante button.peligro:hover { background: var(--mal-piso); }

/* copiar un bloque de código */
.burbuja pre { padding-top: 34px; }
.copiar-codigo {
  position: absolute; top: 7px; right: 8px;
  background: rgba(255,255,255,.12); color: #E3E9F2; border: 0; border-radius: 6px;
  padding: 4px 10px; font-size: 11.5px; font-family: var(--mono); min-height: 28px;
  opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.burbuja pre:hover .copiar-codigo, .copiar-codigo:focus-visible { opacity: 1; }
.copiar-codigo:hover { background: rgba(255,255,255,.22); }
@media (max-width: 900px) { .copiar-codigo { opacity: 1; min-height: 36px; } }

/* ═══════════ avisos ═══════════ */
#b-campana { position: relative; }
.insignia {
  position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: var(--r-3);
  background: var(--mal); color: var(--sobre-fuerte);
  font: 700 10.5px/17px var(--mono); text-align: center;
  white-space: nowrap;            /* una insignia nunca parte en dos líneas */
  border: 2px solid var(--carta);
}

#bandeja {
  position: fixed; top: 58px; right: 14px; z-index: 90;
  width: min(380px, calc(100vw - 28px)); max-height: min(560px, calc(100dvh - 80px));
  background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-2); display: flex; flex-direction: column; overflow: hidden;
}
.bandeja-cabeza {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 11px 10px 11px 16px; border-bottom: 1px solid var(--borde-2);
}
.bandeja-cabeza strong { flex: 1; font-size: 14.5px; }
#bandeja-cuerpo { flex: 1; min-height: 0; overflow-y: auto; }
.aviso {
  display: grid; grid-template-columns: 8px 1fr; gap: 11px;
  padding: 13px 16px; border-bottom: 1px solid var(--borde-2); cursor: pointer;
  transition: background .15s ease;
}
.aviso:hover { background: var(--carta-2); }
.aviso:last-child { border-bottom: 0; }
.aviso .marca { width: 8px; height: 8px; border-radius: 2px; margin-top: 6px; background: var(--txt-3); }
.aviso.tarea .marca { background: var(--acento); }
.aviso.tope  .marca { background: var(--ojo); }
.aviso.falla .marca { background: var(--mal); }
.aviso.visto .marca { background: var(--borde); }
.aviso.visto b { font-weight: 500; color: var(--txt-2); }
.aviso b { display: block; font-size: 14px; margin-bottom: 2px; }
.aviso p { margin: 0; font-size: 13px; color: var(--txt-2); }
.aviso time { font-size: 11.5px; color: var(--txt-3); font-family: var(--mono); }

.prefs { padding: 14px 16px; border-top: 1px solid var(--borde-2); background: var(--carta-2); }
.prefs label {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  font-size: 14px; min-height: 40px; cursor: pointer;
}
.prefs input { width: 18px; height: 18px; accent-color: var(--acento); }
.prefs .pista { font-size: 12.5px; color: var(--txt-3); margin: 4px 0 0; }

/* mensajitos que se van solos */
#mensajitos {
  position: fixed; z-index: 95; bottom: calc(18px + env(safe-area-inset-bottom)); right: 18px;
  display: flex; flex-direction: column; gap: 9px; pointer-events: none;
}
.mensajito {
  display: flex; align-items: start; gap: 10px; max-width: 340px;
  background: var(--carta); border: 1px solid var(--borde); border-left: 0;
  border-radius: var(--r); box-shadow: var(--sombra-2); padding: 12px 15px;
  pointer-events: auto; animation: entra .22s ease;
}
.mensajito .marca { width: 8px; height: 8px; border-radius: 2px; margin-top: 6px; flex: none; background: var(--acento); }
.mensajito b { display: block; font-size: 13.5px; }
/* la confirmación de «ya quedó» se distingue del aviso del agente */
.mensajito.ok .marca { background: var(--bien); }
.mensajito.mal .marca { background: var(--mal); }
.mensajito p { margin: 2px 0 0; font-size: 12.5px; color: var(--txt-2); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) {
  #mensajitos { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mensajito { max-width: none; }
  #bandeja { top: 56px; right: 8px; left: 8px; width: auto; }
}

/* ═══════════ la marca de la empresa ═══════════ */
.marca-rejilla { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
@media (max-width: 900px) { .marca-rejilla { grid-template-columns: 1fr; } }
.campo-titulo { display: block; font-size: 12.5px; font-weight: 700; color: var(--txt-2); margin-bottom: 7px; }

.logo-zona { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-zona img {
  height: 44px; max-width: 170px; object-fit: contain;
  background: var(--marino); border-radius: var(--r-2); padding: 7px 11px;
}
.logo-zona > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.color {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: var(--r-2);
  padding: 9px 11px; min-height: 52px;
}
.color input[type=color] {
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--borde);
  border-radius: 6px; background: none; cursor: pointer; flex: none;
}
.color span { font-size: 12.5px; color: var(--txt-2); line-height: 1.4; }
.color code { font-family: var(--mono); font-size: 11px; color: var(--txt-3); background: none; padding: 0; }

/* Así lo van a ver: una maqueta chiquita que se mueve con los controles */
.previa {
  --p-menu: #0E1B30; --p-acento: #0D8E80; --p-turquesa: #00D9C0; --p-azul: #2F7BF6;
  display: grid; grid-template-columns: 104px 1fr; height: 216px;
  border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; background: var(--carta);
}
.previa-menu { background: var(--p-menu); padding: 11px 9px; display: flex; flex-direction: column; gap: 9px; }
.previa-menu img { height: 17px; max-width: 100%; object-fit: contain; object-position: left; }
.previa-btn {
  background: var(--p-acento); color: #fff; border-radius: 5px;
  font-size: 8.5px; font-weight: 700; padding: 6px 7px; text-align: center;
}
.previa-linea { height: 7px; background: rgba(255,255,255,.13); border-radius: 3px; }
.previa-linea.corta { width: 62%; }
.previa-obra { padding: 14px; display: flex; flex-direction: column; gap: 7px; background: var(--piso); }
.previa-obra b { font-size: 12.5px; }
.previa-obra p { margin: 0; font-size: 11px; color: var(--txt-2); }
.previa-burbuja { height: 13px; background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: 5px; }
.previa-burbuja.corta { width: 58%; }
.previa-enviar {
  margin-top: auto; align-self: flex-end; background: var(--p-acento); color: #fff;
  border-radius: 5px; font-size: 9px; font-weight: 700; padding: 6px 11px;
}
.previa-obra::after {
  content: ""; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--p-azul), var(--p-turquesa));
}

/* ═══════════ panel: pestañas, barras, gráfica, modal ═══════════ */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; overflow-x: auto; }
.pestanas button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 15px; font-size: 14.5px; font-weight: 600; color: var(--txt-2);
  white-space: nowrap; min-height: 44px; transition: color .15s ease, border-color .15s ease;
}
.pestanas button:hover { color: var(--txt); }
.pestanas button.viva { color: var(--acento); border-bottom-color: var(--acento); }

/* barra con su cifra: el color acompaña, la cifra informa */
.bala { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.bala-riel { flex: 1; height: 7px; background: var(--carta-3); border-radius: var(--r-3); overflow: hidden; }
.bala-riel i { display: block; height: 100%; border-radius: var(--r-3); transition: width .4s ease; }
.bala-riel i.bien { background: var(--bien); }
.bala-riel i.ojo  { background: var(--ojo); }
.bala-riel i.mal  { background: var(--mal); }
.bala-cifra { font-family: var(--mono); font-size: 12px; color: var(--txt-2); min-width: 34px; text-align: right; }

/* gráfica de barras, hecha a mano */
.grafica { display: flex; align-items: flex-end; gap: 3px; height: 172px; padding: 8px 0 0; overflow-x: auto; }
.g-col { flex: 1; min-width: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.g-col i {
  width: 100%; max-width: 26px; background: var(--degradado); border-radius: 3px 3px 0 0;
  margin-top: auto; transition: opacity .15s ease;
}
.g-col:hover i { opacity: .78; }
.g-col span { font-family: var(--mono); font-size: 9.5px; color: var(--txt-3); white-space: nowrap; }

.registro {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--txt-2);
  background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: var(--r-2);
  padding: 12px 14px; overflow-x: auto; margin: 0; white-space: pre-wrap; word-break: break-word;
}

/* ventana modal */
.modal {
  position: fixed; inset: 0; z-index: 92; background: rgba(6,12,22,.55);
  display: grid; place-items: center; padding: 18px; animation: entra .18s ease;
}
.modal-caja {
  width: min(620px, 100%); max-height: min(86dvh, 760px);
  background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-2); display: flex; flex-direction: column; overflow: hidden;
}
.modal-cabeza { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 18px; border-bottom: 1px solid var(--borde-2); }
.modal-cabeza strong { flex: 1; font-size: 15.5px; }
.modal-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
.modal-pie { flex: none; display: flex; gap: 9px; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--borde-2); background: var(--carta-2); }
@media (max-width: 640px) {
  .modal { padding: 0; align-items: end; }
  .modal-caja { width: 100%; max-height: 92dvh; border-radius: var(--r) var(--r) 0 0; }
  .modal-pie { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
}

/* zona de lo irreversible: se ve distinta a propósito */
.zona-riesgo {
  margin-top: 22px; padding: 15px 17px;
  background: var(--mal-piso); border: 1px solid var(--mal); border-radius: var(--r);
}
.zona-riesgo h4 { margin: 0 0 4px; font-size: 14px; color: var(--mal); }
.zona-riesgo p { margin: 0 0 12px; font-size: 13px; color: var(--txt-2); }
.zona-botones { display: flex; flex-wrap: wrap; gap: 9px; }

/* ═══════════ cuenta de cobro ═══════════ */
.modal-ancho { width: min(820px, 100%); }
.aviso-ojo {
  background: var(--ojo-piso); border: 1px solid var(--ojo); border-radius: var(--r);
  padding: 12px 15px; font-size: 13.5px; margin-bottom: 18px; color: var(--txt);
}
.aviso-ojo b { color: var(--ojo); }

.cobro { background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r); padding: 26px 28px; }
.cobro-cabeza { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 2px solid var(--txt); }
.cobro-rotulo { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); }
.cobro-cabeza h1 { font-size: 1.42rem; margin: 5px 0 3px; font-family: var(--mono); letter-spacing: -.01em; }
.cobro-fecha { margin: 0; font-size: 13px; color: var(--txt-2); }
.cobro-quien { text-align: right; font-size: 13px; color: var(--txt-2); display: flex; flex-direction: column; gap: 1px; }
.cobro-quien b { font-size: 15px; color: var(--txt); }

.cobro-a { padding: 20px 0; border-bottom: 1px solid var(--borde-2); }
.cobro-a h2 { font-size: 2.1rem; letter-spacing: -.03em; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.cobro-cliente { margin: 0; font-size: 14px; color: var(--txt-2); }

.cobro-tabla { width: 100%; border-collapse: collapse; margin: 18px 0 0; font-size: 13.5px; }
.cobro-tabla th {
  position: static; background: none; border-bottom: 1px solid var(--borde);
  padding: 8px 10px; text-align: left;
}
.cobro-tabla th:not(:first-child), .cobro-tabla td.num { text-align: right; }
.cobro-tabla td { padding: 11px 10px; border-bottom: 1px solid var(--borde-2); vertical-align: top; }
.cobro-tabla td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cobro-tabla tfoot td { border-bottom: 0; padding: 6px 10px; color: var(--txt-2); text-align: right; }
.cobro-tabla tfoot .cobro-total td { border-top: 2px solid var(--txt); padding-top: 11px; font-weight: 800; font-size: 15px; color: var(--txt); }
.cobro-consumo, .cobro-banco { font-size: 12.5px; color: var(--txt-2); margin: 14px 0 0; }
.cobro-firma { margin-top: 40px; }
.cobro-firma span { display: block; width: 230px; border-top: 1px solid var(--txt); }
.cobro-firma p { margin: 6px 0 0; font-size: 13px; color: var(--txt-2); }

.cobro-precios { margin-top: 18px; border: 1px solid var(--borde-2); border-radius: var(--r); padding: 13px 16px; background: var(--carta-2); }
.cobro-precios summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 32px; }

/* al imprimir sale SOLO la hoja */
@media print {
  body.imprimiendo > *:not(.modal) { display: none !important; }
  body.imprimiendo .modal { position: static; background: none; padding: 0; display: block; }
  body.imprimiendo .modal-caja { box-shadow: none; border: 0; max-height: none; width: 100%; }
  body.imprimiendo .modal-cabeza, body.imprimiendo .modal-pie,
  body.imprimiendo .cobro-precios, body.imprimiendo .aviso-ojo { display: none !important; }
  body.imprimiendo .modal-cuerpo { overflow: visible; padding: 0; }
  body.imprimiendo .cobro { border: 0; padding: 0; }
  @page { margin: 18mm; }
}
.cobro-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.cobro-periodo > span { font-size: 13px; color: var(--txt-2); font-weight: 600; }
.cobro-periodo button { text-transform: capitalize; }
@media print { body.imprimiendo .cobro-periodo { display: none !important; } }

/* atajos de teclado */
.atajos { margin: 0; display: grid; gap: 2px; }
.atajos > div { display: flex; align-items: center; gap: 14px; padding: 9px 2px; border-bottom: 1px solid var(--borde-2); }
.atajos > div:last-child { border-bottom: 0; }
.atajos dt { flex: none; min-width: 148px; display: flex; gap: 4px; align-items: center; }
.atajos dd { margin: 0; font-size: 13.5px; color: var(--txt-2); }
kbd {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  background: var(--carta-2); border: 1px solid var(--borde); border-bottom-width: 2px;
  border-radius: 5px; padding: 3px 7px; color: var(--txt); white-space: nowrap;
}

/* ═══════════ mi cuenta y doble factor ═══════════ */
.bloque-titulo { font-size: 14.5px; margin: 0 0 12px; }
.estado-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.codigo-grande {
  font-family: var(--mono); font-size: 20px; letter-spacing: .22em; text-align: center;
}
.pasos { margin: 0; padding-left: 20px; display: grid; gap: 14px; font-size: 14px; }
.pasos li { padding-left: 4px; }
.qr-zona { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.qr-zona img { border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; padding: 6px; }
.secreto {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; line-height: 1.7;
  background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: var(--r-2);
  padding: 9px 12px; display: inline-block; word-break: break-all; max-width: 210px;
}
.respaldos { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; margin-top: 11px; }
.respaldos code {
  font-family: var(--mono); font-size: 12.5px; background: var(--carta);
  border: 1px solid var(--borde); border-radius: 6px; padding: 7px 9px; text-align: center;
}

/* qué puede hacer el agente */
.capacidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.capacidad {
  display: flex; align-items: center; gap: 11px; cursor: pointer; min-height: 52px;
  background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: var(--r-2); padding: 10px 13px;
}
.capacidad:hover { border-color: var(--borde); }
.capacidad input { width: 18px; height: 18px; accent-color: var(--acento); flex: none; }
.capacidad b { display: block; font-size: 14px; font-weight: 600; }
.capacidad small { color: var(--txt-3); font-family: var(--mono); font-size: 11px; }
.nunca { margin-top: 20px; padding: 15px 17px; background: var(--carta-2); border: 1px solid var(--borde); border-radius: var(--r); }
.nunca h4 { margin: 0 0 5px; font-size: 14px; }
.nunca > p { margin: 0 0 10px; font-size: 13px; color: var(--txt-2); max-width: none; }
.nunca .limpia { margin: 0; }
.nunca .limpia li { font-size: 13.5px; margin-bottom: 7px; }
.nunca .limpia li::before { background: var(--mal); }

/* ═══════════ red de seguridad de los íconos ═══════════
   Cualquier SVG que no tenga medida propia se queda en 18px en vez de
   estirarse. Pasó una vez con el ícono del chat y se vio gigante. */
svg:not([width]):not([height]) { width: 18px; height: 18px; flex: none; }
.vacio-icono { width: 46px !important; height: 46px !important; }

/* ═══════════ la bienvenida del primer día ═══════════ */
.bv-lead { font-size: 15px; color: var(--txt-2); margin: 0; max-width: none; }
.bv-lead b { color: var(--txt); }
.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 9px; }
.idea {
  text-align: left; background: var(--carta-2); border: 1px solid var(--borde-2);
  border-radius: var(--r); padding: 13px 15px; min-height: 44px;
  transition: border-color .15s ease, background .15s ease;
}
.idea:hover { background: var(--carta); border-color: var(--acento-bord); }
.idea b { display: block; font-size: 14px; margin-bottom: 3px; }
.idea span { font-size: 12.5px; color: var(--txt-2); line-height: 1.5; }
.bv-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--borde-2); }
.bv-tres b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.bv-tres p { margin: 0; font-size: 12.5px; color: var(--txt-2); max-width: none; }

/* ═══════════ el teclado del celular ═══════════
   El teclado no encoge la ventana: se le monta encima. Se le resta al alto
   del armazón para que la caja de escribir nunca quede debajo. */
:root { --teclado: 0px; }
@media (max-width: 900px) {
  #app { height: calc(100dvh - var(--teclado)); }
  body.con-teclado #compositor { padding-bottom: 10px; }   /* sin el borde del iPhone, que ya no aplica */
  body.con-teclado .aside-pie { display: none; }           /* estorba con el teclado abierto */
}

/* ═══════════ la línea del consumo ═══════════ */
.linea { width: 100%; height: 150px; margin-top: 6px; overflow: visible; }
.linea-area { fill: var(--acento-piso); stroke: none; }
.linea-trazo { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
               vector-effect: non-scaling-stroke; }
.linea-punta { fill: var(--acento); stroke: var(--carta); stroke-width: 2; }
.linea-pie { display: flex; justify-content: space-between; align-items: baseline;
             font-family: var(--mono); font-size: 11.5px; color: var(--txt-3); margin-top: 4px; }
.linea-pie b { color: var(--txt); font-size: 13px; }

/* ═══════════ la bóveda ═══════════ */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 74px; font-family: var(--mono); letter-spacing: .06em; }
.ver-clave {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: var(--carta-2); border: 1px solid var(--borde); border-radius: 6px;
  padding: 6px 11px; font-size: 12.5px; color: var(--txt-2); min-height: 34px;
}
.ver-clave:hover { background: var(--carta-3); color: var(--txt); }
#bv-error:not(:empty) { color: var(--mal); font-weight: 600; }

/* ═══════════ red de seguridad de las imágenes ═══════════
   Una imagen dentro de un contenedor flex en columna se estira a todo el
   ancho si nadie lo impide, y sale deformada. Aquí no. */
img { max-width: 100%; }
.entrar-obra img, .aside-logo img, .logo-zona img, .previa-menu img { align-self: flex-start; object-fit: contain; }

/* ═══════════ los roles y sus permisos ═══════════ */
/* La caja va con FONDO LLENO y borde completo. Nada de rayita de acento a la
   izquierda: eso está prohibido en las aplicaciones de DGNOVA. */
.caja-rol {
  margin-top: 18px; padding: 16px; border-radius: var(--r-2);
  background: var(--carta-2); border: 1px solid var(--borde);
}
.caja-rol h4 {
  margin: 0 0 14px; font-size: 15.5px; font-weight: 650; color: var(--txt);
}
.rotulo-permisos {
  margin: 18px 0 9px; font: 600 11.5px/1 var(--mono);
  letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
}
.permisos {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
/* Cada permiso es una casilla grande: se puede tocar en cualquier parte del
   recuadro, no solo en el cuadrito. */
.permiso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-2); cursor: pointer;
  background: var(--carta); border: 1px solid var(--borde);
  transition: border-color .14s ease, background .14s ease;
}
.permiso:hover { border-color: var(--acento-bord); }
.permiso:has(input:checked) { background: var(--acento-piso); border-color: var(--acento-bord); }
.permiso:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.permiso:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.permiso input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--acento); }
.permiso b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.permiso small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--txt-2); line-height: 1.45; }

/* ⚠️ Va con DOS clases a propósito. Esta línea es un <span> hijo directo de
   `.campo`, y `.campo > span` (una clase + un elemento) le gana a `.linea-check`
   (una clase sola): le imponía `display: block` y el texto se partía debajo del
   cuadrito. Con `.campo > .linea-check` son dos clases y sí manda.
   Y hay que devolverle el peso y el color, que también los heredaba del rótulo. */
.linea-check, .campo > .linea-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 400; color: var(--txt); margin-bottom: 0;
}
.linea-check input { width: 18px; height: 18px; flex: none; accent-color: var(--acento); }
.linea-check > span { flex: 1; line-height: 1.35; }

.fila-botones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* ═══════════ qué está mirando el agente ═══════════ */
.mirando { align-items: baseline; }
.mirando a {
  font-family: var(--mono); font-size: 12px; color: var(--enlace);
  overflow-wrap: anywhere;            /* una dirección larga no rompe la caja */
  text-decoration: underline; text-underline-offset: 2px;
}
.mirando a:hover { color: var(--acento-2); }

/* La captura de la página. `max-width: 100%` y `height: auto` para que baje
   sola con el ancho — la pauta de imágenes lo pide y acá llegan capturas de
   1280px de ancho. */
.captura-nav {
  margin: 10px 0 4px; padding: 0;
  border: 1px solid var(--borde); border-radius: var(--r-2);
  background: var(--carta-2); overflow: hidden;
}
.captura-nav img {
  display: block; width: 100%; max-width: 100%; height: auto;
  max-height: 460px; object-fit: cover; object-position: top center;
}
.captura-nav figcaption {
  padding: 8px 12px; font-size: 12.5px; color: var(--txt-2);
  border-top: 1px solid var(--borde);
}
@media (max-width: 900px) { .captura-nav img { max-height: 320px; } }

/* ═══════════ a qué sitios puede entrar el agente ═══════════ */
.sitios-modos { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.sitios-modos .permiso input { border-radius: 50%; }
#sitios-lista {
  font-family: var(--mono); font-size: 13px; line-height: 1.6; resize: vertical;
}

/* ═══════════ cuando el agente pide permiso ═══════════ */
/* Bloque de fondo lleno con borde completo. NADA de rayita de acento a la
   izquierda: eso está prohibido en las aplicaciones de DGNOVA. El punto de
   color hace el trabajo de llamar la atención sin la rayita. */
.permiso-agente {
  margin: 12px 0; padding: 15px 16px; border-radius: var(--r-2);
  background: var(--ojo-piso); border: 1px solid var(--ojo-bord, var(--borde));
}
.permiso-cabeza { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.permiso-cabeza b { font-size: 14.5px; color: var(--ojo); }
.punto-ojo { width: 7px; height: 7px; border-radius: 50%; background: var(--ojo); flex: none; }
.punto-ojo.malo { background: var(--mal); }
.permiso-que { margin: 0 0 7px; font-size: 13.5px; color: var(--txt-2); }
.permiso-detalle {
  /* ⚠️ Ojo con --r-3: son 999px, el redondeo de las PÍLDORAS. En una caja de
     varias líneas convierte el recuadro en un óvalo. Acá va --r-2. */
  margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-2);
  background: var(--carta); border: 1px solid var(--borde);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 190px; overflow-y: auto;
}
/* Negar tiene que ser tan facil como aceptar: boton con fondo, no un enlace. */
.btn-mal { background: var(--mal); color: var(--sobre-fuerte); border-color: var(--mal); }
.btn-mal:hover { filter: brightness(1.08); }

.permiso-rastro {
  display: flex; align-items: center; gap: 9px;
  margin: 10px 0; padding: 9px 13px; border-radius: var(--r-2);
  background: var(--carta-2); border: 1px solid var(--borde);
  font-size: 13px; color: var(--txt-2);
}

/* ═══════════ los cuatro planes listos ═══════════ */
.planes { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
/* Mismo recuadro tocable que los permisos: se marca desde cualquier punto. */
.plan {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; border-radius: var(--r-2); cursor: pointer;
  background: var(--carta); border: 1px solid var(--borde);
  transition: border-color .14s ease, background .14s ease;
}
.plan:hover { border-color: var(--acento-bord); }
.plan:has(input:checked) { background: var(--acento-piso); border-color: var(--acento-bord); }
.plan:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.plan input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--acento); }
.plan-cuerpo { display: block; }
.plan b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.plan small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--txt-2); line-height: 1.45; }
.plan .plan-quien { color: var(--txt-3); font-weight: 600; }

/* ═══════════ el correo de la plataforma ═══════════ */
.estado-correo {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 11px 14px; border-radius: var(--r-2);
  background: var(--ojo-piso); border: 1px solid var(--borde); font-size: 13.5px;
}
.estado-correo.bien { background: var(--bien-piso); }
/* ⚠️ NO usar 'ok' como modificador: .ok ya existe en la app como caja de
   mensaje CON RELLENO, y le inflaba este punto de 7px a 28px. */
.punto-ojo.bueno { background: var(--bien); }

/* ═══════════ hay una versión nueva ═══════════ */
/* Discreta y abajo: no tapa nada y no interrumpe a nadie a mitad de frase. */
.aviso-version {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 120;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 16px; border-radius: var(--r);
  background: var(--marino); color: #fff; font-size: 13.5px;
  box-shadow: var(--sombra-2); max-width: calc(100vw - 28px);
}
.aviso-version .btn { flex: none; }

/* ═══════════ la tarjeta de un archivo que hizo el agente ═══════════ */
.archivo-tarjeta {
  margin: 10px 0; border: 1px solid var(--borde); border-radius: var(--r-2);
  background: var(--carta); overflow: hidden; max-width: 460px;
}
/* Si es una imagen, se VE. Para eso la hizo. */
.archivo-vista {
  display: block; width: 100%; height: auto; max-height: 380px;
  object-fit: contain; background: var(--carta-2);
  border-bottom: 1px solid var(--borde);
}
/* ⚠️ `flex-wrap` SIEMPRE, no solo en celular: la tarjeta se angosta cuando se
   abre el panel de vista previa, aunque la ventana siga siendo ancha. Lo que
   manda es el ancho de la CAJA, no el de la pantalla. Se rompía feo. */
.archivo-fila {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; flex-wrap: wrap;
}
.archivo-tarjeta { container-type: inline-size; }
@container (max-width: 330px) {
  .archivo-botones { width: 100%; }
  .archivo-botones .btn { flex: 1; }
}
.archivo-icono { display: flex; flex: none; color: var(--txt-3); }
.archivo-datos { flex: 1; min-width: 0; }
.archivo-datos b {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.archivo-datos small { display: block; margin-top: 2px; font-size: 12px; color: var(--txt-2); }
.archivo-botones { display: flex; gap: 7px; flex: none; }


/* ═══════════ el menú lateral: aire arriba y se puede achicar ═══════════ */
:root { --aside-ancho: 268px; --aside-chico: 68px; }

/* El logo necesita aire: pegado al borde se ve apretado y no se lee la marca
   de la empresa, que es de lo que se trata todo esto. */
.aside-cabeza { padding: 18px 14px 14px; gap: 8px; }
.aside-logo img { height: 30px; max-width: 150px; }

/* Achicado: quedan solo los iconos. La conversación sigue viva al lado — esto
   es para ganar pantalla cuando se está leyendo algo largo, no para esconder.
   ⚠️ Va por `--menu-ancho`: el ancho lo pone la REJILLA de #app, no el #aside.
   Tocarle el `width` al aside no hacía absolutamente nada. */
#app.aside-chico { --menu-ancho: var(--aside-chico); }
#app.aside-chico .aside-lista,
#app.aside-chico .aside-titulillo,
#app.aside-chico #buscar-conv,
#app.aside-chico .medidor,
#app.aside-chico .aside-logo strong,
#app.aside-chico .aside-btn span,
#app.aside-chico #b-nueva span { display: none; }
#app.aside-chico .aside-logo img { max-width: 40px; }
#app.aside-chico .aside-zona { padding: 10px 12px; }
#app.aside-chico #b-nueva { padding: 0; justify-content: center; }
#app.aside-chico .aside-btn { justify-content: center; padding-left: 0; padding-right: 0; }
#app.aside-chico .aside-cabeza { flex-direction: column; gap: 10px; }
#b-colapsar svg { transition: transform .2s ease; }
#app.aside-chico #b-colapsar svg { transform: scaleX(-1); }

@media (max-width: 900px) { #b-colapsar { display: none; } }

/* ═══════════ el agente sigue trabajando en esto ═══════════ */
.sigue-trabajando {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0; padding: 13px 16px; border-radius: var(--r-2);
  background: var(--acento-piso); border: 1px solid var(--acento-bord);
}
.sigue-trabajando b { display: block; font-size: 14px; color: var(--acento-2); }
.sigue-trabajando small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--txt-2); }
.puntos-tres { display: flex; gap: 4px; flex: none; }
.puntos-tres i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acento);
  animation: latir 1.2s infinite ease-in-out;
}
.puntos-tres i:nth-child(2) { animation-delay: .18s; }
.puntos-tres i:nth-child(3) { animation-delay: .36s; }
@keyframes latir { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .puntos-tres i { animation: none; opacity: .7; } }

/* ═══════════ las tablas dentro del chat ═══════════ */
/* La caja de afuera es la que se desplaza: una tabla ancha no puede empujar
   toda la conversación de lado. */
.tabla-chat {
  margin: 14px 0; overflow-x: auto; border: 1px solid var(--borde);
  border-radius: var(--r-2); background: var(--carta);
}
.tabla-chat table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-chat th {
  padding: 10px 13px; text-align: left; white-space: nowrap;
  background: var(--carta-2); border-bottom: 1px solid var(--borde);
  font: 600 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--txt-2);
}
.tabla-chat td {
  padding: 10px 13px; border-bottom: 1px solid var(--borde);
  vertical-align: top; line-height: 1.45;
}
.tabla-chat tr:last-child td { border-bottom: 0; }
.tabla-chat tbody tr:nth-child(even) { background: var(--carta-2); }
/* Los números alineados a la derecha se leen de una; y con cifras del mismo
   ancho las columnas de plata quedan cuadradas. */
.tabla-chat td[style*="right"], .tabla-chat th[style*="right"] {
  font-variant-numeric: tabular-nums;
}

/* ═══════════ Mis archivos ═══════════ */
.archivos-rejilla {
  display: grid; gap: 13px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.archivos-rejilla .archivo-tarjeta { margin: 0; max-width: none; }
.archivo-de { color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivos-rejilla .archivo-botones { flex-wrap: wrap; }
/* ⚠️ Los botones van en SU PROPIO renglón, y solo acá.
   MEDIDO en el DOM: la fila mide 364 px, los botones se llevan 296 y al nombre
   le quedaban 2 — se leía una letra por renglón y el nombre no se veía. Pasa
   cuando la tarjeta trae TRES botones, que es cuando el archivo tiene
   conversación; por eso unas se veían bien y otras no.
   En el chat NO se toca: allá la tarjeta llega a 460 px y trae dos botones. */
.archivos-rejilla .archivo-botones { flex: 0 0 100%; margin-top: 2px; }

/* ═══════════ el pensamiento del agente ═══════════ */
/* Plegado y discreto: es de consulta, no es la respuesta. Quien solo quiere el
   resultado ni lo mira; quien quiere entender cómo llegó ahí, lo abre. */
.pensamiento { margin: 0 0 10px; }
.pensamiento > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 11px 5px 9px; border-radius: var(--r-3);
  background: var(--carta-2); border: 1px solid var(--borde);
  font: 500 12.5px var(--mono); color: var(--txt-3);
  list-style: none; user-select: none;
}
.pensamiento > summary::-webkit-details-marker { display: none; }
.pensamiento > summary::after {
  content: ›; font-size: 15px; line-height: 1;
  transition: transform .18s ease; color: var(--txt-3);
}
.pensamiento[open] > summary::after { transform: rotate(90deg); }
.pensamiento > summary:hover { color: var(--txt-2); border-color: var(--borde-2); }
.pensamiento-luz {
  width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); flex: none;
}
.pensamiento-texto {
  margin-top: 9px; padding: 12px 15px; border-radius: var(--r-2);
  background: var(--carta-2); border: 1px solid var(--borde);
  font-size: 13px; line-height: 1.6; color: var(--txt-2);
}
.pensamiento-texto p { margin: 0 0 9px; }
.pensamiento-texto p:last-child { margin-bottom: 0; }

/* ═══════════ objetivos táctiles — VA DE ÚLTIMO, DE VERDAD ═══════════
   Con el dedo nada puede medir menos de 44px (lista de ui-ux-pro-max), y
   entre dos cosas tocables tiene que haber al menos 8px de separación.
   Este bloque va al final a propósito: si va antes, cualquier regla posterior
   con la misma especificidad lo pisa. Ya pasó TRES veces — la tercera fue
   `.prefs`, que quedó en 40px porque se escribió debajo de este bloque.
   ⚠️ Todo lo que se agregue al archivo va ARRIBA de acá. */
@media (max-width: 900px) {
  .icono-btn { width: 44px; height: 44px; }
  .aside-btn, .conv, .conv-mas, .msg-accion, .chip, .adjunto,
  .btn, .btn-chico, #b-abajo, .copiar-codigo,
  .menu-flotante button, .prefs label, .permiso, .plan, .linea-check,
  .permiso-agente .btn { min-height: 44px; }
  .conv-mas { width: 44px; opacity: 1; }
  .msg-acciones { opacity: 1; }
  .copiar-codigo { opacity: 1; padding: 8px 12px; }
  .ver-clave { min-height: 44px; padding: 6px 13px; }
  .permiso { align-items: center; }
  .fila-botones .btn { flex: 1 1 auto; }
}

/* ══════════ el agente pregunta ══════════ */
/* Cuando le falta un dato, pregunta en vez de inventar. Va debajo de la
   respuesta, que es donde uno está mirando al terminar de leer. */
.pregunta-agente {
  margin: 12px 0 4px; padding: 16px 18px 14px;
  background: var(--carta); border: 1px solid var(--borde);
  border-radius: var(--r-2); max-width: none;
}
.pregunta-encabezado { margin: 0 0 14px; font-size: 14px; color: var(--txt-2); }
/* Cada pregunta del lote, separada de la siguiente por una línea suave. */
.pregunta-bloque { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--borde-2); }
.pregunta-bloque:last-of-type { border-bottom: 0; padding-bottom: 4px; margin-bottom: 6px; }
.pregunta-bloque.contestada { padding-bottom: 0; margin-bottom: 8px; border-bottom: 0; }
.pregunta-texto { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--txt); }
.pregunta-opciones { display: flex; flex-direction: column; gap: 8px; }
.pregunta-opcion {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; justify-content: flex-start;
  padding: 11px 14px; min-height: 46px; font-size: 14px; line-height: 1.4;
}
/* La letra en un bloque de fondo lleno — nada de rayitas al margen. */
.pregunta-letra {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--borde-2); color: var(--txt-2);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.pregunta-opcion.recomendada { border-color: var(--acento); }
.pregunta-opcion.recomendada .pregunta-letra { background: var(--acento); color: #06202b; }
.pregunta-sello {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 700;
  color: var(--acento-txt, var(--acento)); white-space: nowrap;
}
.pregunta-otra { display: flex; gap: 8px; margin-top: 12px; }
.pregunta-otra .campo-inline { flex: 1; }
.pregunta-saltar { margin-top: 10px; }
/* Lo que se escogió queda escrito: al releer la conversación uno entiende
   por qué el agente hizo lo que hizo. */
.pregunta-rastro {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 4px; padding: 9px 13px; font-size: 13px; color: var(--txt-2);
  background: var(--carta-2); border: 1px solid var(--borde-2); border-radius: var(--r-2);
}
.pregunta-rastro b { color: var(--txt); }
.pregunta-rastro svg { width: 15px; height: 15px; flex: none; color: var(--acento); }

/* ══════════ lo que el agente escribe y corre ══════════ */
/* El código que escribió y el comando que corrió, plegados dentro de «Pensó».
   Antes solo decía «escribiendo un archivo» y tocaba creerle. */
.haciendo-lista .obra { display: block; margin: 7px 0; }
.obra > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 6px 10px; border: 1px solid var(--borde-2); border-radius: var(--r-3);
  background: var(--carta-2); font-size: 12px; font-family: var(--mono);
}
.obra > summary::-webkit-details-marker { display: none; }
.obra[open] > summary { border-radius: var(--r-3) var(--r-3) 0 0; }
.obra > summary b { color: var(--txt); font-weight: 600; }
/* Bloque de fondo lleno para el símbolo — nada de rayitas al margen. */
.obra-tipo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 19px; padding: 0 5px; border-radius: 4px;
  background: var(--borde-2); color: var(--txt-2); font-size: 11px; font-weight: 700;
}
.obra-orden { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra-dato { margin-left: auto; flex: none; color: var(--txt-3); font-size: 11px; }
/* El código: con su propio desplazamiento, para que nunca empuje la página. */
.obra-codigo, .obra-salida {
  margin: 0; padding: 10px 12px; overflow-x: auto; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--borde-2); border-top: 0;
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: var(--carta); font-size: 12px; line-height: 1.5;
}
.obra-codigo code, .obra-salida code { font-family: var(--mono); white-space: pre; color: var(--txt-2); }
.obra-salida { background: var(--carta-2); }
/* Rojo SOLO cuando de verdad falló. */
.obra-fallo > summary { border-color: var(--mal); }
.obra-fallo .obra-estado { color: var(--mal); font-weight: 700; }
.obra-revision {
  padding: 8px 12px; font-size: 12px; color: var(--mal);
  border: 1px solid var(--borde-2); border-top: 0; background: var(--carta);
}

/* ══════════ lo que USTED subió ══════════ */
/* Debajo del mensaje propio, para que al releer se entienda de qué archivo se
   estaba hablando. Discreto: es un recordatorio, no un entregable. */
.subido { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.subido-uno {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--carta-2); border: 1px solid var(--borde-2);
  font-size: 12px; color: var(--txt-2); max-width: 100%;
}
.subido-uno span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subido-uno svg { width: 13px; height: 13px; flex: none; color: var(--txt-3); }

/* ═══════════ el botón cuando está deteniendo ═══════════ */
/* ⚠️ NO va rojo: detener no es un problema, es una acción normal. El rojo está
   reservado para lo que salió mal. Va con fondo del menú —marino— que se
   distingue del acento sin gritar. Medido: letra blanca sobre --menu, 14,8:1. */
.btn.parando { background: var(--menu); border-color: var(--menu); color: #fff; }
.btn.parando:hover { background: var(--menu-3); }
/* El aviso de que se detuvo, dentro de la respuesta que alcanzó a escribir. */
.se-detuvo {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--borde-2);
  font-size: 13px; color: var(--txt-3);
}
/* Si no hay nada encima, la rayita no separa nada: solo se ve rara. */
.se-detuvo:first-child { margin: 0; padding-top: 0; border-top: 0; }

/* ═══════════ la tarjeta de preguntas, ya contestada ═══════════ */
/* Cuando ya se contestaron todas deja de pedir algo: se apaga el realce y queda
   como rastro de lo que uno escogió. Sin esto se quedaba igual de llamativa que
   cuando esperaba respuesta, y uno no sabía si ya había terminado. */
/* ⚠️ Una pregunta YA CONTESTADA se recoge a un renglón.
   Antes esto solo cambiaba el color y la tarjeta se quedaba del mismo tamaño
   —con su encabezado, sus opciones y su aire— estorbando todo lo que venía
   después. Ya cumplió su trabajo: lo único que hace falta después es el rastro
   de qué se contestó, para quien se devuelva a leer. */
.pregunta-agente.pregunta-cerrada {
  background: transparent;
  border: 0; box-shadow: none;
  margin: 6px 0 2px; padding: 0;
}
.pregunta-agente.pregunta-cerrada .pregunta-encabezado {
  display: none;                    /* «Listo, con eso arranco» ya no aporta */
}
.pregunta-agente.pregunta-cerrada .pregunta-bloque {
  margin: 0; padding: 0; border: 0; background: none;
}
.pregunta-agente.pregunta-cerrada .pregunta-rastro {
  font-size: 13px; color: var(--txt-3); padding: 2px 0;
}

/* ═══════════ de quién salió cada archivo ═══════════ */
/* Solo aparece cuando NO es de uno: si dijera «lo pidió usted» en todos, sería
   ruido en la mayoría de las tarjetas. Se marca lo que sorprende, no lo obvio. */
.archivo-dequien {
  display: inline-block; margin-top: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--carta-3); border: 1px solid var(--borde-2);
  font-size: 11.5px; color: var(--txt-2);
}


/* ── el pedacito de las que se encuentran por dentro ──
   El título no explica por qué salió la conversación —«Hazme una remisión en
   PDF» no dice nada de «preoperacional»—, así que debajo va el trozo donde
   coincide lo que se buscó.

   ⚠️ La fila es `display:flex` en fila y `.conv span` trae `nowrap; flex:1`,
   que es más específico que `.conv-trozo`. Por eso la fila con pedacito lleva
   su propia clase, puesta desde el código: así esto se lee sin adivinar. */
.conv.con-trozo {
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 8px;
}
.conv.con-trozo > span:not(.conv-trozo) { padding-top: 1px; }

.conv.con-trozo .conv-trozo {
  flex: 0 0 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  margin: 4px 0 0 26px;
  padding: 5px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--menu-txt-2) 15%, transparent);
  color: var(--menu-txt-2);
  font-size: 11.5px;
  line-height: 1.42;
  text-align: left;
  text-overflow: clip;
}


/* ── la ayuda al final de «Mi cuenta» ──
   Se separa con una línea porque no es parte de la seguridad de la cuenta: es
   una ayuda. Antes vivía pegada al botón de cambiar la clave, a cero píxeles. */
.mc-ayuda {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}
.mc-ayuda .bloque-titulo { margin-top: 0; margin-bottom: 10px; }


/* ═══════════ la jerarquía del turno · jerarquia-del-turno ═══════════
   Antes la pregunta de uno y la respuesta se veían casi igual: dos bloques del
   mismo ancho, los dos con borde y sombra. Había que leer el nombre para saber
   quién habló.

   La guía de UI/UX de hermes-webui (MIT) lo resuelve así:
     «User message: right-aligned, compact bubble.
      Assistant content: left-aligned, prose-first, NOT a heavy bubble.»

   Se toma la decisión, no su CSS —el de ellos pesa 506 KB con temas y skins
   que acá no van—. Los colores, el acento y el ancho de lectura no se tocan. */

/* ── la pregunta de uno: IGUAL que la respuesta ──
   Antes se iba a la derecha metida en una burbuja verde. En la muestra de
   ellos NADIE tiene burbuja: los dos turnos arrancan a la izquierda, con el
   mismo avatar y el mismo margen, y lo que los separa es el COLOR DEL NOMBRE.
   Asi el texto de uno tambien usa el ancho completo. */
.msg.de-mi { grid-template-columns: 30px 1fr; }
.msg.de-mi .quien-msg { grid-column: 1; grid-row: 1; }
.msg.de-mi .msg-cuerpo { grid-column: 2; grid-row: 1; }
.msg.de-mi .msg-quien { justify-content: flex-start; }
.msg.de-mi .burbuja {
  width: auto; max-width: none; margin-left: 0;
  background: transparent; border: 0; box-shadow: none; padding: 2px 0 0;
}
.msg.de-mi .burbuja > p { max-width: none; }

/* Lo unico que los diferencia, como en la muestra: el nombre de color. */
/* MEDIDO: con --marino-alto esto daba rgb(42,56,84) sobre un fondo de
   rgb(11,18,32) en el tema oscuro = 1,32:1. Ilegible. El color tiene que
   salir de una variable que CAMBIE con el tema, no de un azul fijo. */
.msg.de-mi    .msg-quien { color: var(--txt); }
.msg.de-agente .msg-quien { color: var(--acento-2); }

/* ── la respuesta: prosa, sin la tarjeta encima ── */
.msg.de-agente .burbuja {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 2px 0 0;
}
/* Lo que SÍ lleva su caja adentro de la respuesta: son cosas, no prosa. */
.msg.de-agente .burbuja pre,
.msg.de-agente .burbuja .tabla-chat,
.msg.de-agente .burbuja table {
  box-shadow: var(--sombra);
}
.msg.de-agente .burbuja table {
  background: var(--carta);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-2);
  overflow: hidden;
}

/* En el celular la pregunta puede ocupar casi todo: no hay ancho que sobre. */
@media (max-width: 560px) {
  .msg.de-mi .burbuja { max-width: none; }
}


/* ═══════ la fila del pensamiento · adelanto-de-lo-pensado ═══════
   Antes era una pastilla chiquita que decía «Pensó · 1 paso · 6,4s»: cuántos
   pasos y cuánto tardó, pero ni una palabra de QUÉ pensó. Había que abrirla.

   hermes-webui y el Hermes de escritorio lo resuelven igual: una FILA de ancho
   completo con un adelanto del texto, cortado. Uno ve de qué pensó sin abrir.
   Se toma la forma; los colores de DGNOVA se quedan. */

.haciendo summary {
  display: flex; width: 100%; gap: 10px; align-items: center;
  border-radius: var(--r-2); padding: 7px 12px;
}
.haciendo-rotulo { flex: none; font-weight: 600; color: var(--txt-2); }
.haciendo-adelanto {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--txt-3); font-size: 12px;
}
/* La flecha, que gira al abrir. */
.haciendo-flecha {
  flex: none; width: 8px; height: 8px; border-right: 1.6px solid var(--txt-3);
  border-bottom: 1.6px solid var(--txt-3); transform: rotate(-45deg);
  transition: transform .18s ease; margin-right: 2px;
}
.haciendo[open] .haciendo-flecha { transform: rotate(45deg); }
.haciendo[open] summary { border-radius: var(--r-2) var(--r-2) 0 0; }
/* Cerrada no hace falta el adelanto en el celular: no cabe. */
@media (max-width: 560px) { .haciendo-adelanto { display: none; } }


/* ═══════ la lista de archivos del panel · panelDeArchivos ═══════
   Las dos referencias de Luis tienen los archivos a la derecha, en filas
   delgadas con su tamaño. Se toma esa forma; los colores son los de DGNOVA. */
.panel-lista { display: flex; flex-direction: column; gap: 1px; }
.panel-arch {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 0; border-radius: var(--r-2);
  padding: 8px 10px; text-align: left; cursor: pointer;
  color: var(--txt-2); font-size: 13px; font-family: inherit;
  transition: background .13s ease;
}
.panel-arch:hover { background: var(--carta-2); color: var(--txt); }
.panel-arch svg { width: 15px; height: 15px; flex: none; color: var(--txt-3); }
.panel-arch-nombre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-arch-tam {
  flex: none; font-family: var(--mono); font-size: 11px; color: var(--txt-3);
}
/* La cabecera del panel, con la flecha de volver. */
.panel-cabeza .icono-btn.oculto { display: none; }


/* ═══════ que el texto USE EL ANCHO · usa-el-ancho ═══════
   MEDIDO en la pantalla de Luis, no en la de las pruebas:

     ventana 1440 -> el párrafo medía 681 px -> 429 px vacíos (37%)
     ventana 2000 -> el párrafo medía 681 px -> 803 px vacíos (46%)
     ventana 2560 -> el párrafo medía 681 px -> 1.083 px vacíos (47%)

   Estaba clavado en `60ch`. En las dos capturas de referencia el texto usa el
   panel entero: en hermes-webui un párrafo del agente corre 1.040 px.

   El tope se sube a 108ch —unos 1.220 px— para que en un monitor de 32
   pulgadas no quede un renglón interminable, pero muy por encima del de antes. */
.burbuja > p,
.burbuja > ul, .burbuja > ol,
.burbuja > h1, .burbuja > h2, .burbuja > h3,
.burbuja > blockquote { max-width: none; }
/* SIN TOPE. En la muestra de hermes-webui el texto llena el panel entero; el
   ancho lo pone el PANEL, no una regla de caracteres. Si el panel de archivos
   esta abierto, el chat se angosta solo y el texto lo sigue. */

/* ═══════ el pensamiento SIN CAJA ═══════
   Luis: «sigues metiendo lo del pensamiento en caja cuando la muestra te
   mostró cómo es». En hermes-webui la fila abre y debajo va el texto pelado. */
.haciendo-lista {
  border: 0;
  background: transparent;
  padding: 6px 12px 2px;
}
.haciendo[open] summary { border-radius: var(--r-2); }
.haciendo-lista .razono { color: var(--txt-3); padding: 2px 0 6px; }


/* ======= el pensamiento y las herramientas, EN FILAS - pasos-en-filas =======
   Medido sobre ui-sessions.png del repo de ellos (rama master): arriba los dos
   enlaces, y debajo una fila por herramienta -un renglon, ancho completo,
   flecha a la derecha-. Lo de antes era UNA caja envolviendo todo, que es lo
   que Luis venia senalando. Los colores siguen siendo los de DGNOVA. */
.pasos { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.pasos-mando { display: flex; gap: 16px; padding: 0 2px 4px; }
.pasos-enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--acento-2);
}
.pasos-enlace:hover { text-decoration: underline; }

.paso { border-radius: var(--r-2); }
.paso > summary {
  display: flex; align-items: center; gap: 10px; width: 100%;
  cursor: pointer; list-style: none;
  background: var(--carta-2); border: 1px solid var(--borde-2);
  border-radius: var(--r-2); padding: 7px 12px;
  font-family: var(--mono); font-size: 12.5px; color: var(--txt-2);
}
.paso > summary::-webkit-details-marker { display: none; }
.paso-rotulo { flex: none; font-weight: 700; color: var(--acento-2); }
.paso-adelanto {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--txt-3);
}
.paso-flecha {
  flex: none; width: 7px; height: 7px;
  border-right: 1.6px solid var(--txt-3); border-bottom: 1.6px solid var(--txt-3);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.paso[open] > summary { border-radius: var(--r-2) var(--r-2) 0 0; }
.paso[open] .paso-flecha { transform: rotate(45deg); }
/* Abierta: el texto va PELADO debajo, sin otra caja encima. */
.paso-cuerpo {
  padding: 10px 13px 12px; font-size: 12.5px; color: var(--txt-2);
  border: 1px solid var(--borde-2); border-top: 0;
  border-radius: 0 0 var(--r-2) var(--r-2);
}
.paso-cuerpo .razono {
  display: block; white-space: pre-wrap; line-height: 1.6;
  font-family: var(--mono); font-size: 12px; color: var(--txt-3); margin: 0;
}
/* En el celular el adelanto no cabe. Pero sin el, la flecha se queda pegada
   al rotulo en vez de irse a la derecha: hay que empujarla a mano. */
@media (max-width: 560px) {
  .paso-adelanto { display: none; }
  .paso-flecha { margin-left: auto; }
}


/* ======= la barra de arriba: la conversacion, no el programa ======= */
.barra h1 {
  display: flex; flex-direction: column; gap: 1px;
  line-height: 1.25; min-width: 0;
}
.barra h1 .tit-conv {
  font-size: 16px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra h1 small {
  font-size: 11.5px; font-weight: 500; color: var(--txt-3);
  font-family: var(--mono);
}

/* La caja de escribir acompana al hilo tambien en pantalla grande. */
@media (min-width: 1700px) { .comp-dentro { max-width: 1460px; } }


/* ======= el panel como ARBOL - arbol-de-carpetas =======
   «los paneles todos se extienden se compactan», dijo Luis. En ui-sessions.png
   de ellos las carpetas se pliegan y adentro van los archivos con su tamano.
   Lo mio era una lista corrida de 76 nombres al mismo nivel. */
.panel-carpeta > summary {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  padding: 7px 10px; border-radius: var(--r-2);
  font-size: 13px; font-weight: 600; color: var(--txt-2);
}
.panel-carpeta > summary::-webkit-details-marker { display: none; }
.panel-carpeta > summary:hover { background: var(--carta-2); color: var(--txt); }
.panel-flecha {
  flex: none; width: 6px; height: 6px;
  border-right: 1.6px solid var(--txt-3); border-bottom: 1.6px solid var(--txt-3);
  transform: rotate(-45deg); transition: transform .16s ease;
}
.panel-carpeta[open] > summary .panel-flecha { transform: rotate(45deg); }
.panel-carpeta-nombre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-carpeta-cuantos {
  flex: none; font-family: var(--mono); font-size: 11px; color: var(--txt-3);
}
/* Adentro van corridos, con la sangria que dice que estan dentro. */
.panel-carpeta-dentro { padding-left: 13px; display: flex; flex-direction: column; gap: 1px; }


/* ======= lo que el pensamiento EN VIVO necesita adentro de la fila =======
   Estas tres reglas vivian colgadas de `.haciendo-lista`, que era la caja
   vieja. Se repiten aca para la fila, porque el camino en vivo -mientras el
   agente trabaja- mete adentro los pasos, los scripts y los comandos. */
.paso-cuerpo .obra { display: block; margin: 7px 0; }
.paso-cuerpo > div { padding: 3px 0; }
.paso-cuerpo b { color: var(--txt); font-weight: 600; }
/* El puntico que respira mientras todavia esta pensando. */
.paso-cuerpo .razono-vivo::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px;
  border-radius: 50%; background: var(--acento); vertical-align: baseline;
  animation: latir 1.2s infinite;
}


/* ======= la caja trancada mientras hay una pregunta abierta ======= */
#compositor.trancado .comp-dentro { opacity: .55; }
#compositor.trancado #entrada { cursor: not-allowed; }
.tranca-aviso {
  max-width: min(1180px, 100%); margin: 0 auto 8px;
  font-size: 12.5px; color: var(--acento-2);
  background: var(--acento-piso); border: 1px solid var(--acento-bord);
  border-radius: var(--r-2); padding: 8px 12px;
}
@media (min-width: 1700px) { .tranca-aviso { max-width: 1460px; } }


/* ======= el pensamiento en vivo, con tope de alto =======
   Medido: abierto y sin tope ocupaba 453 px y empujaba la tarjeta de preguntas
   fuera de la pantalla, con dos opciones cortadas. Se deja abierto -uno quiere
   ver que pasa mientras espera- pero con su propio rodadero. */
.paso-vivo .paso-cuerpo { max-height: 230px; overflow-y: auto; }


/* ======= SIN MOUSE, en cualquier ancho - sin-mouse-cualquier-ancho =======
   Medido en una tableta apaisada de 1024 px con dedo: los botones del mensaje
   quedaban en opacidad 0 -invisibles- y de 30 px de alto. No habia forma de
   copiar una respuesta, pedir otra, ni editar lo que uno escribio.

   Las reglas del dedo estaban colgadas del ANCHO (max-width: 900px), y el
   ancho no dice si hay mouse: una tableta apaisada mide 1024 y no tiene
   ninguno. El navegador si lo sabe -medido: (hover: none) y (pointer: coarse),
   las dos en True-. */
@media (hover: none) {
  /* Lo que se revelaba al pasar el mouse tiene que estar siempre a la vista. */
  .msg-acciones { opacity: 1; }
  .conv-mas { opacity: 1; width: 44px; }
  .copiar-codigo { opacity: 1; }

  /* Y nada por debajo de 44 px, que es lo que ocupa un dedo. */
  .icono-btn { width: 44px; height: 44px; }
  .aside-btn, .conv, .msg-accion, .chip, .adjunto,
  .btn-chico, #b-abajo, .conv-mas, .copiar-codigo,
  .menu-flotante button, .paso > summary, .pasos-enlace,
  .panel-arch, .panel-carpeta > summary { min-height: 44px; }
  .msg-accion { padding: 6px 11px; }
}


/* ======= la gravedad del permiso, en palabras ======= */
.permiso-grave {
  margin: 10px 0 4px; font-size: 13.5px; font-weight: 650;
  display: flex; align-items: center; gap: 7px;
}
.permiso-grave::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor;
}
/* ⚠️ `--mal`, NO `--malo`. `--malo` no existe: se usaba 4 veces y se
   definia 0, asi que siempre caia al respaldo fijo y no seguia el tema.
   Medido en oscuro con el respaldo: 2,42:1. */
.permiso-grave.grave-alto  { color: var(--mal); }
.permiso-grave.grave-medio { color: var(--txt-2); }
.permiso-grave.grave-bajo  { color: var(--txt-3); }
/* El texto del revisor de seguridad viene en inglés y NO se traduce: sería
   inventar. Va debajo, más chico, para quien lo quiera mirar. */
.permiso-tecnico {
  margin: 0 0 8px; font-size: 12px; color: var(--txt-3);
  font-family: var(--mono); line-height: 1.5;
}


/* ======= la hora que desempata dos filas iguales - desempatar-filas =======
   Medido: en un menú de 195 conversaciones, 79 filas (41%) se veían iguales a
   otra. Solo las repetidas la llevan; las 116 que ya se distinguen, no. */
.conv-cuando {
  flex: none; margin-left: 6px;
  font-family: var(--mono); font-size: 10.5px; font-style: normal;
  color: var(--menu-txt-2); opacity: .85; white-space: nowrap;
}
.conv-fila.viva .conv-cuando { opacity: 1; }


/* ======= el menú achicado no puede salirse - menu-chico-no-se-sale =======
   MEDIDO con el menú en 68 px: cuatro botones se salían 33 px cada uno —«Mis
   archivos», «Mi empresa», «Mi cuenta» y «Salir»—. La regla que los esconde
   pide un `span`, y dos de los cuatro tenían el rótulo como texto SUELTO
   detrás del icono. Un selector que no coincide no falla: no hace nada.

   Ya se les puso el span. Esto es la red por si mañana alguien agrega otro
   botón sin él: nada de lo que haya adentro se sale de la franja. */
#app.aside-chico #aside,
#app.aside-chico .aside-pie,
#app.aside-chico .aside-cabeza { overflow: hidden; }
#app.aside-chico .aside-btn,
#app.aside-chico #b-nueva {
  justify-content: center;
  padding-left: 0; padding-right: 0;
  overflow: hidden; white-space: nowrap;
}
/* El icono manda: es lo único que queda, y se centra. */
#app.aside-chico .aside-btn svg,
#app.aside-chico #b-nueva svg { margin: 0; flex: none; }


/* ======= la altura del turno, apretada - altura-del-turno =======
   Luis: «tanto espacio en blanco perdido en altura». MEDIDO, pieza por pieza,
   en un intercambio de verdad:

       nombre del agente ......  20 px
       el bloque de proceso ... 263 px   <-- acá se va
       la respuesta ........... 214 px
       tres tarjetas .......... 189 px
       espacio VACÍO ...........  59 px
       alto total del turno ... 776 px

   El vacío es poco: lo que come la altura es el bloque de proceso, y eso lo
   puse yo. Se aprieta lo que es aire, sin tocar el contenido.

   ⚠️ La LETRA no se toca: achicarla para ganar altura es cambiar un problema
   por otro peor. */

/* entre un turno y el siguiente */
.hilo-dentro { gap: 20px; }

/* el nombre, más pegado a lo que dice */
.msg-quien { margin-bottom: 3px; }

/* el bloque de proceso: filas más bajas y más juntas */
.pasos { gap: 2px; margin-bottom: 8px; }
.pasos-mando { padding: 0 2px 2px; }
.paso > summary { padding: 4px 12px; min-height: 0; }
.paso-cuerpo { padding: 8px 13px 10px; }

/* las tarjetas de archivo, más juntas entre sí */
.archivo-tarjeta { margin-top: 6px; margin-bottom: 6px; }

/* los botones del mensaje, pegados a la respuesta */
.msg-acciones { margin-top: 5px; }

/* ⚠️ En el celular NO se aprietan las filas de proceso: ahí el dedo manda y
   la regla de `hover: none` las deja en 44 px. Esto solo aplica con mouse. */
@media (hover: none) {
  .paso > summary { min-height: 44px; padding: 7px 12px; }
}


/* ======= los botones del mensaje no reservan alto - botones-sin-espacio =====
   MEDIDO en una conversación de 18 turnos, alto total 2.204 px:
       filas de nombre .......... 360 px (16%)
       filas de BOTONES ......... 540 px (24%)   <-- el peor
       huecos entre turnos ...... 340 px (15%)

   Los botones están en `opacity: 0` hasta que uno pasa el mouse, pero SEGUÍAN
   ocupando sus 30 px: empujaban todo hacia abajo aunque nadie los viera.
   Ahora, mientras están escondidos, no ocupan alto; al pasar el mouse aparecen
   encima sin mover el texto.

   ⚠️ En el celular NO aplica: allá no hay mouse, la regla de `hover: none` los
   deja siempre visibles, y sin alto no habría cómo apretarlos. */
@media (hover: hover) {
  .msg-acciones {
    height: 0; margin-top: 0; overflow: hidden;
    transition: opacity .15s ease;
  }
  .msg:hover .msg-acciones,
  .msg:focus-within .msg-acciones {
    height: auto; margin-top: 5px; overflow: visible;
  }
}


/* ======= lo que queda de armazón, apretado - armazon-apretado =======
   MEDIDO en la misma conversación de 18 turnos, ya sin el alto de los botones
   (1.574 px):
       contenido — lo que se lee ....  816 px (52%)
       los nombres ..................  360 px (23%)  <- se quedan, Luis los quiere
       los huecos entre turnos ......  340 px (22%)
       márgenes sueltos .............   58 px  (4%)

   Los huecos son 20 px por turno, 17 veces. Y la fila del nombre mide 20 px
   para una letra de 12,5: le sobra interlínea.

   ⚠️ El hueco NO baja de 14 px: por debajo de ahí dos turnos seguidos se pegan
   y uno deja de ver dónde termina uno y empieza el otro. La separación entre
   turnos es información, no adorno.

   ⚠️ La LETRA no se toca: ni la del texto ni la del nombre. */
.hilo-dentro { gap: 14px; }
.msg-quien { line-height: 1.25; }


/* El reloj del letrero de «sigue trabajando»: dice cuánto lleva, para que no
   parezca congelado. Es lo único que se puede mostrar sin una ruta nueva en el
   servidor — ver el comentario de `esperarloAca` en app.js. */
.sigue-trabajando .lleva {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 11.5px; color: var(--txt-3);
}


/* ══════════ LA LINEA DE TIEMPO DEL TURNO - linea-turno ══════════

   Antes el turno era UNA caja plegada con todo adentro: el pensamiento, las
   herramientas y lo que el agente iba narrando. Medido en un turno de prueba:
   18.896 caracteres en un solo bloque, y lo narrado ni siquiera se veia.

   El Hermes de escritorio arma una linea de tiempo: cada tanda de pensamiento,
   cada cosa que dice y cada herramienta quedan en el orden en que pasaron. El
   bloque que va corriendo se queda abierto; el que acabo se cierra solo.

   ⚠️ Nada de esto lleva carta propia. Una carta por pieza costaria 29 px de
   marco cada una —14 arriba, 14 abajo, 1 de borde— y en un turno de cinco
   piezas son 145 px de puro adorno. La altura es justo lo que hay que cuidar. */
.linea-turno {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px;
}

/* Lo que el agente va diciendo mientras trabaja: «Déjame leer el resto del
   documento». Va en letra NORMAL, como la respuesta, porque eso es lo que
   permite seguir lo que pasa sin abrir nada. Antes se escondia en el plegado. */
.dicho {
  color: var(--txt); line-height: 1.65; overflow-wrap: anywhere;
  padding: 0 2px;
}
.dicho > p:first-child { margin-top: 0; }
.dicho > p:last-child  { margin-bottom: 0; }

/* Un renglon por herramienta: el punto, que hizo, y cuanto llevaba el turno.
   Como el «Read HV HAROLD... L501  594ms» del escritorio. */
/* ⚠️ BLOQUE, no flex. Esto nacio como una fila plana —un `<div>` con el punto,
   el nombre y la duracion en linea— y llevaba `display: flex`. Despues paso a
   ser un `<details>` que abre, y con flex el `<summary>` y el cuerpo quedan
   como DOS ITEMS de la misma fila: el detalle se iba a la DERECHA del titulo,
   montado encima de la conversacion.
   La alineacion del titulo ya la hace `.paso > summary`, que es el que debe. */
.paso-hizo {
  display: block;
  font-family: var(--mono); font-size: 12.5px; color: var(--txt-2);
}
/* ⚠️ Un PUNTO, no una rayita a la izquierda: esa esta prohibida. */
.paso-icono {
  flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: var(--acento);
}
/* Solo el del TITULO se recorta en una linea. El de cada herramienta de
   adentro puede dar la vuelta: ahi si hay espacio. */
.paso-hizo > summary b {
  color: var(--txt); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.paso-cuando {
  margin-left: auto; flex: none;
  font-size: 11.5px; color: var(--txt-3);
}

/* Las tarjetas de script y comando ahora cuelgan de la linea, no de un
   `.paso-cuerpo`. Sin el padding de aquel contenedor quedaban pegadas. */
.linea-turno > .obra { margin: 0; }


/* ══════ EL PENSAMIENTO, EN PROSA - pensamiento-prosa ══════
   Antes salia en `var(--mono)` a 12 px, como codigo. En el escritorio de
   Hermes es prosa gris con parrafos: se lee de corrido. Es pensamiento, no un
   programa, y en letra de maquina se ve mas tecnico de lo que es.

   ⚠️ Solo dentro del bloque de PENSAR. Las salidas de comando y los scripts
   siguen en monoespaciado, que ahi si corresponde. */
.paso-piensa .paso-cuerpo .razono {
  font-family: inherit; font-size: 13px; line-height: 1.7;
  color: var(--txt-2);          /* medido: 7,68:1 sobre blanco */
  white-space: pre-wrap;
}

/* ══════ EL GRUPO DE HERRAMIENTAS - grupo-herramientas ══════
   Una fila por tanda, que se abre. Como el «Explored HV HAROLD..., used 1
   tool ⌄» del escritorio: el titular dice sobre que trabajo y cuantas fueron,
   y adentro esta cada una con su detalle. */
.paso-hizo > summary { gap: 8px; }
.paso-hizo .paso-rotulo { color: var(--txt-2); font-weight: 600; }
.paso-hizo .paso-adelanto { color: var(--txt-3); }
.paso-hizo > summary > .paso-cuando {
  flex: none; margin-left: auto; padding-left: 8px;
  font-size: 11.5px; color: var(--txt-3);
}

/* cada herramienta del grupo */
.hizo-una + .hizo-una { margin-top: 8px; border-top: 1px solid var(--borde-2); padding-top: 8px; }
.hizo-fila {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 12px;
}
.hizo-fila b { color: var(--txt); font-weight: 600; flex: none; }
.hizo-sobre {
  color: var(--txt-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.hizo-cuando { margin-left: auto; flex: none; color: var(--txt-3); font-size: 11.5px; }

/* lo que devolvio la herramienta: el archivo, la busqueda, lo que sea.
   ⚠️ CON tope de alto: un `read_file` devuelve el archivo entero y sin tope
   una sola fila abierta empujaria la conversacion fuera de la pantalla. */
.hizo-detalle {
  margin: 6px 0 0; padding: 8px 10px;
  background: var(--carta-2); border: 1px solid var(--borde-2);
  border-radius: var(--r-2);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  color: var(--txt-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 260px; overflow: auto;
}
/* las tarjetas de comando y script, ya adentro de su herramienta */
.hizo-una > .obra { margin: 6px 0 0; }


/* El renglon de «Abrio <direccion>»: una pieza mas de la linea de tiempo, con
   la direccion a la vista para que uno compruebe a donde entro el agente. */
.paso-hizo-simple {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 2px;
  font-family: var(--mono); font-size: 12.5px; color: var(--txt-2);
}
.paso-hizo-simple b { color: var(--txt); font-weight: 600; flex: none; }
.paso-hizo-simple a {
  color: var(--acento-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}


/* ══════ CADA HERRAMIENTA, SU PROPIA TAPA - tres-niveles ══════
   Como en el Hermes de escritorio: se abre el grupo, sale la LISTA de
   herramientas, y uno abre la que quiera ver. Antes el grupo soltaba todo el
   detalle de golpe, que es lo que Luis reclamo. */
.hizo-una { display: block; }
.hizo-una > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  padding: 3px 2px;
  font-family: var(--mono); font-size: 12px;
}
.hizo-una > summary::-webkit-details-marker { display: none; }
/* El punto del renglon: 6 px. Nunca una rayita a la izquierda. */
.hizo-punto {
  flex: none; width: 6px; height: 6px; border-radius: 2px;
  background: var(--txt-3);
}
.hizo-una[open] > summary .hizo-punto { background: var(--acento); }
.hizo-una > summary > b { color: var(--txt); font-weight: 600; flex: none; }
.hizo-una > summary .hizo-sobre {
  color: var(--txt-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.hizo-una > summary .hizo-cuando {
  margin-left: auto; flex: none; color: var(--txt-3); font-size: 11px;
}
.hizo-una > summary .paso-flecha {
  flex: none; width: 6px; height: 6px; margin-left: 6px;
  border-right: 1.5px solid var(--txt-3); border-bottom: 1.5px solid var(--txt-3);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.hizo-una[open] > summary .paso-flecha { transform: rotate(45deg); }

/* ⚠️ Si NO hay nada que abrir, el renglon no se aprieta y no lleva flecha.
   Es su regla: «a bare, unexpandable row». Un renglon con flecha que se abre
   en vacio hace perder el clic y la confianza. */
.hizo-una.hizo-vacia > summary { cursor: default; }
.hizo-una.hizo-vacia > summary .paso-flecha { display: none; }
.hizo-una.hizo-vacia .hizo-cuerpo { display: none; }

/* ══════ ABIERTA: se vuelve una TARJETA ══════
   Es lo que se ve en la captura: un recuadro con su equis arriba a la derecha
   y el contenido adentro. */
.hizo-una[open] {
  border: 1px solid var(--borde-2); border-radius: var(--r-2);
  background: var(--carta); margin: 5px 0;
}
.hizo-una[open] > summary {
  border-bottom: 1px solid var(--borde-2); padding: 7px 10px;
}
.hizo-una > summary .hizo-x {
  flex: none; margin-left: 8px; width: 18px; height: 18px;
  display: none; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  color: var(--txt-3); font-size: 15px; line-height: 1; border-radius: 4px;
}
.hizo-una[open] > summary .hizo-x { display: inline-flex; }
.hizo-una > summary .hizo-x:hover { background: var(--carta-2); color: var(--txt); }
.hizo-cuerpo { padding: 8px 10px 10px; }
.hizo-cuerpo:empty { display: none; }
.hizo-cuerpo > .obra { margin: 0 0 6px; }

/* El resultado, en vinetas «clave: valor» cuando viene estructurado, como en
   la captura («Name:», «File:», «Content:»). Y RUEDA: un `read_file` devuelve
   el archivo entero y sin tope empujaria la conversacion fuera de pantalla. */
.hizo-lista-datos {
  margin: 0; padding: 0 0 0 16px; list-style: disc;
  max-height: 220px; overflow: auto;
  font-size: 12.5px; line-height: 1.65; color: var(--txt-2);
}
.hizo-lista-datos li { margin: 0 0 3px; overflow-wrap: anywhere; }
.hizo-lista-datos b { color: var(--txt); font-weight: 600; }


/* ══════ LAS FILAS, SIN CAJA - flat-not-boxed ══════
   De `components/chat/disclosure-row.tsx:39` del escritorio de Hermes:

       // max-w-fit so the click target hugs the title text width —
       // NO BACKGROUND FILL, just the cursor + the affordance caret.

   Sus filas son renglones pelados. Las nuestras eran pastillas grises de lado
   a lado, y eso solo —con cada pieza ya igual por dentro— hacia que la
   pantalla entera se viera distinta. Es su principio 1: «Flat, not boxed». */
.paso > summary,
.hizo-una > summary {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 3px 0;
  width: auto;
}
/* El area de clic abarca el texto, no el renglon entero. */
.paso > summary > .paso-rotulo,
.hizo-una > summary > b { flex: none; }

/* Al abrirse tampoco hay caja: solo el contenido, con un poco de aire. */
.paso[open] > summary { border-bottom: 0; }
.paso-cuerpo {
  border: 0; border-radius: 0; background: none;
  padding: 4px 0 8px 15px;
}
.hizo-una[open] {
  border: 0; border-radius: 0; background: none; margin: 2px 0;
}
.hizo-una[open] > summary { border-bottom: 0; }
.hizo-cuerpo { padding: 4px 0 6px 14px; }

/* El detalle si conserva su recuadro: es contenido, no cromo — igual que en
   su captura, donde el archivo sale en su caja con barra para rodar. */
.hizo-detalle, .hizo-lista-datos {
  background: var(--carta-2); border: 1px solid var(--borde-2);
  border-radius: var(--r-2); padding: 8px 10px;
}
.hizo-lista-datos { padding-left: 26px; }


/* ══════ LA RESPUESTA DEL AGENTE, SIN CAJA - sin-burbuja ══════
   De su codigo, los dos lados:

     `user-message.tsx:67`       rounded-xl border bg-(--dt-user-bubble)
                                 -> el mensaje de la PERSONA si lleva burbuja
     `assistant-message.tsx:232` text-pretty ... text-foreground
                                 -> la respuesta del AGENTE va PLANA

   Nosotros le habiamos puesto carta blanca con borde y sombra a las dos.
   Es su principio 1: «Flat, not boxed».

   ⚠️ La de la PERSONA se queda como esta: alla tambien la tiene. */
.msg.de-agente .burbuja {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
/* Lo que SI conserva su recuadro, porque es contenido y no cromo: las tablas,
   el codigo y las tarjetas de archivo. */
.msg.de-agente .burbuja .tabla-chat,
.msg.de-agente .burbuja pre,
.msg.de-agente .burbuja .archivo-tarjeta { }


/* ══════ SU MENSAJE SE DISTINGUE - mensaje-persona ══════
   De `user-message.tsx:67` del escritorio: el mensaje de la PERSONA lleva
   caja —`rounded-xl border bg-(--dt-user-bubble)`— y la respuesta del agente
   va plana. Aca los dos habian quedado planos y no habia forma de saber donde
   empieza uno y termina el otro. */
.msg.de-mi .burbuja {
  background: var(--acento-piso);
  border: 1px solid var(--acento-bord);
  border-radius: var(--r);
  padding: 9px 13px;
  width: auto;
}

/* ══════ MAS APRETADO - compacto ══════
   MEDIDO antes: hueco entre piezas 6 px, cada fila 26 px, el turno 436 px.
   Sus filas usan la letra chica de herramienta con padding minimo. */
.linea-turno { gap: 1px; margin-bottom: 6px; }
.paso > summary { padding: 1px 0; }
.hizo-una > summary { padding: 1px 0; }
.paso-cuerpo { padding: 2px 0 6px 15px; }
.hizo-cuerpo { padding: 2px 0 4px 14px; }
.dicho { padding: 2px 2px; }
.hizo-una[open] { margin: 1px 0; }
.hizo-detalle, .hizo-lista-datos { padding: 6px 9px; margin-top: 3px; }
.hizo-lista-datos li { margin: 0 0 1px; }


/* ══════ EL ASPECTO DE LAS FILAS - como-el-escritorio ══════
   Sus numeros exactos, de `styles.css` y `scaffold-row.tsx:19`:

       --conversation-tool-font-size   0.6875rem = 11 px
       --conversation-line-height      1.125rem  = 18 px
       --conversation-scaffold-text    64% de opacidad
       --conversation-scaffold-meta    44%  (duraciones y contadores)

   Y NO usan monoespaciada: heredan la letra del texto. Lo nuestro estaba en
   12,5 px, `var(--mono)` y color de acento verde — por eso se leia como un
   registro tecnico y lo suyo se lee como prosa tranquila. */
.paso > summary,
.hizo-una > summary,
.paso-hizo-simple {
  font-family: inherit;
  font-size: 11px;
  line-height: 18px;
  color: color-mix(in srgb, var(--txt) 64%, transparent);
}
.paso > summary .paso-rotulo,
.hizo-una > summary b,
.paso-hizo-simple b {
  font-weight: 500;
  color: color-mix(in srgb, var(--txt) 64%, transparent);
}
.paso > summary .paso-adelanto,
.hizo-una > summary .hizo-sobre {
  color: color-mix(in srgb, var(--txt) 64%, transparent);
  flex: 0 1 auto;                 /* que NO empuje la flecha al borde */
}
/* Duraciones y contadores: mas chicos y mas apagados, como su META. */
.paso > summary .paso-cuando,
.hizo-una > summary .hizo-cuando,
.paso-hizo-simple .paso-cuando {
  font-size: 10px;
  color: color-mix(in srgb, var(--txt) 44%, transparent);
  margin-left: 8px;
}

/* ⚠️ SIN VINETAS DE COLOR. En su pantalla no hay ningun cuadrito verde: la
   fila es texto gris y ya. El punto de color hacia que cada renglon gritara. */
.paso-hizo > summary .paso-icono,
.hizo-una > summary .hizo-punto,
.paso-hizo-simple .paso-icono { display: none; }

/* La flecha va PEGADA al texto, no al borde derecho — su `max-w-fit`. */
.paso > summary { justify-content: flex-start; }
.paso > summary .paso-flecha,
.hizo-una > summary .paso-flecha,
.hizo-una > summary .hizo-flecha { margin-left: 6px; order: 99; }
.paso > summary .paso-cuando,
.hizo-una > summary .hizo-cuando { margin-left: auto; order: 98; }


/* ══════ LA LETRA, DE VERDAD - letra-de-las-filas ══════
   MEDIDO con el estilo calculado: las filas seguian en `JetBrains Mono` pese a
   poner `font-family: inherit` en el contenedor — la letra la pone el elemento
   de adentro con una regla mas especifica.

   En su `scaffold-row.tsx:19` el rotulo no lleva clase de fuente: hereda la
   del texto. Se apunta a cada elemento por su nombre. */
.paso > summary .paso-rotulo,
.paso > summary .paso-adelanto,
.paso > summary .paso-cuando,
.hizo-una > summary b,
.hizo-una > summary .hizo-sobre,
.hizo-una > summary .hizo-cuando,
.paso-hizo-simple b,
.paso-hizo-simple a {
  font-family: var(--sans, 'Plus Jakarta Sans'), system-ui, sans-serif;
  letter-spacing: 0;
}


/* ══════ EL PENSAMIENTO, APRETADO - pensamiento-apretado ══════
   De `message-parts.tsx:333` del escritorio:
       containerClassName="text-xs leading-snug text-muted-foreground/85"
       text-xs = 12 px · leading-snug = interlinea 1,375

   Lo nuestro estaba en 13 px con interlinea 1,7 — un 24% mas de aire por
   renglon — y ademas `pre-wrap`, que convierte cada salto doble del modelo en
   un renglon vacio entero. */
.paso-piensa .paso-cuerpo .razono {
  font-size: 12px;
  line-height: 1.375;
  white-space: pre-line;
}
.paso-piensa .paso-cuerpo { padding-top: 2px; padding-bottom: 4px; }


/* ══════ LAS FILAS QUE NO ABREN, Y EL PENSAMIENTO - filas-mudas ══════
   La regla de antes apuntaba a `.paso-flecha` y las filas pintan
   `.hizo-flecha`: nunca aplicó. Por eso una fila sin nada llevaba su flechita,
   parecía un botón, uno le daba clic y lo único que pasaba era que el espacio
   se corría. */
.hizo-una.hizo-vacia > summary .hizo-flecha,
.hizo-una.hizo-vacia > summary .paso-flecha { display: none !important; }
.hizo-una.hizo-vacia > summary { cursor: default; }
.hizo-una.hizo-vacia > summary:hover { background: none; }

/* El pensamiento en párrafos, como su `MarkdownTextContent`:
   text-xs = 12 px · leading-snug = interlínea 1,375 */
.razono { font-size: 12px; line-height: 1.375; white-space: normal; }
.razono-p { margin: 0 0 6px; white-space: pre-line; }
.razono-p:last-child { margin-bottom: 0; }


/* ══════ EL CONTENIDO DE UNA FILA - contenido-limpio ══════
   Como el escritorio: el texto con sus renglones, en un cuadro que RUEDA. Un
   `read_file` devuelve el archivo entero, y sin tope empuja la conversación
   fuera de la pantalla — que es lo que se veía en la captura. */
.hizo-detalle {
  max-height: 260px; overflow: auto;
  white-space: pre; tab-size: 4;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
}
/* La cuenta al lado del título: su «6 items». */
.hizo-cuenta {
  flex: none; margin-left: 6px;
  font-size: 10px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
/* Lo demás del paquete, debajo y en chiquito: es de consulta. */
.hizo-aparte { margin-top: 6px; font-size: 11px; opacity: .8; }


/* ══════ EL TITULO LARGO - titulo-puntos ══════
   El escritorio deja el comando entero y lo corta con puntos suspensivos si no
   cabe; nunca lo mocha a la mitad en el texto. */
.hizo-una > summary > b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ══════ LA TARJETA DEL CÓDIGO - tarjeta-codigo ══════
   ⚠️ EL RADIO. `--r-3` son 999px: el redondeo de las PÍLDORAS. La tarjeta lo
   usaba, y al abrirse el navegador reparte esos 999px contra la altura de la
   caja: sale un arco enorme que se monta encima del código. Medido:
       SUMMARY | radio=999px | 930x33
   Va con `--r-2`, que son 7px — redondeo de caja, no de píldora. */
.obra > summary { border-radius: var(--r-2); }
.obra[open] > summary { border-radius: var(--r-2) var(--r-2) 0 0; }
.obra { border-radius: var(--r-2); overflow: hidden; }

/* ══════ LOS RENGLONES NUMERADOS ══════
   Hermes numera lo que LEE («1| 2| 3|…») y por eso en el escritorio se ve
   ordenado; lo que el agente ESCRIBE no viene numerado. La regleta va DENTRO
   del cuadro que rueda y pegada a la izquierda, así baja con el código pero no
   se corre cuando uno rueda de lado. */
.obra-codigo.con-regleta { display: flex; align-items: flex-start; gap: 0; }
.obra-regleta {
  position: sticky; left: 0; z-index: 1; flex: none;
  padding: 0 10px 0 0; margin-right: 10px;
  border-right: 1px solid var(--borde-2);
  background: var(--carta-2);
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  color: var(--txt-3); text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.obra-codigo.con-regleta > code { line-height: 1.55; }


/* ══════ EL ARCO QUE TAPABA EL CODIGO, DE VERDAD - sin-arco ══════
   La primera vez arreglé el ENCABEZADO de la tarjeta y el arco siguió, porque
   no salía de ahí: sale de la línea 1483 del estilo,

       .obra-codigo, .obra-salida { border-radius: 0 0 var(--r-3) var(--r-3) }

   Las esquinas de ABAJO del cuadro de salida con 999px. El navegador reparte
   ese radio contra el alto de la caja, y en una salida larga sale un arco que
   cruza el texto de lado a lado — que es justo lo que se veía.

   La variable --r-3 son 999px, el redondeo de las PÍLDORAS. Una caja de
   texto va con --r-2, que son 7px. */
.obra-codigo, .obra-salida { border-radius: 0 0 var(--r-2) var(--r-2) !important; }
.obra-orden-larga { border-radius: var(--r-2); }
/* Red: dentro de una tarjeta NADA lleva redondeo de píldora. */
.obra > *, .obra > * > * { border-radius: var(--r-2); }
.obra > summary { border-radius: var(--r-2) var(--r-2) 0 0; }
.obra:not([open]) > summary { border-radius: var(--r-2); }


/* ══════ EL PENSAMIENTO, EN SU PROPIO BLOQUE - pensar-aparte ══════
   MEDIDO: el pensamiento iba a 12 px con contraste 7,23 y lo que el agente
   escribe a 15,5 px con 16,27. El contraste nunca fue el problema —7,23 está
   muy por encima del 4,5 de la norma—: el problema es que los dos son texto
   corrido oscuro sobre el mismo fondo, así que el pensamiento se lee como
   prosa, solo que más chica.

   Se separa por FORMA. Bloque de fondo lleno, nunca una rayita al margen. */
.paso-piensa .paso-cuerpo .razono {
  background: var(--carta-2);
  border-radius: var(--r-2);
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.55;
}
.paso-piensa .paso-cuerpo { padding-top: 4px; }
.razono-p { margin: 0 0 7px; }


/* ══════ Y QUE EL BLOQUE SE VEA - pensar-filete ══════
   El relleno solo no alcanzaba: medido, se distinguía del piso 1,05. Toda la
   paleta de superficies es plana a propósito —el tono más separado que hay,
   `--carta-3`, llega a 1,13—. En una paleta plana lo que separa una caja es el
   FILETE, no el relleno. */
.paso-piensa .paso-cuerpo .razono {
  background: var(--carta-3);
  border: 1px solid var(--borde);
}


/* ══════ EL PENSAMIENTO SE SEPARA POR TONO - pensar-tono ══════
   Dos intentos medidos y los dos flojos: relleno `--carta-2` se distinguía del
   piso 1,05; `--carta-3` con filete, 1,13. Y no era cuestión de escoger mejor:
   TODA la paleta de superficies está entre 1,04 y 1,13 contra el piso. Es plana
   a propósito, y en una paleta plana la luminosidad no puede separar una caja.

   Lo que sí separa es el TONO: el ojo distingue un cambio de color aunque las
   dos superficies tengan la misma claridad. Va con el verde de la casa, que ya
   está definido — nada de inventarse un color. */
.paso-piensa .paso-cuerpo .razono {
  background: var(--acento-piso);
  border: 1px solid var(--acento-bord);
}
/* El rótulo y su bloque se leen como una sola cosa. */
.paso-piensa[open] > summary .paso-rotulo { color: var(--acento); }


/* ══════ EL PENSAMIENTO, EN EL CUADRO DE LO INTERNO - pensar-gris ══════
   ⚠️ El verde de antes era el de SUS PROPIOS MENSAJES —medido: burbuja y
   pensamiento quedaron con el mismo fondo rgb(224,247,244) y el mismo filete—.
   O sea que el pensamiento pasó a parecerse a lo que escribe la persona. Peor
   que antes de tocarlo.

   El cuadro que sí se distingue ya existe: el del resultado de una herramienta
   (`.hizo-detalle`, gris con filete). Ese gris ya significa «esto es de la
   máquina, no es la conversación», y el pensamiento es justo eso. Queda un solo
   lenguaje para todo lo interno:

       la persona ..... burbuja verde, 15,5 px
       el agente ...... texto pelado, 15,5 px
       lo interno ..... cuadro gris con filete, chiquito

   La letra se queda en Plus Jakarta Sans: el pensamiento es prosa larga y la
   monoespaciada la vuelve pesada de leer. */
.paso-piensa .paso-cuerpo .razono {
  background: var(--carta-2);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-2);
  padding: 9px 12px;
  font-family: var(--letra);
  font-size: 12.5px;
  line-height: 1.55;
}
/* El rótulo vuelve al gris de los demás: el color se guarda para lo que avisa. */
/* (quitada: hacia que «Penso» se pusiera oscuro al abrirlo, desparejo con las demas filas) */


/* ══════ EL PENSAMIENTO, MAS CLARO - pensar-mas-claro ══════
   Luis pidió aclarar las letras del pensamiento —no achicarlas— para que la
   diferencia con lo que el agente escribe se note. Lo otro que proponía,
   oscurecer el texto del chat, no se puede: ya está en rgb(16,26,40) con
   contraste 16,27, prácticamente negro.

   Se aclara CON PISO, porque aclarar sin medir es como se fabrica un texto
   bonito que nadie puede leer:

       antes ........... #45536B   contraste 6,90
       ahora ........... #55657E   contraste 5,26
       la norma pide ............... 4,50 mínimo

   En el tema oscuro va al revés —ahí «más claro» sería MÁS contraste, que es lo
   contrario—: se usa `--txt-3`, ya medido en 4,90 contra el peor fondo. */
:root { --pensar-txt: #55657E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="hibrido"]) { --pensar-txt: #8DA0B2; }
}
:root[data-tema="oscuro"] { --pensar-txt: #8DA0B2; }
.paso-piensa .paso-cuerpo .razono { color: var(--pensar-txt); }


/* ══════ EL SIMBOLO DE LA FILA - simbolo-fila ══════
   Del escritorio de Hermes: la envoltura es `size-3.5` (14x14), el ícono va a
   `0.875rem` (14 px) y en el color terciario. Una fila cerrada se lee de un
   vistazo porque el símbolo dice qué clase de cosa fue, sin tener que leer. */
.hizo-simbolo {
  display: grid; place-items: center; align-self: center;
  width: 14px; height: 14px; flex: none;
  color: var(--txt-3);
}
.hizo-simbolo svg { width: 14px; height: 14px; }
/* Solo lo que falla lleva color. El éxito es mudo — su misma regla. */
.hizo-simbolo-mal { color: var(--mal); }
.hizo-una.hizo-mal > summary > b { color: var(--mal); }


/* ══════ RESUMIENDO LA CONVERSACION - compactando ══════
   Cuando la conversación se pone larga, Hermes la compacta para que quepa. Eso
   se demora y antes la pantalla se quedaba muda: la persona veía que no pasaba
   nada y creía que se había colgado.

   Se lee como las demás filas internas —chiquita y gris, sin caja— porque es un
   paso del trabajo, no un aviso de error. El punto late para que se note que
   algo está pasando. */
.compactando {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 2px;
  font-size: 11px; color: var(--txt-3);
}
.compactando > i {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--txt-3); animation: latir 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .compactando > i { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL RENGLÓN DE ESTADO - obrando

   Reemplaza los tres puntitos que latían sin decir nada. Tres piezas, las
   mismas del escritorio de Hermes (`thread/status.tsx:141`):

       un pulso  ·  el nombre de la espera, si lo tiene  ·  un reloj

   El pulso es CUADRADO —regla de la casa: puntas rectas— y del azul de la
   marca, para que se lea como «esto está vivo» y no como chrome apagado.
   El rótulo se queda con todo el ancho sobrante y el reloj se va al extremo,
   igual que allá (`min-w-0 flex-1 truncate` contra `shrink-0`).
   ══════════════════════════════════════════════════════════════════════════ */
.obrando {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 2px; min-width: 0;
}
.obrando-pulso {
  flex: none; width: 8px; height: 8px;
  background: var(--acento);
  animation: obrando-latir 1.5s ease-in-out infinite;
}
/* ⚠️ `flex: 0 1 auto`, NO `1 1 auto`. El escritorio estira el rótulo y manda el
   reloj al extremo (`flex-1` contra `shrink-0`), pero allá el hilo es angosto.
   Acá el chat mide 1.100 px y MEDIDO en la foto el reloj quedaba a ~700 px del
   texto: se leía como dos cosas sueltas, no como un renglón. Así se encoge solo
   cuando de verdad no cabe, y las tres piezas viajan juntas.
   `min-width: 0` es lo que deja que ese recorte ocurra. */
.obrando-que {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--txt-2);
}
.obrando-que[hidden] { display: none; }
/* Los dígitos alineados: sin esto el reloj brinca de ancho en cada segundo. */
.obrando-reloj {
  flex: none; font-size: 11px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
/* ⚠️ El piso es 0,40, no 0,28. Medido en la foto: a 0,28 el cuadradito se
   perdía contra el fondo claro en la mitad de cada latido y el renglón parecía
   apagado justo cuando más importa que se vea vivo. */
@keyframes obrando-latir {
  0%, 100% { opacity: .40; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .obrando-pulso { animation: none; opacity: .85; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA BITÁCORA - bit-comunes · bit-paginas

   Los atajos de arriba son las acciones que más se repiten: sirven para
   filtrar sin tener que adivinar cómo se llama nada por dentro. Con su
   contador al lado, que es lo que dice cuál vale la pena mirar.
   ══════════════════════════════════════════════════════════════════════════ */
.bit-comunes { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 14px; }
.bit-comun {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; font-size: 12px;
  background: var(--carta-2); color: var(--txt-2);
  border: 1px solid var(--borde); cursor: pointer;
  font-family: var(--letra);
}
.bit-comun:hover, .bit-comun:focus-visible { background: var(--carta-3); color: var(--txt); }
.bit-comun span {
  font-size: 11px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
.bit-paginas {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  flex-wrap: wrap;
}
.bit-paginas:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LAS TAREAS PROGRAMADAS - cron-fila

   Cada tarea es una ficha, no un renglón de tabla: hay que leer de un vistazo
   qué hace, cuándo, y cómo le fue la última vez. Puntas rectas, y el rojo
   guardado para lo único que de verdad es un problema: que falló.
   ══════════════════════════════════════════════════════════════════════════ */
.cron-fila {
  display: grid; gap: 5px;
  padding: 13px 15px; margin-bottom: 10px;
  background: var(--carta-2); border: 1px solid var(--borde);
}
.cron-quien { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cron-quien b { font-size: 14px; }
.cron-cuando { font-size: 13px; color: var(--txt-2); }
.cron-que { font-size: 12.5px; color: var(--txt-3); }
.cron-datos {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--txt-3);
}
/* Una pausada NO se esconde: se atenúa. Esconderla sería justo el problema que
   esta ventana viene a arreglar. */
.cron-fila.pausada { opacity: .68; }
.cron-fila.fallo { border-color: var(--mal); }
.cron-falla { font-size: 12px; color: var(--mal); }
.cron-botones { display: flex; gap: 8px; margin-top: 6px; }
.cron-nueva { margin-top: 16px; }
/* Los formatos del horario: el motor solo entiende cuatro, y decirlos acá es
   lo único que evita que la persona escriba «todos los lunes» y le rebote. */
.cron-ayuda { margin-top: 10px; line-height: 1.7; }
.cron-ayuda b { font-family: var(--mono); font-size: 12px; color: var(--txt); }
.cron-nueva > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--acento);
  padding: 6px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA LISTA DE HABILIDADES - hab-lista

   Son NOVENTA. En una columna serían noventa renglones y un rodadero eterno;
   en rejilla de ancho automático caben tres o cuatro por fila y se barren de
   un vistazo. Con tope de alto y su propio rodadero, para que la tarjeta no
   empuje el resto de la pantalla fuera de la vista.
   ══════════════════════════════════════════════════════════════════════════ */
.hab-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 14px;
  max-height: 340px; overflow: auto;
  border: 1px solid var(--borde); padding: 10px 12px;
  background: var(--carta-2);
}
.hab {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 5px 2px; font-size: 13px; cursor: pointer;
}
.hab input { flex: none; width: 15px; height: 15px; accent-color: var(--acento); cursor: pointer; }
/* El nombre de la habilidad se recorta, no parte la rejilla. */
.hab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Apagada: se atenúa, pero se sigue leyendo. Es una lista para escoger, no un
   sitio donde esconder cosas. */
.hab:has(input:not(:checked)) span { color: var(--txt-3); }

/* ══════════════════════════════════════════════════════════════════════════
   LA CAJA DEL ALMA - alma-caja

   Un texto largo que la persona va a leer y editar de verdad, no un campito.
   Alto generoso, se puede estirar hacia abajo pero no hacia los lados —crecer
   a lo ancho rompería la tarjeta— y letra de la casa: es prosa, no código.
   ══════════════════════════════════════════════════════════════════════════ */
.alma-caja {
  width: 100%; min-height: 300px; resize: vertical;
  font-family: var(--letra); font-size: 13.5px; line-height: 1.6;
  padding: 12px 14px;
}
.alma-pie {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  flex-wrap: wrap;
}
/* El único color con significado es el rojo, y solo cuando algo salió mal. */
.alma-pie .sec.mal { color: var(--mal); }
#alma-quienes { margin: -6px 0 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   UNA PREGUNTA DE VARIAS RESPUESTAS - escogida

   Hermes marca la pregunta con `multi_select` —«¿cuáles de estas sedes
   incluyo?»— y hasta hoy la persona solo podía escoger UNA. La opción marcada
   tiene que leerse como marcada de un vistazo, sin depender del color: lleva
   fondo lleno del acento y su letra encima.
   ══════════════════════════════════════════════════════════════════════════ */
.pregunta-opcion.escogida {
  background: var(--acento); border-color: var(--acento);
  color: var(--sobre-acento, #FFFFFF);
}
.pregunta-opcion.escogida .pregunta-letra {
  background: rgba(255, 255, 255, .22); color: inherit;
}
.pregunta-pista { margin: 8px 0 0; font-size: 12px; color: var(--txt-3); }
.pregunta-listo { margin-top: 10px; }
.pregunta-listo:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   LAS FUENTES DE UNA BÚSQUEDA - fuentes

   Buscar en internet es la segunda herramienta más usada y salía como un
   volcado de JSON cortado. Acá va como lista: el título es el enlace, al lado
   el dominio para saber de dónde es sin leer la dirección entera, y debajo el
   resumen en dos renglones.

   Sin viñetas y sin numeritos: son fuentes, no pasos de una receta. El orden
   ya lo dice el buscador.
   ══════════════════════════════════════════════════════════════════════════ */
.fuentes {
  display: grid; gap: 12px;
  margin: 0 0 12px; padding: 0; list-style: none;
  /* ⚠️ LA FUENTE, EXPLÍCITA. Medido en la foto: las fuentes salían en
     tipografía de código, heredada de la caja del volcado, y se leían como un
     listado técnico en vez de como resultados de búsqueda. Acá la letra es la
     de la casa porque esto es para LEER, no para inspeccionar. */
  font-family: var(--letra);
}
.fuentes, .fuente, .fuente-tit, .fuente-donde, .fuente-res {
  font-family: var(--letra);
}
.fuente { display: grid; gap: 2px; min-width: 0; }
.fuente-tit {
  font-size: 13px; font-weight: 600; color: var(--acento);
  text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.fuente-tit:hover, a.fuente-tit:focus-visible { text-decoration: underline; }
.fuente-donde { font-size: 11px; color: var(--txt-3); }
/* Dos renglones y corta: el resumen orienta, no reemplaza a la fuente. */
.fuente-res {
  margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--txt-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA PREGUNTA O EL PERMISO QUE SE VENCIÓ - vencida

   La pasarela se cansó de esperar y el turno siguió sin la respuesta. La
   tarjeta NO se borra: borrarla dejaría a la persona sin entender qué pasó con
   lo que estaba a punto de contestar. Se apaga, se traban los botones y se
   dice por qué.
   ══════════════════════════════════════════════════════════════════════════ */
.vencida { opacity: .62; }
.vencida button, .vencida input, .vencida select { cursor: not-allowed; }
.vencida-nota {
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid var(--borde);
  font-size: 12px; color: var(--txt-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA TARJETA DE LOS AYUDANTES - paso-ayudantes

   Cuando el agente reparte el trabajo. Por cada ayudante DOS renglones —quién
   es arriba, qué está haciendo abajo—, igual que el escritorio
   (`tool/delegate.tsx`), de modo que repartir a cinco cuesta diez renglones
   pase lo que pase el hijo.

   ⚠️ SOBRE EL COLOR, regla de la casa: el único color con significado es el
   ROJO, y solo cuando hay un problema. El que terminó bien NO va verde — va
   con su visto en el tono normal del texto. El azul del que trabaja no es
   semáforo: es el azul de la marca diciendo «esto está vivo», el mismo del
   pulso del renglón de estado.

   ⚠️ SOBRE LAS PUNTAS: todo recto menos los glifos de estado, que caen en la
   excepción que ya estaba escrita (el puntico de estado del lateral). Un
   anillo que gira no se puede hacer cuadrado.
   ══════════════════════════════════════════════════════════════════════════ */
.ayu-cuerpo { display: grid; gap: 10px; padding-top: 2px; }

.ayu-fila { display: grid; gap: 2px; min-width: 0; }

.ayu-quien { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ── la meta: es lo que identifica al ayudante, así que manda el ancho ── */
.ayu-meta {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--txt);
}
.ayu-modelo {
  flex: none; font-size: 11px; color: var(--txt-3);
}
.ayu-modelo[hidden] { display: none; }
.ayu-reloj {
  flex: none; font-size: 11px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

/* ── la última cosa que hizo, debajo y corrida a la derecha ── */
.ayu-hace {
  padding-left: 22px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--txt-3);
}
/* Cuando ya terminó, lo de abajo es su ENTREGA, no lo que está haciendo: se
   deja leer en dos renglones en vez de recortarse. */
.ayu-hace-fin {
  white-space: normal; overflow: visible;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  color: var(--txt-2);
}

/* ══ LOS GLIFOS DE ESTADO ══ */
.ayu-punto {
  flex: none; width: 13px; height: 13px; position: relative;
  display: inline-block;
}

/* trabajando — un anillo que gira. Es «los iconitos se mueven». */
.ayu-vivo .ayu-punto {
  border: 2px solid var(--borde);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: ayu-girar .9s linear infinite;
}
@keyframes ayu-girar { to { transform: rotate(360deg); } }

/* en cola — el mismo anillo, quieto y apagado: todavía no arranca. */
.ayu-espera .ayu-punto {
  border: 2px solid var(--borde); border-radius: 50%;
}

/* sigue por fuera y nadie lo mira — un puntico quieto. NO gira a propósito:
   girar prometería una vigilancia que en ese caso no tenemos. */
.ayu-suelto .ayu-punto::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--txt-3); border-radius: 50%;
}

/* listo — un visto, en el tono del texto. Sin verde: el color se guarda
   para los problemas. */
.ayu-listo .ayu-punto::after {
  content: ''; position: absolute;
  left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid var(--txt-2); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* falló o se cortó — una equis, y esta SÍ va roja. */
.ayu-malo .ayu-punto::before,
.ayu-malo .ayu-punto::after {
  content: ''; position: absolute; left: 1px; top: 5px;
  width: 11px; height: 2px; background: var(--mal, #DC2626);
}
.ayu-malo .ayu-punto::before { transform: rotate(45deg); }
.ayu-malo .ayu-punto::after  { transform: rotate(-45deg); }
.ayu-malo .ayu-meta { color: var(--mal, #DC2626); }

@media (prefers-reduced-motion: reduce) {
  .ayu-vivo .ayu-punto { animation: none; border-top-color: var(--acento); }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL AVISO DEL SISTEMA - aviso-sistema

   Por esta puerta entran dos cosas que antes no se veían NUNCA: el arranque en
   frío del agente —que puede esperar hasta 600 s— y los avisos del saldo al
   50, 75 y 90 %. Hasta hoy, la primera señal de que se acabó el saldo era que
   el chat dejaba de contestar.

   Va en la línea del turno, como «Resumiendo la conversación…», porque es parte
   de lo que está pasando. Con fondo lleno —nada de rayita al lado— y con el
   punto de 7 px, que es la excepción redonda que la casa sí permite.
   ══════════════════════════════════════════════════════════════════════════ */
.aviso-sistema {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 12px; margin: 5px 0;
  background: var(--carta-2); border: 1px solid var(--borde);
  font-size: 13px; line-height: 1.45; color: var(--txt);
}
.aviso-sistema > i {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  margin-top: 6px; background: var(--acento);
}
.aviso-sistema > span { min-width: 0; }
/* El único color con significado es el rojo, y solo cuando hay un problema de
   verdad: saldo agotado o el agente que no pudo arrancar. */
.aviso-sistema.grave {
  background: var(--mal-piso); border-color: var(--mal); color: var(--mal);
}
.aviso-sistema.grave > i { background: var(--mal); }



/* ══════ EL MEDIDOR DEL CONTEXTO - medidor-contexto ══════
   Hermano del medidor del plan y justo debajo, porque responden preguntas
   distintas: el plan dice cuánto ha gastado la empresa este mes; este, cuánto
   le cabe todavía a la conversación abierta. */
.medidor-contexto {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 0; margin-top: 7px;
  cursor: pointer; font: inherit; color: inherit;
}
.medidor-contexto:hover #p-contexto { color: var(--txt-2); }
.medidor-contexto .medidor-riel > i { background: var(--txt-3); }

/* El desglose: en qué se está yendo. Es lo que hace útil el número — sin él uno
   ve «2%» y no aprende nada. */
.contexto-detalle { margin-top: 7px; display: grid; gap: 5px; }
.ctx-parte {
  position: relative; display: flex; align-items: baseline; gap: 6px;
  font-size: 10.5px; color: var(--txt-3);
  padding-bottom: 4px;
}
.ctx-parte > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-parte > b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
/* La barrita de cada parte: bloque de fondo lleno, nunca una rayita al margen. */
.ctx-parte > i {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--txt-3); opacity: .45; border-radius: 1px;
}


/* ══════ EL MEDIDOR DEL CONTEXTO - medidor-contexto ══════
   Hermano del medidor del plan y justo debajo, porque responden preguntas
   distintas: el plan dice cuánto ha gastado la empresa este mes; este, cuánto
   le cabe todavía a la conversación abierta. */
.medidor-contexto {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 0; margin-top: 7px;
  cursor: pointer; font: inherit; color: inherit;
}
.medidor-contexto:hover #p-contexto { color: var(--txt-2); }
.medidor-contexto .medidor-riel > i { background: var(--txt-3); }

/* El desglose: en qué se está yendo. Es lo que hace útil el número — sin él uno
   ve «2%» y no aprende nada. */
.contexto-detalle { margin-top: 7px; display: grid; gap: 5px; }
.ctx-parte {
  position: relative; display: flex; align-items: baseline; gap: 6px;
  font-size: 10.5px; color: var(--txt-3);
  padding-bottom: 4px;
}
.ctx-parte > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-parte > b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
/* La barrita de cada parte: bloque de fondo lleno, nunca una rayita al margen. */
.ctx-parte > i {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--txt-3); opacity: .45; border-radius: 1px;
}


/* ══════ EL PIE DEL MENU, LEGIBLE - pie-menu ══════
   MEDIDO en el menú oscuro:
       los medidores y los botones .... contraste 6,51
       las conversaciones ............. contraste 12,84
   Los 6,51 pasan la norma (4,5), pero al lado de un 12,84 se ven lavados: el
   ojo no juzga contra la norma, juzga contra lo que tiene al lado. Se suben al
   tono que ya usan las conversaciones, que es el del menú. */
.aside-pie #p-consumo,
.aside-pie #p-contexto,
.aside-pie .aside-btn { color: var(--menu-txt); }
.aside-pie #p-consumo,
.aside-pie #p-contexto { color: var(--menu-txt-2); opacity: 1; }
.aside-pie .aside-btn:hover { opacity: 1; }

/* Y el renglón no se parte: si algún día el texto crece, se corta con puntos
   en vez de empujar el menú hacia abajo. */
#p-consumo, #p-contexto {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* El total del desglose, que es el número que se le quitó al renglón. */
.ctx-total {
  font-size: 10.5px; font-weight: 600; opacity: .9;
  padding-bottom: 2px;
}


/* ══════ Y LOS MEDIDORES, A UN PUNTO INTERMEDIO - pie-medidores ══════
   Medido despues del primer intento:
       los botones del menu ... 14,12
       los medidores .......... 6,51   ← seguian lavados al lado
   Los medidores ya estaban en el tono secundario del menu, asi que apuntarles
   ese mismo color no cambiaba nada. Van al tono claro con algo de velo: quedan
   por encima del 6,51 sin competirle al titulo de las conversaciones, que es lo
   que uno viene a leer. */
.aside-pie #p-consumo,
.aside-pie #p-contexto { color: var(--menu-txt); opacity: .86; }


/* ══════ EL DESGLOSE, CON LOS COLORES DEL MENU - desglose-menu ══════
   ⚠️ El desglose vive DENTRO del menu, que es oscuro, pero estaba pintado con
   `--txt-3`, que es del CONTENIDO —el area clara—. Por eso se veia apagado ahi
   adentro. Es el mismo error de antes: usar la paleta del contenido dentro del
   menu. Va con los tonos del menu, que es donde esta. */
.contexto-detalle .ctx-parte { color: var(--menu-txt); opacity: .78; }
.contexto-detalle .ctx-parte > b { opacity: 1; }
.contexto-detalle .ctx-parte > i { background: var(--menu-txt); opacity: .30; }
.contexto-detalle .ctx-total { color: var(--menu-txt); opacity: .95; }


/* ══════ EL CONTEXTO, EN LA BARRA DE ARRIBA - ctx-arriba ══════
   Salió del menú porque le quitaba renglones a la lista de conversaciones
   —medido: con el desglose abierto el pie pasaba de 145 a 311 px— y porque es
   un dato de LA CONVERSACIÓN, no de la cuenta.

   Acá es una pastilla chiquita al lado de los otros botones: dice el porcentaje
   y se abre para ver en qué se está yendo. */
.ctx-caja { position: relative; }
.ctx-boton {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--borde-2); border-radius: var(--r-2);
  background: var(--carta); color: var(--txt-2);
  font-family: var(--letra); font-size: 11.5px; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ctx-boton:hover { background: var(--carta-2); color: var(--txt); }
.ctx-boton[aria-expanded="true"] { background: var(--carta-2); color: var(--txt); }
/* La barrita: llena, nunca una rayita al margen. */
.ctx-riel {
  display: block; width: 34px; height: 4px; flex: none;
  border-radius: 2px; background: var(--borde); overflow: hidden;
}
.ctx-riel > i { display: block; height: 100%; width: 0; background: var(--acento); }

/* El desglose cuelga del botón, no empuja nada. */
.barra-der .contexto-detalle {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 260px; padding: 11px 12px;
  border: 1px solid var(--borde-2); border-radius: var(--r-2);
  background: var(--carta); box-shadow: var(--sombra-2);
  display: grid; gap: 6px;
}
.barra-der .ctx-parte { color: var(--txt-2); opacity: 1; font-size: 11.5px; }
.barra-der .ctx-parte > b { color: var(--txt); }
.barra-der .ctx-parte > i { background: var(--acento); opacity: .40; }
.barra-der .ctx-total { color: var(--txt); opacity: 1; font-size: 11.5px; }


/* ══════ EL MENU, ALINEADO - menu-pulido ══════
   MEDIDO: cuatro sangrías distintas —10, 14, 18 y 20 px— porque cada bloque
   traía la suya. Es lo que hace que un menú se vea «sin pulir» aunque cada
   pieza esté bien por separado: el ojo busca una columna y encuentra cuatro.

   Ahora hay DOS columnas y solo dos:
       14 px → el borde de todo bloque (botones, filas, medidor)
       24 px → el TEXTO, que es 14 + el icono + su espacio

   El rótulo de grupo se alinea con el TEXTO, no con el icono: rotula lo que
   uno lee, no la columna de símbolos. */
.aside-lista { padding: 0 14px 10px; }
.medidor { padding: 10px 0 12px; }
.aside-titulillo { padding: 16px 0 6px 10px; }

/* ══════ Y UNA ESCALA DE TRES, NO DE CINCO ══════
   Sobraban dos tamaños de UN SOLO elemento cada uno: «Nueva conversación» en
   14,5 px y el medidor del plan en 11,5. Un tamaño que usa una sola cosa no es
   una escala, es lo que quedó. */
#b-nueva, #b-nueva span { font-size: 14px; }
.conv-mas, .conv-mas span { font-size: 14px; }
.aside-pie #p-consumo, .aside-pie #p-contexto { font-size: 11px; }

/* ══════ EL AIRE ENTRE GRUPOS ══════
   El rótulo traía 14 px arriba y 8 abajo: quedaba flotando entre los dos
   grupos en vez de pertenecer al de abajo. Con más arriba que abajo, se lee
   como lo que es — el encabezado de lo que sigue. */
.aside-titulillo:first-child { padding-top: 4px; }

/* ══════ LA FILA, UN POCO MAS DE SITIO PARA EL TITULO ══════
   Los títulos los escribe el agente solo y son largos. Se le devuelven un par
   de píxeles apretando lo que no se lee. */
.aside-lista .conv { padding: 9px 8px; gap: 8px; }


/* ══════ QUE EL ESPACIO RINDA - menu-denso ══════
   MEDIDO antes: de 1.050 px de pantalla, la lista se quedaba con 600 y el pie
   con 257 —el 24%— para cinco botones. Cada conversación medía 40 px para una
   línea de 14: casi el triple de lo que la letra ocupa. Cabían 12.

   ⚠️ El mínimo de la norma para algo que se toca son 24×24 px. Se baja a 32,
   que deja margen de sobra y sigue siendo cómodo con el dedo. */

/* La fila: 40 → 32. Es el cambio que más rinde, porque se multiplica por todas. */
.aside-lista .conv,
.conv-fila .conv { min-height: 32px; padding: 6px 8px; }
.conv-fila { min-height: 32px; }
.conv-mas { min-height: 32px; }

/* El rótulo de grupo: no necesita 27 px para cinco letras. */
.aside-titulillo { padding: 12px 0 4px 10px; line-height: 1.1; }
.aside-titulillo:first-child { padding-top: 2px; }

/* El pie: los botones también a 32, y menos aire alrededor. Son cinco, así que
   cada píxel que se les quita vale por cinco. */
.aside-pie { padding: 8px 14px 10px; }
.aside-pie .aside-btn { min-height: 32px; padding: 6px 8px; }
.medidor { padding: 4px 0 8px; }

/* Y la cabeza, que también tenía aire de sobra encima del botón. */
.aside-cabeza { padding: 12px 14px 10px; }


/* ══════ LA FILA DE LA CUENTA - aside-cuenta ══════
   Reemplaza cuatro renglones fijos por uno. MEDIDO: el pie se llevaba 215 px de
   1.050 —el 20% de la pantalla— para cinco botones que se tocan una vez al día.
   Lo que se recupera se lo queda la lista de conversaciones, que es a lo que
   uno entra. */
.aside-cuenta {
  display: flex; align-items: center; gap: 9px; width: 100%;
  min-height: 34px; padding: 6px 8px; margin-top: 2px;
  background: transparent; border: 0; border-radius: var(--r-2);
  color: var(--menu-txt); font-family: var(--letra); font-size: 14px;
  text-align: left; cursor: pointer;
}
.aside-cuenta:hover { background: var(--menu-2); }
/* Las iniciales: bloque de fondo lleno, nunca una rayita al margen. */
.cuenta-ini {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--r-2);
  background: var(--menu-3, var(--menu-2)); color: var(--menu-txt);
  font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: .02em;
}
.aside-cuenta > span {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cuenta-mas { flex: none; font-style: normal; color: var(--menu-txt-2); }

/* Los dos botones que la fila de la cuenta reemplaza: siguen en la pagina
   para que sus manejadores funcionen, pero no se ven. */
.escondido-siempre { display: none !important; }


/* ══════ LOS QUE VIVEN EN EL MENU DE LA CUENTA - en-el-menu ══════
   ⚠️ DOS CLASES, DOS RESPONSABILIDADES. Antes los escondí con `.oculto`, que es
   justo la clase que la aplicación QUITA cuando la persona tiene permiso — así
   que se volvían a mostrar como renglones sueltos, lo contrario de lo buscado.

       `.oculto`     → dice si la persona PUEDE. La maneja la aplicación.
       `.en-el-menu` → dice que ese botón vive en el menú, no en el pie.

   El menú sigue leyendo `.oculto` para saber a quién mostrarle qué; esta otra
   lo saca del pie pase lo que pase. */
.aside-pie .aside-btn.en-el-menu { display: none !important; }


/* ══════ LOS CAMPOS DE UN FORMULARIO, EN LINEA - campos-alineados ══════
   La causa de que se vieran desparejos era una línea: `.rejilla2` traía
   `align-items: end`, o sea que alineaba las celdas POR ABAJO. El campo con
   ayuda debajo empujaba su rótulo hacia arriba y el que no la tenía quedaba más
   abajo: con cuatro campos y dos ayudas, cuatro alturas distintas.

   Ahora cada campo es una rejilla de tres renglones —rótulo, entrada, ayuda— y
   la ayuda reserva su renglón aunque esté vacía. Los rótulos quedan en una
   línea, las entradas en otra y las ayudas en otra.

   ⚠️ Esto alinea TODOS los formularios que usan `.rejilla2`, no solo el de las
   claves. Es a propósito: alinear por abajo estaba mal en todos. */
.rejilla2 { align-items: start; }
.rejilla2 > .campo {
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 6px;
  margin-bottom: 0;
}
.rejilla2 > .campo > span:first-child { margin-bottom: 0; }
.rejilla2 > .campo .pista { margin-top: 0; min-height: 17px; }
/* El campo sin ayuda reserva el renglón igual, para que la fila de abajo
   —el botón, la tabla— empiece pareja. */
.rejilla2 > .campo:not(:has(> .pista))::after {
  content: ''; display: block; min-height: 17px;
}


/* ══════ Y TODOS DEL MISMO ALTO - campos-parejos ══════
   Con los rótulos y las entradas ya en línea quedaba lo último: los campos
   medían 107, 94 y 104 px según llevaran ayuda o no, así que lo que va DEBAJO
   del formulario —el botón, la tabla— arrancaba disparejo.

   align-items:stretch les da a todos el alto del más alto, y
   align-content:start mantiene el contenido arriba. Una sola línea de
   rótulos, una de entradas, y todos del mismo alto. */
.rejilla2 { align-items: stretch; }
.rejilla2 > .campo { align-content: start; }


/* ══════ EL PENSAMIENTO, SIN CUADRO - pensar-sin-cuadro ══════
   Como el escritorio de Hermes, que lo pinta como texto pelado
   (`message-parts.tsx:333`, con `MarkdownTextContent` y sin caja).

   ⚠️ Yo le había puesto un cuadro. Fue un error mío de lectura: Luis pidió que
   se DISTINGUIERA por color, y ya estaba acordado que iba sin cajas. La
   diferencia va donde él la pidió y donde el escritorio la deja — en el tamaño
   y en el color:

       el pensamiento .... 12,5 px · más claro
       lo que escribe .... 15,5 px · casi negro */
.paso-piensa .paso-cuerpo .razono {
  background: none;
  border: 0;
  padding: 0;
}


/* ══════ EL PENSAMIENTO, MAS SUAVE TODAVIA - pensar-mas-suave ══════
   Luis: «bájale más el color».

   Se baja hasta donde se puede sin volverlo ilegible. La norma pide 4,50 de
   contraste como mínimo para texto, y este queda en 4,81: es lo más suave que
   se puede dejar sin quedar por debajo.

       antes ............ #55657E   contraste 5,25
       ahora ............ #5F6E86   contraste 4,81
       el piso de la norma ........ 4,50

   ⚠️ Más abajo de 4,50 ya no se lee bien con luz de día ni en una pantalla
   mala, y el pensamiento es texto largo — no un rótulo de dos palabras. */
:root { --pensar-txt: #5F6E86; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="hibrido"]) { --pensar-txt: #7C8CA0; }
}
:root[data-tema="oscuro"] { --pensar-txt: #7C8CA0; }


/* ══════ MAS CLARO TODAVIA - pensar-claro-luis ══════
   Luis lo pidió más claro y es su producto. Queda en #7E8CA2, que da 3,17 de
   contraste — un tercio menos que el 4,81 anterior, así que el cambio SÍ se ve.

   ⚠️ Queda por debajo del 4,50 de la norma. Se lo dije una vez y él decidió;
   no se vuelve a subir por cuenta propia. Si algún día alguien reclama que no
   alcanza a leer el pensamiento, la razón está acá y el color es esta línea. */
:root { --pensar-txt: #7E8CA2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="hibrido"]) { --pensar-txt: #67748A; }
}
:root[data-tema="oscuro"] { --pensar-txt: #67748A; }


/* ══════ LOS RENGLONES CERRADOS, MAS CLAROS - rotulos-claros ══════
   Luis reclamaba que no veia el cambio, y tenia razon: yo estaba aclarando el
   texto de ADENTRO del pensamiento, que solo se ve al abrir «Penso». Lo que el
   mira todo el tiempo son los renglones CERRADOS —«Penso 3 s», «Ejecuto 1
   comando», «Corrio ...»— y esos seguian al 64% de opacidad, o sea contraste
   5,1: mas oscuros que el texto que yo venia bajando.

       antes ..... 64% de opacidad · contraste ~5,1
       ahora ..... 42%             · contraste ~3,2
       las duraciones, de 44% a 32%

   Asi todo lo interno —los rotulos, las filas y el pensamiento— queda en el
   mismo tono suave, y lo unico oscuro es lo que el agente le escribe. */
.paso > summary .paso-rotulo,
.hizo-una > summary b,
.paso-hizo-simple b,
.paso > summary .paso-adelanto,
.hizo-una > summary .hizo-sobre,
.hizo-una > summary,
.paso-hizo-simple {
  color: color-mix(in srgb, var(--txt) 42%, transparent);
}
.paso > summary .paso-cuando,
.hizo-una > summary .hizo-cuando,
.paso-hizo-simple .paso-cuando,
.hizo-cuenta {
  color: color-mix(in srgb, var(--txt) 32%, transparent);
}


/* ══════ UN POQUITO MAS OSCURO, LOS DOS - pensar-un-poquito ══════
   Luis: «ahora oscurecelo todo un poquito, lo de afuera del pensamiento y lo de
   adentro». Un punto para arriba en los dos, sin volver a lo de antes:

       los renglones cerrados ... 42% → 54%   (venian de 64%)
       las duraciones ........... 32% → 40%
       el pensamiento adentro ... #7E8CA2 → #74829A

   Lo que el agente le escribe NO se toca: ese es el unico que va oscuro, y la
   diferencia entre lo interno y lo dicho es lo que hace que la pantalla se lea. */
.paso > summary .paso-rotulo,
.hizo-una > summary b,
.paso-hizo-simple b,
.paso > summary .paso-adelanto,
.hizo-una > summary .hizo-sobre,
.hizo-una > summary,
.paso-hizo-simple {
  color: color-mix(in srgb, var(--txt) 54%, transparent);
}
.paso > summary .paso-cuando,
.hizo-una > summary .hizo-cuando,
.paso-hizo-simple .paso-cuando,
.hizo-cuenta {
  color: color-mix(in srgb, var(--txt) 40%, transparent);
}
:root { --pensar-txt: #74829A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="hibrido"]) { --pensar-txt: #76849A; }
}
:root[data-tema="oscuro"] { --pensar-txt: #76849A; }


/* ══════ «PENSO» NO CAMBIA AL ABRIRLO - penso-parejo ══════
   Habia DOS reglas viejas peleandose por ese rotulo: una lo ponia verde al
   abrirlo (de cuando probe separar el pensamiento por color) y otra la anulaba
   con , que lo dejaba oscuro. Medido: «Penso» salia en 6,53 de
   contraste mientras las demas filas estaban en 4,50 — desparejo.

   Ahora es el mismo tono de las demas, abierto o cerrado. Que un rotulo cambie
   de color al abrirlo no dice nada util: para eso esta la flecha. */
.paso-piensa > summary .paso-rotulo,
.paso-piensa[open] > summary .paso-rotulo {
  color: color-mix(in srgb, var(--txt) 54%, transparent);
}


/* ══════ LA CAJA DEL CONTEXTO, ESCONDIDA DE VERDAD - ctx-fantasma ══════
   MEDIDO: un recuadro blanco de 260x24 px, vacío, a 1128,60 — visible desde
   que uno entra, sin haber tocado nada.

   El HTML la marca `hidden` y el JavaScript la abre y la cierra con esa misma
   marca. Pero `.barra-der .contexto-detalle { display: grid }` es una regla de
   clase, y una clase le gana a la regla del navegador para `[hidden]`. Así que
   la marca no hacía nada y la caja nunca se escondía.

   Se dice una sola vez, y le gana a las dos declaraciones de arriba. */
.contexto-detalle[hidden],
.barra-der .contexto-detalle[hidden] { display: none; }


/* ══════ LA FLECHITA DE LA FILA - flecha-de-la-fila ══════
   MEDIDO con el estilo calculado, en las 5 filas de un turno:
       .hizo-flecha ... display=block  opacidad=1  ancho=0 px
       .paso-flecha ... (la de la tanda)           ancho=10 px

   Cero. La fila dibuja `<i class="hizo-flecha">` y todo el estilo de la
   flechita —el tamaño, los dos bordes que forman el ángulo, el giro— estaba
   escrito para `.paso-flecha`, que la fila no usa. Nunca aplicó.

   Sin flechita la fila se lee como texto pelado y no hay cómo saber que abre.
   En el escritorio de Hermes la fila cerrada SÍ la muestra, y por eso allá uno
   ve de una que puede abrirla.

   Va 1 px más chica que la de la tanda: es un nivel más adentro, y la jerarquía
   también se lee en el tamaño de los signos. */
.hizo-una > summary .hizo-flecha {
  flex: none; width: 6px; height: 6px;
  border-right: 1.5px solid var(--txt-3); border-bottom: 1.5px solid var(--txt-3);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.hizo-una[open] > summary .hizo-flecha { transform: rotate(45deg); }
/* Y la que no abre sigue sin llevarla — «a bare, unexpandable row». */
.hizo-una.hizo-vacia > summary .hizo-flecha { display: none; }


/* ══════ EL MENU QUE SE ABRE SOBRE EL LATERAL - menu-oscuro ══════
   MEDIDO con el estilo calculado, pieza por pieza:

                            el lateral        el menú encima
       fondo .............  #0E1B30           #FFFFFF  blanco
       letra .............  #E3E9F2           #101A28  casi negro
       radio de la caja ..  7 px              10 px
       alto de una fila ..  34 px             40 px
       sangría de fila ...  6px 8px           9px 12px
       radio de fila .....  7 px              6 px

   Siete diferencias: no es que «no combine», es otro diseño pegado encima.

   Acá toma las MISMAS variables del lateral y las MISMAS medidas de sus filas.
   Ni un color inventado: `--menu-2` es el tono que el lateral ya usa para lo
   que se levanta, `--menu-3` el del borde y el paso del mouse. */
.menu-flotante.menu-oscuro {
  background: var(--menu-2);
  border: 1px solid var(--menu-3);
  border-radius: var(--r-2);
  padding: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 18px 44px rgba(0, 0, 0, .38);
}
/* La fila del menú es LA MISMA fila del lateral: 34 px, 6px 8px, radio 7. */
.menu-flotante.menu-oscuro button {
  min-height: 34px; padding: 6px 10px;
  border-radius: var(--r-2);
  color: var(--menu-txt); font-size: 14px;
}
.menu-flotante.menu-oscuro button:hover,
.menu-flotante.menu-oscuro button:focus-visible { background: var(--menu-3); }

/* ⚠️ El rojo de «Borrar» también cambia: el de la zona clara es #A32B22 —un
   rojo oscuro— y sobre azul marino no se lee. Se usa el que el programa ya
   tiene para fondo oscuro. */
.menu-flotante.menu-oscuro button.peligro { color: #E5877C; }
.menu-flotante.menu-oscuro button.peligro:hover,
.menu-flotante.menu-oscuro button.peligro:focus-visible {
  background: rgba(229, 135, 124, .14);
}

/* En el celular las filas vuelven a 44 px para poder tocarlas con el dedo —es
   la regla que ya existe arriba para todo menú flotante. */
@media (max-width: 760px) {
  .menu-flotante.menu-oscuro button { min-height: 44px; }
}


/* ══════ LA SANGRIA DEL MENU - menu-columna ══════
   MEDIDO: el texto del menú arrancaba en 30 px del borde de la pantalla, con
   la caja del menú puesta en 14 — los mismos 14 en que arranca todo bloque del
   lateral. Dieciséis píxeles de sangría para una lista de cuatro palabras.

   La caja suelta su sangría lateral y la fila se la queda: el texto cae en 23,
   un solo paso adentro del borde del menú, y el resaltado del mouse ocupa el
   ancho entero, como en cualquier menú del sistema.

   ⚠️ No se alinea con el título de una conversación, que arranca en 48: esos
   48 son 14 + la sangría + el ícono de la fila + su espacio, y el menú no tiene
   íconos. Ponerle 34 px de aire a la izquierda para cuadrar con una columna de
   símbolos que no existe se vería peor, no mejor. Lo que sí comparte con el
   lateral —y es lo que se nota— es el borde izquierdo en 14 y el ancho. */
.menu-flotante.menu-oscuro { padding: 4px 0; }
.menu-flotante.menu-oscuro button { padding: 7px 8px; border-radius: 0; }


/* La nota que Hermes pega después del paquete —«use offset=50 to see more»—.
   Va debajo del texto y en chiquito: es de consulta. */
.hizo-nota {
  margin-top: 6px; font-size: 11.5px; line-height: 1.45;
  color: var(--txt-3); white-space: pre-wrap;
}


/* ══════ EL PENSAMIENTO QUE YA TERMINÓ PERO SIGUE A LA VISTA - piensa-adelanto ══════
   Es el `isPreview` del escritorio (`thread/message-parts.tsx`): mientras nadie
   lo ha tocado, el bloque se queda abierto pero con el alto recortado, para que
   un razonamiento largo no se coma la pantalla.

   ⚠️ Los mismos 230 px que la caja ya usaba mientras pensaba, no otros. Con dos
   recortes distintos la caja daría un brinco justo al terminar de pensar, que
   es el defecto que su propio comentario describe: «that is the "turn settled
   and everything jumped" shift». */
.piensa-adelanto .paso-cuerpo { max-height: 230px; overflow-y: auto; }


/* ══════ LAS COSTURAS QUE SE ARRASTRAN - sash ══════
   El ancho del menú y el del panel ya vivían en dos variables que usa la
   rejilla de `#app` (`--menu-ancho`, `--panel-ancho`). Lo único que faltaba era
   poder moverlas.

   Es el «sash» del escritorio (`app/master-detail.tsx`), medida por medida:

       el agarre .... 10 px, corrido medio ancho para quedar ENCIMA de la
                      costura, no al lado. Allá son 4 px porque es una
                      aplicación de escritorio con trackpad; en una página del
                      navegador 4 px se fallan.
       la rayita .... 2 px, invisible en reposo y del color de la marca al
                      pasar el mouse o mientras se arrastra
       el cursor .... `col-resize`, que es lo que le dice a la persona que eso
                      se mueve antes de que lo intente

   ⚠️ `position: absolute` es lo que las mantiene FUERA de la rejilla. Como
   hijas normales de `#app` habrían contado como columnas y habrían partido el
   armazón en dos filas. */
#app { position: relative; }
.sash {
  position: absolute; top: 0; bottom: 0; z-index: 45;
  width: 10px; transform: translateX(-50%);
  padding: 0; border: 0; background: none;
  cursor: col-resize; touch-action: none;
}
.sash-menu  { left: var(--menu-ancho); }
.sash-panel { left: calc(100% - var(--panel-ancho)); }
.sash > i {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: transparent; transition: background .15s ease;
}
.sash:hover > i,
.sash:focus-visible > i,
.sash.sash-vivo > i { background: var(--acento); }
/* El foco se ve en la rayita, que es la pieza; un recuadro alrededor de una
   tira de 10 px de ancho y toda la altura de la pantalla se ve como un error. */
.sash:focus-visible { outline: none; }
.sash:focus-visible > i { width: 3px; }

/* Mientras se arrastra, el cursor no cambia al pasar por encima del texto y
   nada se selecciona sin querer. */
body.sash-arrastrando, body.sash-arrastrando * { cursor: col-resize !important; }
body.sash-arrastrando { user-select: none; }

/* La del panel solo existe cuando el panel está abierto. */
#app:not(.con-panel) .sash-panel { display: none; }
/* ⚠️ Y con el menú colapsado no hay nada que arrastrar: manda el botón de
   achicar, que es anterior y explícito. */
#app.aside-chico .sash-menu { display: none; }
/* En el celular la rejilla es de una sola columna: no hay costuras. */
@media (max-width: 760px) { .sash { display: none; } }


/* ══════════════════════════════════════════════════════════════════════════
   EL MENÚ LATERAL: CONTRASTE, JERARQUÍA Y AIRE - menu-diseno

   Todo medido contra el azul del menú, #0E1B30, con la relación de contraste
   de la norma. Umbrales: 4,5 : 1 texto corriente · 3,0 : 1 un ícono.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════ 1. LOS BOTONES DE LA CABEZA USABAN LA PALETA CLARA ══════
   MEDIDO:
       #b-colapsar · #b-tema ....... #45536B   2,22 : 1   << bajo el umbral
       al pasar el mouse ........... fondo #EDF2F7 · letra #101A28
                                     — un bloque CASI BLANCO en pleno menú azul

   `.icono-btn` toma `--txt-2`, `--carta-2` y `--txt`: los colores de la zona
   clara. En el chat blanco funcionan; dentro del menú marino no. Es el mismo
   error del menú flotante, arreglado en v238.

   ⚠️ Se corrige SOLO dentro de `#aside`. El mismo botón en la barra de arriba
   —donde el fondo sí es claro— se queda como está. */
#aside .icono-btn { color: var(--menu-txt-2); }
#aside .icono-btn:hover,
#aside .icono-btn:focus-visible {
  background: var(--menu-2);
  color: var(--menu-txt);
}
#aside .icono-btn:focus-visible { border-color: var(--menu-3); }

/* ══════ 2. LA JERARQUÍA DE LA LISTA ══════
   MEDIDO: el título de una conversación, la hora de esa misma fila y el rótulo
   HOY/AYER estaban los TRES en #93A0B4, 6,51 : 1. Lo que uno lee y lo que uno
   solo ojea, pintados igual.

   Por eso la lista se ve «apagada» aunque ninguno incumpla la norma: no falta
   contraste, falta DIFERENCIA. Queda una escala de tres pasos:

       la fila activa .... #FFFFFF   17,24 : 1
       el título ......... #C7D3E3   11,38 : 1   ← sube desde 6,51
       la hora, HOY/AYER . #93A0B4    6,51 : 1   ← se queda: es dato

   ⚠️ El ícono de cada fila también se queda abajo. Son 21 íconos iguales en
   columna: si suben con el título, vuelven a competir con lo que hay que leer. */
.aside-lista .conv { color: #C7D3E3; }
.aside-lista .conv-cuando,
.aside-lista .conv > svg,
.aside-lista .conv .conv-icono { color: var(--menu-txt-2); }
.conv-fila:hover .conv { color: var(--menu-txt); }
.conv-fila.viva .conv { color: #fff; }

/* ══════ 3. EL LOGO Y EL AIRE DE LA CABEZA ══════
   MEDIDO: el logo arrancaba en x=14 y el texto de las conversaciones en x=22,
   con 12 px de aire arriba y 61 px de alto total. Una marca con MENOS aire que
   el texto que va debajo se lee como un descuido.

   El logo pasa a arrancar en 22 — la misma columna por la que baja todo el
   texto de la lista — y la cabeza recibe el aire vertical que le faltaba.

   ⚠️ Con el menú colapsado no: ahí el logo va centrado en 68 px de ancho y una
   sangría de 8 lo descuadraría. */
.aside-cabeza { padding: 18px 14px 16px; }
#app:not(.aside-chico) .aside-logo { padding-left: 8px; }


/* ══════ EL PUNTICO DE «FIJADA» SE COMÍA MEDIA FILA - pin-no-crece ══════
   MEDIDO, hijo por hijo:

       una fila corriente   svg ......... x=22  ancho=18
                            el título ... x=48  ancho=115
       la fila FIJADA       .conv-pin ... x=22  ancho=93   << debía medir 17
                            el título ... x=123 ancho=93   << debía arrancar en 48

   Por eso el título de la fila fijada salía corrido al centro, como si
   estuviera centrado a propósito.

   La causa: el punto ES un `<span>`, así que le cae `.conv span { flex: 1 }`
   (línea 305), que pesa más que `.conv-pin { flex: none }` (línea 697) — dos
   partes contra una. Los íconos de las demás filas se salvaron porque son
   `<svg>` y tienen su propia regla que empata en peso (línea 308).

   Acá el punto recibe una regla del mismo peso que la de los íconos. */
.conv > .conv-pin { flex: none; width: 18px; }   /* 18, no 17: es el ancho del ícono de las demás filas, y así el título arranca en la misma columna */

/* ══════ MÁS BLANCAS - letras-blancas ══════
   Luis: «que esas letras sean más blancas». Los títulos suben a #EDF2F9 y los
   datos —la hora, HOY/AYER— suben con ellos para que nada quede gris al lado. */
.aside-lista .conv { color: #EDF2F9; }
.aside-lista .conv-cuando,
.aside-titulillo,
.aside-lista .conv > svg { color: #B6C2D4; }

/* ══════ LO QUE QUEDABA APAGADO - aclarar-lo-que-falta ══════
   Luis: «te dije que la aclares esa también». Faltaban tres textos, medidos
   contra el marino del menú (#0E1B30):
       el marcador de «Buscar una conversación» ... #93A0B4  6,51 : 1
       los rótulos AYER / ESTA SEMANA ............. #93A0B4  6,51 : 1
       las fechas «25 de ago» ..................... #93A0B4  6,51 : 1
   Suben a #B6C2D4, 9,4 : 1 — un paso por debajo del título, que va en 15,33, y
   muy por encima de donde estaban. */
.aside-buscar input::placeholder { color: #B6C2D4; }
.aside-buscar svg { color: #B6C2D4; }
.aside-titulillo { color: #B6C2D4; }

/* ══════ LOS TRES PUNTOS, VERTICALES - puntos-verticales ══════
   Luis: «que son 3 puntos de manera vertical, ocupa menos, no horizontal».
   Cierto y medible: «⋯» ocupa el ancho de tres caracteres en línea; «⋮» ocupa
   uno. En una fila de 209 px, eso es ancho que le vuelve al título. */
.conv-mas > span, .cuenta-mas { letter-spacing: 0; }
/* ══════════════════════════════════════════════════════════════════════════════
   EL MENÚ LATERAL, DE UNA SOLA PASADA — «riel-14»            27-ago-2026
   ------------------------------------------------------------------------------
   Va AL FINAL de estilo.css, pero NO depende del orden: todo se apunta con
   `#aside` (1-x-0) o `#app #aside` (2-x-0), así que gana por ID. Se hace así a
   propósito: el lateral ya tiene 13 bloques de parche repartidos en 9 regiones
   del archivo, con CUATRO paddings de .aside-cabeza peleándose entre ellos
   (:275, :1278, :2870, :3322) y dos de esos cuatro son decisiones OPUESTAS
   firmadas las dos como medidas. Mientras se parche por abajo, cada arreglo
   nuevo apaga en silencio uno viejo — que es exactamente lo que Luis está
   viendo cuando dice que las letras siguen feas después de haberlas aclarado.

   COMPROBADO EN EL NAVEGADOR ANTES DE ESCRIBIRLO:
     · 102 reglas escritas, 102 aceptadas por Chromium, 0 selectores descartados
     · el marcador del buscador YA estaba en #B6C2D4 (8,62:1) desde :3361;
       el color de esos textos ya se subió DOS veces y no alcanzó. Acá el
       arreglo de la queja B es de TAMAÑO, PESO, LETRA y SUPERFICIE.
     · el «⋮» YA es U+22EE en app.js:557 y en index.html:160. Pero U+22EE NO
       está en ningún unicode-range de Plus Jakarta Sans ni de JetBrains Mono
       (leído en /marca/fuentes.css): hoy lo pinta la fuente de respaldo del
       sistema. Por eso se DIBUJA, no se escribe.
     · en app.js:543 el punto de «fijada» REEMPLAZA al ícono (es un ternario),
       no convive con él: por eso no se reserva ninguna columna a la izquierda.

   Contrastes con la fórmula WCAG 2.1 contra el marino #0E1B30, o contra
   #16243C cuando el texto va sobre el campo del buscador o sobre un menú.
   No hay un solo color acá sin su número.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── LAS FICHAS DEL MENÚ ───────────────────────────────────────────────────────
   Dentro de #aside conviven hoy CINCO alturas de fila (32, 34, 38, 40 y 44) y
   CINCO tamaños de ícono (15, 17, 18, 19 y 22), sin una sola variable: son los
   restos de tres escalas superpuestas —la original de 40, la densa de 32 y la
   de formulario de 44 que #b-nueva heredó sin querer—. La única ficha que el
   lateral compartía era --r-2.

   La tinta es UNA, en tres niveles (los tres pasan AAA contra el marino):
     --m1 #EDF2F9  15,33:1  LO QUE SE LEE ...... título de la conversación
     --m2 #C9D6E6  11,69:1  LO QUE SE ACCIONA .. rótulos, marcador, pie, mandos
     --m3 #B6C2D4   9,57:1  EL DATO ............ hora, medidor, encabezado de menú

   La marca pasa por las variables de MARCA BLANCA: app.js:142-146 reescribe
   --marca-acento-claro y --marca-sobre-acento-claro por empresa, y son las que
   el programa calcula para superficie oscura. Sin empresa configurada cae en el
   turquesa DGNOVA #00D9C0 con letra marina = 9,59:1. Clavar el hexadecimal acá
   le borraría el color a los clientes de marca blanca.                        */
#aside{
  --m-fila:32px; --m-icono:15px; --m-canal:6px; --m-sangria:8px;
  --m1:#EDF2F9; --m2:#C9D6E6; --m3:#B6C2D4;
  --m-sup:#16243C; --m-viva:#1E3A5C; --m-linea:#22304A;
  --m-marca:var(--marca-acento-claro, #00D9C0);
  --m-sobre-marca:var(--marca-sobre-acento-claro, #0E1B30);
}

/* ══ A · EL LOGO ═══════════════════════════════════════════════════════════════
   El logo era lo ÚNICO del lateral sangrado a 22 px: los otros cinco bloques
   arrancan en 14. El comentario de estilo.css:3317 justifica los 22 diciendo
   que es «la misma columna por la que baja todo el texto de la lista» — es
   falso: el texto de la lista arranca en 48. Los 22 eran la columna del ÍCONO.
   Y el PNG no tiene aire de sobra: 290x84 con la tinta de (1,1) a (288,82), o
   sea 1 px por lado. No se ve chico: se ve CORRIDO.
   La cabeza suelta su sangría (baja al canal de 6) y el logo se queda con la
   suya de 8: la tinta cae en 14, el mismo riel del título de una conversación.
   Y baja de 30 a 26 px porque a 30 se llevaba 103,6 px = 38,6% del ancho del
   menú, más que el título de una conversación.
   Va con `#app #aside` (2-1-0) para ganarle al 1-2-0 de estilo.css:3323.      */
#app #aside .aside-cabeza{
  display:flex; align-items:center; gap:0;
  min-height:46px; height:46px; padding:0 var(--m-canal);
  border-bottom:1px solid var(--m-linea);
}
#app #aside .aside-logo{ padding-left:var(--m-sangria); margin-right:auto; flex:0 1 auto; min-width:0; }
#app #aside #logo-lateral{
  display:block; height:26px; width:auto; max-width:132px;
  object-fit:contain; object-position:left center;
}

/* ══ E · LOS DOS BOTONES DE LA CABEZA ══════════════════════════════════════════
   La causa es UNA línea: .aside-cabeza tenía justify-content:space-between con
   TRES hijos, así que el sobrante se repartía entre los DOS huecos y los
   botones quedaban tan separados entre sí como del logo — nunca se leían como
   una pareja, se leían como tres objetos sueltos. Con margin-right:auto en el
   logo el sobrante se va todo de un lado y los dos quedan pegados, formando un
   solo mando segmentado.
   Y llevan FONDO (regla 3): hoy son `background: transparent` Y
   `border: 1px solid transparent`, o sea botones fantasma. El bloque de
   estilo.css:3271 les arregló el COLOR pero no les puso fondo ni los agrupó.
   Colapsar es NAVEGACIÓN, no acción: no se esconde hasta el hover.            */
#aside .aside-cabeza .icono-btn{
  width:28px; height:28px; min-height:0; flex:0 0 28px; padding:0;
  display:grid; place-items:center;
  background:var(--m-sup); border:1px solid var(--m-linea);
  color:var(--m2);                      /* 10,54:1 sobre #16243C — hoy #93A0B4 = 6,51:1 */
  border-radius:0;
  transition:background .12s ease, color .12s ease;
}
#aside .aside-cabeza #b-colapsar{ border-radius:var(--r-2) 0 0 var(--r-2); border-right-width:0; }
#aside .aside-cabeza #b-tema{ border-radius:0 var(--r-2) var(--r-2) 0; }
#aside .aside-cabeza .icono-btn svg{ width:16px; height:16px; }
#aside .aside-cabeza .icono-btn:hover{ background:var(--m-viva); color:var(--m1); transition:none; }

/* ══ D · NUEVA CONVERSACIÓN ════════════════════════════════════════════════════
   Los 44 px no eran una decisión de diseño: #b-nueva hereda min-height:44px de
   .btn (estilo.css:251), que es la medida del «Entrar» de la pantalla de
   entrada. El bloque de densidad de estilo.css:2845 («QUE EL ESPACIO RINDA»)
   bajó .conv, .aside-btn, .medidor y .aside-cabeza a 32 px y SE SALTÓ #b-nueva
   y .aside-zona: es lo único del menú que quedó en la escala vieja.

   ⚠️ EL COLOR NO SE CAMBIA PORQUE INCUMPLA LA NORMA — no la incumple: blanco
   sobre #0B7F72 da 4,89:1 (pasa AA) y el fondo contra el marino da 3,52:1
   (pasa el 3:1 de un elemento no textual). Se cambia por DOS razones:
     1. #0B7F72 se eligió y se midió contra BLANCO — lo dice el comentario de
        estilo.css:45 — y es el acento de la ZONA CLARA metido dentro del menú
        marino;
     2. --acento cambia solo a #2FD9C6 con el tema oscuro (estilo.css:93), y el
        lateral es marino en TODOS los temas: su acento no puede depender del
        tema del área de trabajo.
   El ícono cae en 14 y la etiqueta en 44, los mismos rieles del buscador y del
   pie. Hoy el texto arranca en 68 porque va centrado: es la novena columna de
   arranque del menú y no coincide con ninguna otra.                           */
#aside .aside-zona{ padding:6px var(--m-canal) 4px; }
#aside #b-nueva{
  display:flex; align-items:center; justify-content:flex-start; gap:15px;
  width:100%; height:var(--m-fila); min-height:var(--m-fila);
  padding:0 var(--m-sangria); border:0; border-radius:var(--r-2);
  background:var(--m-marca); color:var(--m-sobre-marca);   /* 9,59:1 en el turquesa de fábrica */
  font-weight:700; letter-spacing:.005em;
  box-shadow:none; transition:filter .12s ease;
}
#aside #b-nueva, #aside #b-nueva span{ font-size:13.5px; }
#aside #b-nueva svg{ width:var(--m-icono); height:var(--m-icono); flex:none; }
/* El mismo color un 8% más claro: no se inventa un segundo turquesa que en
   marca blanca no querría decir nada. */
#aside #b-nueva:hover{ background:var(--m-marca); filter:brightness(1.08); transition:none; }
#aside #b-nueva:active{ transform:none; filter:brightness(.94); }

/* ══ B (1 de 3) · EL MARCADOR DEL BUSCADOR ═════════════════════════════════════
   ⚠️ ACÁ NO SE ACLARA NADA POR TERCERA VEZ. estilo.css:3361 YA lo subió a
   #B6C2D4 = 8,62:1, que es AAA de sobra, y Luis sigue reclamando. Lo que pasa
   es que el marcador, el rótulo, la hora y el ícono quedaron TODOS pintados con
   el mismo gris: el propio archivo lo había diagnosticado en el comentario de
   :3291 («no falta contraste, falta DIFERENCIA») y montado una escala de tres
   pasos, y los bloques :3345 y :3353 la aplanaron de vuelta.
   Sube UN nivel, al de «lo que se acciona», y el campo baja de 41,6 a 32 px.
   El opacity:1 es obligatorio: Firefox le mete .54 al ::placeholder por su
   cuenta, y volveríamos a lo mismo que le pasa a la fecha aquí abajo.
   Lupa de 15 px en left:8 → tinta en 14; texto en 6+1(borde)+37 = 44.        */
#aside .aside-buscar{ margin:0 var(--m-canal) 4px; }
#aside .aside-buscar input{
  height:var(--m-fila); min-height:var(--m-fila);
  padding:0 10px 0 37px; font-size:13.5px;
  color:var(--m1); background:var(--m-sup);
  border:1px solid var(--m-linea); border-radius:var(--r-2);
}
#aside .aside-buscar svg{ left:var(--m-sangria); width:var(--m-icono); height:var(--m-icono); color:var(--m3); }
#aside .aside-buscar input::placeholder{ color:var(--m2); opacity:1; }   /* 10,54:1 sobre #16243C */
#aside .aside-buscar input:focus{ border-color:var(--m-marca); }

/* ══ C · LA FRANJA MUERTA DEL BORDE ════════════════════════════════════════════
   Barrido de 2 px contando solo tinta: los tramos vacíos eran 0-22, 42-48,
   216-232 y 246-268 = 66 px. El truco no es quitar el margen —la tinta se
   pegaría al borde y se ve barato—: es que el margen lo ponga la FILA y no el
   contenedor. La tinta no se mueve (sigue en 14) pero el bloque de fondo de la
   fila arranca ahora en 6, así que el resaltado del mouse y la fila abierta
   ganan 16 px de ancho sin que ninguna letra se acerque al borde.             */
#aside .aside-lista{ padding:0 var(--m-canal) 8px; scrollbar-width:thin; scrollbar-color:#2A3B57 transparent; }

/* ── La barra de desplazamiento, que hoy es casi blanca ───────────────────────
   La regla global de estilo.css:152 es `*::-webkit-scrollbar-thumb` y pinta el
   pulgar con var(--borde) #D6DEE8: sobre el marino da 12,70:1, casi tanto como
   los títulos que uno viene a leer, y al pasar el mouse BAJA a 2,88:1 porque
   los dos colores se escogieron para una página blanca. Nadie lo había visto
   porque esa regla está a 3.200 líneas del bloque del lateral.                */
#aside .aside-lista::-webkit-scrollbar{ width:8px; }
#aside .aside-lista::-webkit-scrollbar-track{ background:transparent; }
#aside .aside-lista::-webkit-scrollbar-thumb{ background:#2A3B57; border:0; border-radius:var(--r-2); background-clip:padding-box; }   /* 1,53:1 */
#aside .aside-lista:hover::-webkit-scrollbar-thumb{ background:#46587A; background-clip:padding-box; }                                  /* 2,41:1 — ahora SUBE */

/* ⚠️ `grid-template-columns: minmax(0,1fr)` NO es adorno. Un ítem de rejilla
   trae `min-width: auto`, o sea que su mínimo es el CONTENIDO; con títulos de
   `white-space: nowrap` la pista se estira a lo que mida el título más largo y
   el menú se desborda. Medido sin esta línea: el título salía en 425,8 px
   dentro de un lateral de 268 y NINGUNO se cortaba con puntos. */
#aside #lista-conv{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; }

/* ══ B (2 de 3) · AYER / ESTA SEMANA ═══════════════════════════════════════════
   El contraste ya estaba bien: 9,57:1, AAA de sobra. Lo que se ve apagado es el
   TAMAÑO — 10,5 px en versalitas monoespaciadas con 1,26 px de tracking contra
   títulos de 14 px sans es un salto del 25%. Pasa a la letra de la casa, 11,5 px
   peso 700 y la mitad de tracking.
   La regla de pelo de la derecha llena la franja que quedaba vacía al lado del
   rótulo —hasta 190 px en «HOY»—, que es la queja C otra vez.                 */
#aside .aside-titulillo{
  display:flex; align-items:center; gap:var(--m-sangria);
  height:26px; min-height:26px; margin:2px 0 0;
  padding:0 var(--m-sangria);
  font-family:var(--letra); font-size:11.5px; font-weight:700;
  line-height:1.1; letter-spacing:.06em; text-transform:uppercase;
  color:var(--m2);                      /* 11,69:1 — sube desde 9,57 y, sobre todo, sube de tamaño */
}
#aside .aside-titulillo::after{ content:""; flex:1 1 auto; height:1px; background:var(--m-linea); }   /* 1,31:1: se ve, no compite */
#aside .aside-titulillo:first-child{ margin-top:0; }

/* ══ G · EL ANCHO DEL TÍTULO ═══════════════════════════════════════════════════
   Se le quitan a la fila las dos cosas que NO informan:
     · el ícono i-chat: app.js:543 pinta `icono('i-chat')` para las 194 filas
       sin excepción — 17 px + 8 de gap por fila, 194 veces, para un dibujo
       idéntico que no distingue una conversación de otra;
     · los 30 px que .conv-mas reserva SIEMPRE (opacity no saca del flujo).
   El estado achicado no se toca porque estilo.css:1286 esconde la lista entera
   a 68 px; el `:not(.aside-chico)` va por si algún día se muestra.            */
#app:not(.aside-chico) #aside .aside-lista .conv > svg{ display:none; }
/* `position: relative` es el ancla del ⋮ absoluto. `min-width: 0` es lo que
   deja que la fila se encoja dentro de la pista de la rejilla. */
#aside .conv-fila{ position:relative; min-width:0; min-height:var(--m-fila); border-radius:var(--r-2); transition:background .12s ease; }
#aside .aside-lista .conv, #aside .conv-fila .conv{
  display:flex; align-items:center; gap:0; width:100%;
  min-height:var(--m-fila); padding:0 var(--m-sangria);   /* 6 del canal + 8 = 14: el riel */
  border-radius:var(--r-2); background:none;
}
/* ⚠️ `span:not([class])` y no `> span`: el título es el ÚNICO span sin clase.
   `.conv-pin` (app.js:543) y `.conv-trozo` (app.js:424) también son span, y con
   `> span` les caería el `flex: 1` — que es justo el defecto que estilo.css:1550
   describe para el pedacito de la búsqueda.
   `line-height: 20px` y no 1: con interlineado 1 la caja de línea iguala el
   cuadratín y `overflow: hidden` le rebana la tinta alta y baja a los glifos. */
#aside .aside-lista .conv > span:not([class]){
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14px; line-height:20px; color:var(--m1);      /* 15,33:1 */
}
/* La reserva del ⋮ solo donde no hay hora que tapar (50 de 194 filas): esas ya
   tienen 217 px de título, pueden pagar 30. Donde SÍ hay hora, el ⋮ se le
   superpone y no pide una columna nueva. */
#aside .aside-lista .conv:not(:has(.conv-cuando)){ padding-right:30px; }
/* El pedacito de las que se encuentran «por dentro». Su sangría de 26 px
   (estilo.css:1567) copiaba a mano la suma «svg 17 + gap 8»; cuando el gap bajó
   a 8 en :2842 el 26 se quedó quieto y quedó 1 px corrido. Sin ícono, la
   sangría correcta es 0: el trozo va debajo del título, en su columna. */
#aside .aside-lista .conv.con-trozo{ flex-wrap:wrap; padding-top:5px; padding-bottom:5px; }
#aside .aside-lista .conv.con-trozo .conv-trozo{ order:12; flex:0 0 100%; margin:3px 0 0; }

/* ══ B (3 de 3) · LA FECHA «25 ago» ════════════════════════════════════════════
   Acá SÍ había un defecto de color, y es de cascada. estilo.css:1922 le pone
   `opacity: .85` y el bloque «MÁS BLANCAS» de :3349 le sube el COLOR a #B6C2D4
   1.430 líneas después. Un color no le gana a un opacity porque no compiten:
   son propiedades distintas. El color efectivo mezclado contra el marino es
   #9DA9BB = 7,25:1. Con opacity:1 el color que ya estaba escrito por fin se ve.
   `tabular-nums` alinea las cifras en columna hacia abajo: en 144 filas eso se
   nota más que cualquier color.                                               */
#aside .aside-lista .conv-cuando{
  order:10; flex:none; margin-left:var(--m-sangria); opacity:1;
  font-family:var(--mono); font-size:11px; font-style:normal;
  font-variant-numeric:tabular-nums; color:var(--m3);     /* 9,57:1 de verdad, no 7,25 disfrazado */
  transition:opacity .12s ease;
}

/* ── La marca de «fijada»: punto de 7 px, nunca una rayita ────────────────────
   ⚠️ En app.js:543 el punto REEMPLAZA al ícono (es un ternario), así que no
   hace falta reservarle una columna a la izquierda: se va al FINAL con `order`
   y no le cuesta un solo píxel a las 144 filas que no están fijadas. Redondo y
   turquesa: bloque de color lleno, que es lo que la regla 2 pide.
   No se esconde en la fila abierta: una conversación abierta tiene que seguir
   diciendo que está fijada.                                                    */
#aside .aside-lista .conv > .conv-pin{
  order:11; flex:none; width:7px; height:7px; min-width:0;
  margin-left:var(--m-sangria); display:grid; place-items:center;
  transition:opacity .12s ease;
}
#aside .aside-lista .conv > .conv-pin::before{ width:7px; height:7px; border-radius:50%; background:var(--m-marca); }

/* ── Dónde estoy ──────────────────────────────────────────────────────────────
   La conversación abierta se marca hoy con #1B3350: contra el marino da 1,34:1,
   o sea que con luz de día o en un monitor mal calibrado casi no se ve.
   Bloque de fondo LLENO y 16 px más ancho que antes; ni una rayita de acento.
   Los tiempos son asimétricos a propósito: el resaltado entra en 0 ms y se
   desvanece en 120. Si la entrada también se demorara, recorrer 194 filas se
   sentiría pastoso.                                                            */
#aside .conv-fila:hover{ background:var(--m-sup); transition:none; }              /* 1,11:1 */
#aside .conv-fila.viva{ background:var(--m-viva); }                               /* 1,49:1 — hoy 1,34:1 */
#aside .conv-fila.viva:hover{ background:var(--m-viva); }
#aside .conv-fila.viva .conv > span:not([class]){ color:#fff; font-weight:600; }  /* 11,57:1 sobre #1E3A5C */

/* ══ H · LOS TRES PUNTOS, VERTICALES DE VERDAD ═════════════════════════════════
   El carácter YA es U+22EE en app.js:557 y en index.html:160, y YA hubo un
   bloque que lo arregló (estilo.css:3365) — y Luis sigue reclamando. Quedan dos
   cosas:
     1. U+22EE NO está en ningún unicode-range de Plus Jakarta Sans ni de
        JetBrains Mono (leído en /marca/fuentes.css): hoy ese glifo lo pinta la
        fuente de RESPALDO del sistema, distinta en Windows, Mac y Android;
     2. la CAJA: 30x34 px para un glifo de 14, más 16 px muertos a su izquierda.
   Dibujado con un punto de 3 px y dos sombras a ±5 px queda idéntico en toda
   máquina y no depende de qué carácter esté escrito. `font-size:0` más
   `> * { display:none }` esconden el glifo sea cual sea.
   Y al ser absoluto no le quita NI UN PÍXEL al título: se superpone a la hora,
   que se desvanece. El mouse encima cambia QUÉ se ve, nunca CUÁNTO mide la
   fila — cero reflujo al recorrer la lista.
   ⚠️ `opacity: 0` SIGUE recibiendo clics; `pointer-events: none` no.          */
#aside .conv-mas, #aside #b-cuenta-menu .cuenta-mas{
  position:absolute; top:50%; right:5px; transform:translateY(-50%);
  width:22px; height:22px; min-height:0; min-width:0; flex:none;
  padding:0; margin:0; display:grid; place-items:center;
  background:transparent; border:0; border-radius:6px;
  font-size:0; line-height:0; color:var(--m2);   /* 11,69:1 sobre marino · 7,85:1 sobre la fila abierta (hoy 4,85:1, el peor del menú) */
  transition:opacity .12s ease, background .12s ease, color .12s ease;
}
#aside .conv-mas > *, #aside #b-cuenta-menu .cuenta-mas > *{ display:none; }
#aside .conv-mas::before, #aside #b-cuenta-menu .cuenta-mas::before{
  content:""; width:3px; height:3px; border-radius:50%;
  background:currentColor; box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor;
}
#aside .conv-mas{ opacity:0; pointer-events:none; }
#aside .conv-fila:hover .conv-mas,
#aside .conv-fila:focus-within .conv-mas,
#aside .conv-fila.menu-abierto .conv-mas{ opacity:1; pointer-events:auto; transition:none; }
/* El ⋮ ocupa el sitio de la hora y del punto, no uno nuevo. */
#aside .conv-fila:hover .conv-cuando,
#aside .conv-fila:hover .conv > .conv-pin,
#aside .conv-fila:focus-within .conv-cuando,
#aside .conv-fila:focus-within .conv > .conv-pin,
#aside .conv-fila.menu-abierto .conv-cuando,
#aside .conv-fila.menu-abierto .conv > .conv-pin{ opacity:0; }
#aside .conv-mas:hover, #aside .conv-fila.menu-abierto .conv-mas{ background:#2A3B57; color:var(--m1); }
/* En la fila de la cuenta se quedan permanentes: son el único indicio de que
   eso abre un menú. */
#aside #b-cuenta-menu .cuenta-mas{ opacity:1; color:var(--m3); }

/* ══ EL PIE ════════════════════════════════════════════════════════════════════
   140,4 px = 4,08 filas de conversación para tres cosas que se tocan una vez al
   día, y lo más alto de todo era el medidor del plan, que es un dato que ni se
   toca. Y los dos botones son transparentes: se leen como texto suelto, que es
   lo que la regla 3 prohíbe.
   ⚠️ El riel del medidor conserva su `background: var(--degradado)` de
   estilo.css:323 — el azul→turquesa ES la marca DGNOVA. Acá solo se le baja el
   alto; cambiarlo por un color plano sería una regresión de marca.
   Ícono en 14 y texto en 44, los mismos rieles del buscador y del botón nuevo.
   El hueco es 15 px con el ícono de 15 y 8 px con el avatar de 22, porque lo
   que el ojo sigue hacia abajo es la columna del TEXTO, no la del hueco.      */
#aside .aside-pie{ padding:6px var(--m-canal) 8px; gap:3px; border-top:1px solid var(--m-linea); }
#aside .medidor{ padding:2px var(--m-sangria) 6px; }
#aside .medidor-riel{ height:4px; }
#aside .medidor p, #aside .aside-pie #p-consumo{ margin:5px 0 0; font-size:11px; line-height:1.3; color:var(--m3); }   /* 9,57:1 — es dato */
#aside .aside-pie .aside-btn{
  display:flex; align-items:center; gap:15px; width:100%;
  height:var(--m-fila); min-height:var(--m-fila); padding:0 7px;   /* 6 + 1 de borde + 7 = 14 */
  background:var(--m-sup); border:1px solid var(--m-linea); border-radius:var(--r-2);
  color:var(--m2); font-size:13.5px;                                /* 10,54:1 sobre #16243C */
  transition:background .12s ease, color .12s ease;
}
#aside .aside-pie .aside-btn svg{ width:var(--m-icono); height:var(--m-icono); flex:none; color:var(--m3); }
#aside .aside-pie .aside-btn:hover{ background:var(--m-viva); color:var(--m1); transition:none; }
#aside .aside-pie .aside-btn:hover svg{ color:var(--m1); }

/* La fila de la cuenta: el avatar en 14, el nombre en 44 — la misma columna del
   texto de «Mis archivos» y de los renglones del menú que abre. Los 30 px de
   padding derecho son el sitio del ⋮ absoluto. */
#aside #b-cuenta-menu{
  position:relative; display:flex; align-items:center; gap:var(--m-sangria);
  width:100%; height:34px; min-height:34px; padding:0 30px 0 7px; margin:0;
  background:var(--m-sup); border:1px solid var(--m-linea); border-radius:var(--r-2);
  text-align:left; transition:background .12s ease;
}
#aside #b-cuenta-menu:hover{ background:var(--m-viva); transition:none; }
/* Las iniciales en el color de la empresa: es el segundo y último bloque de
   marca del lateral —el otro es «Nueva conversación»— y quedan uno arriba y
   otro abajo, que es lo que le da eje a la columna. */
#aside #b-cuenta-menu .cuenta-ini{
  width:22px; height:22px; flex:none; border-radius:var(--r-2);
  display:grid; place-items:center;
  background:var(--m-marca); color:var(--m-sobre-marca);   /* 9,59:1 de fábrica */
  font-size:10px; font-weight:700; font-style:normal;
}
#aside #p-quien{ flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600; color:var(--m1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── EL FOCO ──────────────────────────────────────────────────────────────────
   `outline-offset` NEGATIVO es obligatorio: dentro de un contenedor con
   `overflow: auto` un recuadro por fuera se corta contra el borde de la lista y
   el foco de teclado desaparece justo en las filas de arriba y de abajo.      */
#aside .conv:focus-visible, #aside .conv-mas:focus-visible,
#aside .icono-btn:focus-visible, #aside .aside-btn:focus-visible,
#aside #b-nueva:focus-visible, #aside #b-cuenta-menu:focus-visible,
#aside .aside-buscar input:focus-visible{
  outline:2px solid var(--m-marca); outline-offset:-2px; border-radius:var(--r-2);
}

/* ══ F · LOS MENÚS FLOTANTES ═══════════════════════════════════════════════════
   Hoy son renglones de texto pelado: 0 íconos, 0 separadores, 0 atajos, 0
   insignias, 0 flechas, 0 encabezado, 0 fila de cuenta. Y la ironía está
   medida: los cuatro íconos YA existen en index.html (i-empresa:163, i-panel:167,
   i-llave:171, i-salir:175) y app.js:723-725 los tira a la basura escribiendo
   solo el rótulo.
   ⚠️ Dato que conviene saber: para una cuenta normal este menú muestra solo DOS
   renglones, porque app.js:722 salta #b-empresa y #b-dgnova cuando llevan
   `.oculto`, y en el HTML los dos lo llevan. Cuatro los ve un administrador.
   Estos dos bloques van SIN `#aside` adelante porque menuCuenta() y menuConv()
   cuelgan el menú de <body>. Van después de :3139 y de :3185, que además se
   contradicen entre ellos (padding 5px contra 4px 0, y 6px 10px radio 7 contra
   7px 8px radio 0): esto zanja.
   ⚠️ El ancho lo fija el JS con estilo en línea (app.js:734), así que acá va
   `min-width`, que es lo único que un estilo en línea no pisa.
   El texto de la fila cae en 44 — el mismo riel del nombre de la cuenta — para
   que el menú se lea como esa fila abierta hacia arriba y no como un papel que
   cayó encima.                                                                 */
.menu-flotante.menu-oscuro{
  padding:5px; gap:1px; min-width:210px;
  background:var(--menu-2); border:1px solid #2A3B57; border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),      /* el filo de luz de 1 px arriba */
             0 2px 6px rgba(0,0,0,.28), 0 18px 44px rgba(0,0,0,.38);
}
/* El correo arriba, en gris: mismo relleno que una fila y un nivel más apagado,
   así lee como encabezado sin romper el ritmo vertical. */
.menu-flotante.menu-oscuro .menu-cab{
  margin:0; padding:5px 8px 6px; font-family:var(--mono); font-size:11px; line-height:14px;
  color:#B6C2D4;                        /* 8,62:1 sobre #16243C */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* El margen negativo de -5 cancela el relleno del contenedor: la línea corta de
   borde a borde. Un separador que flota con aire a los lados no parte nada,
   solo agrega una rayita suelta. */
.menu-flotante.menu-oscuro .menu-sep, .menu-flotante.menu-oscuro hr{
  height:1px; border:0; margin:4px -5px; background:#2A3B57;
}
.menu-flotante.menu-oscuro button{
  display:flex; align-items:center; gap:15px; width:100%;
  min-height:32px; padding:0 8px; border:0; border-radius:6px;
  background:transparent; font-family:var(--letra); font-size:13.5px; font-weight:500;
  color:var(--menu-txt); text-align:left;            /* 12,73:1 sobre #16243C */
  transition:background .12s ease, color .12s ease;
}
/* El ícono va SIEMPRE un nivel más apagado que su rótulo: si van al mismo tono
   compiten y el ojo no encuentra dónde empieza a leer. */
.menu-flotante.menu-oscuro button > svg{ width:15px; height:15px; flex:none; color:#B6C2D4; }
.menu-flotante.menu-oscuro button > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-flotante.menu-oscuro button:hover,
.menu-flotante.menu-oscuro button:focus-visible{ background:#1E3A5C; color:#fff; outline:0; transition:none; }
.menu-flotante.menu-oscuro button:hover > svg{ color:#EDF2F9; }
/* Lo destructivo: #E5877C da 5,98:1 y este 7,94:1 — entra en AAA. */
.menu-flotante.menu-oscuro button.peligro,
.menu-flotante.menu-oscuro button.peligro > svg{ color:#F0A79E; }
.menu-flotante.menu-oscuro button.peligro:hover,
.menu-flotante.menu-oscuro button.peligro:focus-visible{ background:#3A2220; color:#F0A79E; }
/* La pastilla del atajo. Lo que la hace leer como TECLA y no como etiqueta son
   dos cosas de 1 px: el borde y la sombra de abajo. Sin ellas es texto gris. */
.menu-flotante.menu-oscuro .menu-atajo{
  margin-left:auto; flex:none; min-width:20px; height:19px; padding:0 5px;
  display:inline-grid; place-items:center; border-radius:5px;
  background:#1E3A5C; border:1px solid #2A3B57; color:#B6C2D4;   /* 6,42:1 sobre #1E3A5C */
  font-family:var(--mono); font-size:10.5px; font-style:normal; font-weight:500;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.menu-flotante.menu-oscuro .menu-insignia{
  margin-left:auto; flex:none; height:18px; padding:0 7px;
  display:inline-flex; align-items:center; border-radius:9px;
  background:var(--marca-acento-claro, #00D9C0); color:var(--marca-sobre-acento-claro, #0E1B30);
  font-size:10px; font-weight:700; font-style:normal; letter-spacing:.06em; text-transform:uppercase;
}
.menu-flotante.menu-oscuro .menu-flecha{ margin-left:auto; flex:none; width:12px; height:12px; position:relative; color:#B6C2D4; }
.menu-flotante.menu-oscuro .menu-flecha::before{
  content:""; position:absolute; left:2px; top:3px; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg);
}
/* La fila de la cuenta al pie del menú: es la misma fila del lateral, abierta
   hacia arriba. Por eso repite el avatar de 22 px y las dos líneas. */
.menu-flotante.menu-oscuro .menu-pie{
  display:flex; align-items:center; gap:8px; min-height:38px;
  margin:4px -5px -5px; padding:0 13px; border-top:1px solid #2A3B57;
}
.menu-flotante.menu-oscuro .menu-pie .cuenta-ini{
  width:22px; height:22px; flex:none; border-radius:var(--r-2); display:grid; place-items:center;
  background:var(--marca-acento-claro, #00D9C0); color:var(--marca-sobre-acento-claro, #0E1B30);
  font-size:10px; font-weight:700; font-style:normal;
}
.menu-flotante.menu-oscuro .menu-pie b{ display:block; font-size:13px; font-weight:600; line-height:16px; color:#EDF2F9; }   /* 13,81:1 */
.menu-flotante.menu-oscuro .menu-pie i{ display:block; font-family:var(--mono); font-size:10.5px; font-style:normal; line-height:13px; color:#B6C2D4; }
.menu-flotante.menu-oscuro .menu-pie > span{ flex:1 1 auto; min-width:0; overflow:hidden; }

/* ══ LA COSTURA DE ARRASTRE ════════════════════════════════════════════════════
   `.sash` es de 10 px con `transform: translateX(-50%)` sobre `left: 268`
   (estilo.css:3229-3234), así que la mitad cae DENTRO del lateral y sus últimos
   5 px le roban clics a la lista: uno cree que agarra una conversación y agarra
   la costura. Con 8 px y un cuarto de corrimiento solo invade 2, y quedan 6 por
   fuera para agarrarla.                                                        */
#app .sash-menu{ width:8px; transform:translateX(-25%); }

/* ══ EL MENÚ ACHICADO A 68 px ══════════════════════════════════════════════════
   estilo.css:1288 esconde «#buscar-conv», pero el campo se llama «#q-conv»
   (index.html:138). Un selector que no coincide no falla: no hace nada. Hoy, con
   el menú en 68 px, queda un campo de 39 px con 33 px de padding-left y la lupa
   en left:11 — el área de texto sale en −5 px y la lupa se monta sobre el borde.
   El logo vuelve a `flex: none` porque la cabeza se vuelve columna a 68 px
   (estilo.css:1297) y sin eso el logo se encoge contra el cruce de ejes.      */
#app.aside-chico #aside .aside-buscar,
#app.aside-chico #aside .aside-titulillo,
#app.aside-chico #aside .conv-cuando,
#app.aside-chico #aside .conv-mas,
#app.aside-chico #aside .medidor{ display:none; }
#app.aside-chico #aside .aside-cabeza{ height:auto; min-height:46px; padding:8px var(--m-canal); }
#app.aside-chico #aside .aside-logo{ margin-right:0; padding-left:0; flex:none; }
#app.aside-chico #aside #logo-lateral{ max-width:40px; }
#app.aside-chico #aside .aside-lista .conv{ justify-content:center; padding:0; }
#app.aside-chico #aside .aside-lista .conv > span:not([class]){ display:none; }
#app.aside-chico #aside #b-nueva{ justify-content:center; padding:0; gap:0; }
#app.aside-chico #aside .aside-pie .aside-btn{ justify-content:center; gap:0; padding:0; }
#app.aside-chico #aside #b-cuenta-menu{ justify-content:center; padding:0; gap:0; }
#app.aside-chico #aside #p-quien{ display:none; }

/* ══ EL DEDO — LAS REGLAS DE 44 px QUE HOY ESTÁN MUERTAS ═══════════════════════
   Las tres que ya existen (estilo.css:660-662, 1401-1404 y 1885-1888) apuntan a
   `.conv` con peso 0-1-0 y las pisa `.aside-lista .conv, .conv-fila .conv`
   (0-2-0) de estilo.css:2855: en celular las filas miden 32 px, no 44.
   ⚠️ Una media query NO suma peso, así que ponerlas al final tampoco basta — su
   propio comentario en :1392 dice que ya pasó TRES veces. La única salida es
   escribirlas con peso igual o mayor. Estas van con `#aside` (1-2-0).
   Y sin mouse no hay hover que revele nada: el ⋮ se queda puesto, con caja de
   dedo, y esta vez SÍ reserva su sitio para no montarse sobre la hora.        */
@media (hover:none){
  #aside .aside-lista .conv, #aside .conv-fila .conv{ min-height:44px; padding-right:44px; }
  #aside .aside-lista .conv:not(:has(.conv-cuando)){ padding-right:44px; }
  #aside .conv-fila{ min-height:44px; }
  #aside .aside-pie .aside-btn, #aside #b-nueva,
  #aside .aside-buscar input{ min-height:44px; height:auto; }
  #aside #b-cuenta-menu{ min-height:44px; height:auto; }
  #aside .aside-cabeza{ height:auto; min-height:56px; }
  #aside .aside-cabeza .icono-btn{ width:40px; height:40px; flex:0 0 40px; }
  #aside .conv-mas{ opacity:1; pointer-events:auto; width:36px; height:36px; right:2px; }
  #aside .conv-fila:hover .conv-cuando,
  #aside .conv-fila:hover .conv > .conv-pin{ opacity:1; }
}

/* ══ EL RESULTADO, EN NÚMEROS ══════════════════════════════════════════════════
   Medido A/B en el mismo Chromium, ventana 1440x900, --menu-ancho 268 px, con
   194 filas armadas igual que filaConv().
     ANCHO
       título CON hora ....... 108,7 → 184,6 px  (+69,8%; 14,4 → 24,4 caracteres)
       título SIN hora ....... 167,0 → 217,0 px  (+29,9%; 22,1 → 28,7 caracteres)
       sangría antes de la 1ª letra .... 48 → 14 px
       rieles de arranque de tinta ....... 9 → 2  (x=14 y x=44)
       columnas muertas dentro de las filas .. 66 → 28 px, y esos 28 son el riel
         de la izquierda y el canal + la barra de la derecha: los tres huecos
         interiores (42-48, 216-232, 246-268) desaparecen
     ALTO (ventana de 900 px)
       cabeza ..... 73,0 → 46,0    zona del botón .. 74,4 → 42,0
       buscador ... 41,6 → 32,0    pie ............ 140,4 → 118,3
       la lista .. 564,6 → 657,7   (del 62,7% al 73,1% del alto del menú)
       conversaciones enteras a la vista .... 13 → 18  (+38%)
     PIEZAS
       #b-nueva 46,4 → 32 px · .conv-mas 30x34 → 22x22 · .icono-btn 38 → 28
       hueco entre los dos botones de la cabeza ..... 77,5 → 0 px
       logo 103,6x30 en x=22 → 89,8x26 en x=14 (38,6% → 33,5% del ancho)
   ══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   MÁS AIRE ARRIBA, ABAJO Y A LA IZQUIERDA - menu-aire

   Luis: «el que está me gusta, solo que le falta más aire arriba, abajo y a la
   izquierda». O sea que el diseño se queda y lo que se mueve es el margen.

   Tres sitios, y NINGUNO le quita ancho al título más de lo necesario:

     A LA IZQUIERDA  el canal de todo bloque pasa de 6 a 12 px. La tinta pasa a
                     arrancar en 20 en vez de 14. Son 6 px por lado, o sea 12
                     que salen del título — de 190 a 178 px, que sigue siendo
                     56 px más de lo que había antes del rediseño (114 px).

     ARRIBA          la cabeza pasa de 46 a 58 px y el bloque del botón recibe
                     10 px arriba en vez de 6. El logo deja de estar pegado al
                     techo.

     ABAJO           el pie pasa de 6/8 a 12/14 px con 6 de separación entre sus
                     renglones, y la lista termina con 12 px de colchón en vez
                     de 8, para que la última conversación no quede tocando la
                     línea del pie.

   Y la fila crece de 32 a 36 px: cuatro píxeles repartidos arriba y abajo del
   título. Es el punto medio entre los 32 del diseño aplicado —que Luis dijo que
   se sentía apretado— y los 38 de la variante «con aire», que le costaba cinco
   conversaciones de la lista.
   ══════════════════════════════════════════════════════════════════════════ */
#app #aside, #aside {
  --m-canal: 12px;
  --m-fila: 36px;
}

/* ── ARRIBA ── */
#app #aside .aside-cabeza { min-height: 58px; height: 58px; }
#aside .aside-zona { padding: 10px var(--m-canal) 6px; }

/* ── ABAJO ── */
#aside .aside-lista { padding-bottom: 12px; }
#aside .aside-pie { padding: 12px var(--m-canal) 14px; gap: 6px; }
#aside .medidor { padding: 2px var(--m-sangria) 10px; }

/* ── Y el rótulo de grupo, que con filas más altas necesita su propio aire ── */
#aside .aside-titulillo { height: 30px; min-height: 30px; }

/* ⚠️ El menú colapsado conserva su cabeza corta: con 68 px de ancho el logo va
   centrado y 58 px de alto lo dejarían flotando. */
#app.aside-chico #aside .aside-cabeza { height: auto; min-height: 50px; }


/* ══════════════════════════════════════════════════════════════════════════
   LOS OCHO PUNTOS DEL LATERAL - menu-ocho

   Luis, mirando el lateral de Claude Code al lado del nuestro:
     1. más pegado entre títulos
     2. la letra más pequeña y más fina, no tan gruesa
     3. más aireado a la izquierda
     4. «unos puntos pequeños que no se ven mucho pero se mueven a medida que
        el agente hace algo en la conversación»
     5. no tan redondeado, más bien cuadrado
     6. quitarle las fechas de los lados
     7. el botón del menú se abre pero no se cierra   ← en app.js
     8. el usuario se repite                          ← en app.js
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 y 3 · MÁS PEGADO ENTRE TÍTULOS, MÁS AIRE A LA IZQUIERDA ══
   Son dos cosas distintas y por eso no se pelean: la fila baja de 36 a 34 px
   —el alto—, y el canal sube de 12 a 16 —el margen—. Junto con la letra más
   fina, la lista se lee más apretada por dentro y más suelta por fuera, que es
   exactamente lo que se ve en la referencia. */
#app #aside, #aside {
  --m-canal: 16px;
  --m-fila: 34px;
}

/* ══ 2 · LA LETRA, MÁS PEQUEÑA Y MÁS FINA ══
   El título estaba en 14 px con el peso normal de la fuente. Baja a 13,5 y se
   le pone peso 400 explícito, que es el más fino que tiene cargado Plus Jakarta
   Sans. La fila abierta se queda en 600: es el único sitio donde el grueso
   informa, porque dice cuál está usted leyendo.

   ⚠️ El color NO se toca. Ya está en #EDF2F9, 15,33:1 — es lo que Luis pidió
   dos peticiones atrás y quedó bien. Lo que hace que se vea «gruesa» no es el
   color: es el peso. */
#aside .aside-lista .conv > span:not([class]) {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -.005em;
}
#aside .conv-fila.viva .conv > span:not([class]) { font-weight: 600; }

/* ══ 4 · EL PUNTICO QUE SE MUEVE ══
   Tres estados, y los tres dicen algo de verdad:

       obrando   el agente está trabajando en ella AHORA MISMO — turquesa y
                 latiendo. El dato sale de la tabla `trabajando`, que ya existía
                 y que el menú no miraba.
       lleno     tocada hoy
       hueco     de antes

   Reemplaza al ícono `i-chat`, que era el MISMO dibujo en las 194 filas: 17 px
   de tinta que no distinguían una conversación de otra.

   Va en 7 px y a media luz a propósito: Luis lo describió como «unos íconos
   pequeños que no se ven mucho». Un indicador de estado que grita compite con
   el título, que es lo que uno viene a leer. */
#aside .aside-lista .conv > .conv-punto {
  flex: none; width: 7px; height: 7px; margin-right: 11px;
  border-radius: 50%; box-sizing: border-box;
  transition: background .2s ease, border-color .2s ease;
}
#aside .aside-lista .conv > .conv-punto.hueco {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--m3) 46%, transparent);
}
#aside .aside-lista .conv > .conv-punto.lleno {
  background: color-mix(in srgb, var(--m3) 62%, transparent);
  border: 0;
}
#aside .aside-lista .conv > .conv-punto.obrando {
  background: var(--m-marca); border: 0;
  animation: punto-late 1.6s ease-in-out infinite;
}
@keyframes punto-late {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-marca) 55%, transparent); }
  50%      { opacity: .5; box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-marca) 0%, transparent); }
}
/* Al pasar el mouse y en la fila abierta, el punto sube un paso. */
#aside .conv-fila:hover .conv > .conv-punto.hueco,
#aside .conv-fila.viva .conv > .conv-punto.hueco { border-color: var(--m3); }
#aside .conv-fila:hover .conv > .conv-punto.lleno,
#aside .conv-fila.viva .conv > .conv-punto.lleno { background: var(--m2); }
/* ⚠️ Quien pidió no moverse, no se mueve. */
@media (prefers-reduced-motion: reduce) {
  #aside .aside-lista .conv > .conv-punto.obrando { animation: none; }
}

/* ══ 5 · MÁS CUADRADO ══
   El radio de todo el lateral baja de 7 a 4 px. Cuatro píxeles todavía matan
   la esquina viva —una esquina a escuadra sobre marino se ve dura— pero ya no
   se lee como pastilla. La fila abierta, el buscador, los botones y los dos
   menús flotantes, todos al mismo. */
#aside, #aside .conv-fila, #aside .conv, #aside .aside-btn, #aside #b-nueva,
#aside .aside-buscar input, #aside .aside-cuenta, #aside .icono-btn,
#aside .conv-mas, .menu-flotante.menu-oscuro, .menu-flotante.menu-oscuro button {
  border-radius: 4px;
}
/* Los dos botones de la cabeza siguen siendo UN mando: solo se redondean por
   fuera. */
#aside .aside-cabeza .icono-btn:first-of-type { border-radius: 4px 0 0 4px; }
#aside .aside-cabeza .icono-btn:last-of-type  { border-radius: 0 4px 4px 0; }

/* ══ 6 · LAS FECHAS, CALLADAS ══
   No se quitan del todo, y acá está el porqué: esa hora NO es un reloj, es un
   DESEMPATE. Solo sale cuando dos conversaciones se llaman igual, y existe
   porque sin ella el menú mostraba filas idénticas que no había cómo
   distinguir. Quitarla devuelve ese problema.

   Lo que sí se puede es que deje de ser una columna. Baja de 11 a 10 px, pierde
   la letra monoespaciada —que la hacía verse como un dato de sistema— y se va a
   media luz. Sube al pasar el mouse, para el momento en que uno sí la busca.

   Si aun así la quiere fuera, es una línea: `display: none` acá. */
#aside .aside-lista .conv-cuando {
  font-family: var(--letra);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--m3) 58%, transparent);
  transition: color .15s ease;
}
#aside .conv-fila:hover .conv-cuando,
#aside .conv-fila.viva .conv-cuando { color: var(--m3); }

/* ══ 8 · EL PLAN Y EL ROL, AL LADO DEL NOMBRE ══
   El menú repetía «Luis Carlos Luna» dos centímetros encima del mismo nombre.
   Ahora el pie del menú no existe y el dato que sí faltaba —el rol— vive en la
   fila del lateral, en la misma línea, a media luz. Es como se lee en la
   referencia: «Luis Carlos · Max». */
#aside .aside-cuenta { gap: 0; }
#aside .aside-cuenta > #p-quien { flex: 0 1 auto; margin-right: 6px; }
#aside .aside-cuenta > #p-plan {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: normal; font-size: 11.5px; color: var(--m3);
}
#aside .aside-cuenta > #p-plan:not(:empty)::before {
  content: "·"; margin-right: 6px; opacity: .6;
}
#aside .aside-cuenta > .cuenta-mas { margin-left: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   LOS OCHO PUNTOS DEL LATERAL - menu-ocho

   Luis, mirando el lateral de Claude Code al lado del nuestro:
     1. más pegado entre títulos
     2. la letra más pequeña y más fina, no tan gruesa
     3. más aireado a la izquierda
     4. «unos puntos pequeños que no se ven mucho pero se mueven a medida que
        el agente hace algo en la conversación»
     5. no tan redondeado, más bien cuadrado
     6. quitarle las fechas de los lados
     7. el botón del menú se abre pero no se cierra   ← en app.js
     8. el usuario se repite                          ← en app.js
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 y 3 · MÁS PEGADO ENTRE TÍTULOS, MÁS AIRE A LA IZQUIERDA ══
   Son dos cosas distintas y por eso no se pelean: la fila baja de 36 a 34 px
   —el alto—, y el canal sube de 12 a 16 —el margen—. Junto con la letra más
   fina, la lista se lee más apretada por dentro y más suelta por fuera, que es
   exactamente lo que se ve en la referencia. */
#app #aside, #aside {
  --m-canal: 16px;
  --m-fila: 34px;
}

/* ══ 2 · LA LETRA, MÁS PEQUEÑA Y MÁS FINA ══
   El título estaba en 14 px con el peso normal de la fuente. Baja a 13,5 y se
   le pone peso 400 explícito, que es el más fino que tiene cargado Plus Jakarta
   Sans. La fila abierta se queda en 600: es el único sitio donde el grueso
   informa, porque dice cuál está usted leyendo.

   ⚠️ El color NO se toca. Ya está en #EDF2F9, 15,33:1 — es lo que Luis pidió
   dos peticiones atrás y quedó bien. Lo que hace que se vea «gruesa» no es el
   color: es el peso. */
#aside .aside-lista .conv > span:not([class]) {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -.005em;
}
#aside .conv-fila.viva .conv > span:not([class]) { font-weight: 600; }

/* ══ 4 · EL PUNTICO QUE SE MUEVE ══
   Tres estados, y los tres dicen algo de verdad:

       obrando   el agente está trabajando en ella AHORA MISMO — turquesa y
                 latiendo. El dato sale de la tabla `trabajando`, que ya existía
                 y que el menú no miraba.
       lleno     tocada hoy
       hueco     de antes

   Reemplaza al ícono `i-chat`, que era el MISMO dibujo en las 194 filas: 17 px
   de tinta que no distinguían una conversación de otra.

   Va en 7 px y a media luz a propósito: Luis lo describió como «unos íconos
   pequeños que no se ven mucho». Un indicador de estado que grita compite con
   el título, que es lo que uno viene a leer. */
#aside .aside-lista .conv > .conv-punto {
  flex: none; width: 7px; height: 7px; margin-right: 11px;
  border-radius: 50%; box-sizing: border-box;
  transition: background .2s ease, border-color .2s ease;
}
#aside .aside-lista .conv > .conv-punto.hueco {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--m3) 46%, transparent);
}
#aside .aside-lista .conv > .conv-punto.lleno {
  background: color-mix(in srgb, var(--m3) 62%, transparent);
  border: 0;
}
#aside .aside-lista .conv > .conv-punto.obrando {
  background: var(--m-marca); border: 0;
  animation: punto-late 1.6s ease-in-out infinite;
}
@keyframes punto-late {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-marca) 55%, transparent); }
  50%      { opacity: .5; box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-marca) 0%, transparent); }
}
/* Al pasar el mouse y en la fila abierta, el punto sube un paso. */
#aside .conv-fila:hover .conv > .conv-punto.hueco,
#aside .conv-fila.viva .conv > .conv-punto.hueco { border-color: var(--m3); }
#aside .conv-fila:hover .conv > .conv-punto.lleno,
#aside .conv-fila.viva .conv > .conv-punto.lleno { background: var(--m2); }
/* ⚠️ Quien pidió no moverse, no se mueve. */
@media (prefers-reduced-motion: reduce) {
  #aside .aside-lista .conv > .conv-punto.obrando { animation: none; }
}

/* ══ 5 · MÁS CUADRADO ══
   El radio de todo el lateral baja de 7 a 4 px. Cuatro píxeles todavía matan
   la esquina viva —una esquina a escuadra sobre marino se ve dura— pero ya no
   se lee como pastilla. La fila abierta, el buscador, los botones y los dos
   menús flotantes, todos al mismo. */
#aside, #aside .conv-fila, #aside .conv, #aside .aside-btn, #aside #b-nueva,
#aside .aside-buscar input, #aside .aside-cuenta, #aside .icono-btn,
#aside .conv-mas, .menu-flotante.menu-oscuro, .menu-flotante.menu-oscuro button {
  border-radius: 4px;
}
/* Los dos botones de la cabeza siguen siendo UN mando: solo se redondean por
   fuera. */
#aside .aside-cabeza .icono-btn:first-of-type { border-radius: 4px 0 0 4px; }
#aside .aside-cabeza .icono-btn:last-of-type  { border-radius: 0 4px 4px 0; }

/* ══ 6 · LAS FECHAS, CALLADAS ══
   No se quitan del todo, y acá está el porqué: esa hora NO es un reloj, es un
   DESEMPATE. Solo sale cuando dos conversaciones se llaman igual, y existe
   porque sin ella el menú mostraba filas idénticas que no había cómo
   distinguir. Quitarla devuelve ese problema.

   Lo que sí se puede es que deje de ser una columna. Baja de 11 a 10 px, pierde
   la letra monoespaciada —que la hacía verse como un dato de sistema— y se va a
   media luz. Sube al pasar el mouse, para el momento en que uno sí la busca.

   Si aun así la quiere fuera, es una línea: `display: none` acá. */
#aside .aside-lista .conv-cuando {
  font-family: var(--letra);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--m3) 58%, transparent);
  transition: color .15s ease;
}
#aside .conv-fila:hover .conv-cuando,
#aside .conv-fila.viva .conv-cuando { color: var(--m3); }

/* ══ 8 · EL PLAN Y EL ROL, AL LADO DEL NOMBRE ══
   El menú repetía «Luis Carlos Luna» dos centímetros encima del mismo nombre.
   Ahora el pie del menú no existe y el dato que sí faltaba —el rol— vive en la
   fila del lateral, en la misma línea, a media luz. Es como se lee en la
   referencia: «Luis Carlos · Max». */
#aside .aside-cuenta { gap: 0; }
#aside .aside-cuenta > #p-quien { flex: 0 1 auto; margin-right: 6px; }
#aside .aside-cuenta > #p-plan {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: normal; font-size: 11.5px; color: var(--m3);
}
#aside .aside-cuenta > #p-plan:not(:empty)::before {
  content: "·"; margin-right: 6px; opacity: .6;
}
#aside .aside-cuenta > .cuenta-mas { margin-left: auto; }

/* Tres píxeles entre «Dirección» y el «⋮» es muy poco: medido, el rol termina
   en 246 y el botón arranca en 249. Diez es lo mínimo para que no se lean
   pegados cuando el rol es largo. */
#aside .aside-cuenta > #p-plan { margin-right: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   PUNTAS RECTAS, EL BORDE DERECHO Y EL PUNTO DE LA CONVERSACIÓN ABIERTA
   - menu-recto
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 · PUNTAS RECTAS EN TODO ══
   Luis: «no quiero circulares en nada, las puntas de los cuadros rectas».

   MEDIDO: dentro del lateral seguían conviviendo SEIS radios distintos —
       7px · 4px · 6px · 999px · 50% · «7px 0 0 7px»
   El bloque anterior bajó a 4 px solo lo que enumeró a mano; el resto se quedó
   con el suyo. Por eso una regla de barrido, y no otra lista: en un archivo con
   3.900 líneas, enumerar es garantizar que se escape uno.

   ⚠️ La ÚNICA excepción es el puntico de estado, que sí es un círculo — es la
   pieza que Luis señaló en la referencia y pidió que fuera de otro color, no de
   otra forma. */
#aside, #aside *,
.menu-flotante.menu-oscuro, .menu-flotante.menu-oscuro * {
  border-radius: 0;
}
#aside .aside-lista .conv > .conv-punto { border-radius: 50%; }

/* ══ 2 · EL BORDE DERECHO ══
   MEDIDO: la fila terminaba 17 px antes del borde del lateral y la barra de
   desplazamiento flota encima (mide 0 px de ancho real: es de las que se
   superponen). O sea que esos 17 px eran hueco, no barra.

   En la referencia la fila llega casi al borde y la barra vive pegada a él.
   El canal derecho baja a 6 px: la fila gana 10 px de ancho y el borde se ve
   como un borde, no como un margen olvidado.

   ⚠️ Solo el DERECHO. El izquierdo se queda en 16, que es el aire que Luis
   pidió hace dos peticiones. */
#aside .aside-lista { padding-right: 6px; }
#aside .aside-lista::-webkit-scrollbar { width: 6px; }

/* ══ 3 · EL PUNTO DE LA CONVERSACIÓN ABIERTA, EN EL VERDE DE LA CASA ══
   Luis: «fíjate cómo el título donde uno está, el círculo es de otro color;
   aquí podía ser el verde ese».

   MEDIDO: la fila abierta traía el punto en `hueco` — el mismo aro gris de
   cualquier fila vieja. La única que decía «usted está acá» era el bloque de
   fondo. Ahora el punto también lo dice, en el turquesa de la marca.

   ⚠️ Va por `var(--m-marca)`, que es la variable de marca blanca: en una
   empresa con su propio color, el punto sale en el de ella. */
#aside .conv-fila.viva .conv > .conv-punto,
#aside .conv-fila.viva .conv > .conv-punto.hueco,
#aside .conv-fila.viva .conv > .conv-punto.lleno {
  background: var(--m-marca);
  border: 0;
}
/* Y si además está trabajando, late — el latido manda sobre el color fijo. */
#aside .conv-fila.viva .conv > .conv-punto.obrando {
  animation: punto-late 1.6s ease-in-out infinite;
}

/* ══ PUNTAS RECTAS, DE VERDAD - menu-recto-2 ══
   El barrido anterior no ganó. MEDIDO después de aplicarlo, seguían vivos
   cuatro radios: 7px · 4px · 6px · «7px 0 0 7px».

   La razón es el PESO de los selectores. `#aside *` pesa un identificador; las
   reglas que le ganan pesan un identificador MÁS una o dos clases:
       #aside .conv-fila                        → gana
       #aside .aside-cabeza .icono-btn:first-of-type → gana por más

   Subir el peso jugando a poner más clases sería empezar la misma carrera que
   ya lleva trece bloques en este archivo. Acá se corta con `!important`, que es
   exactamente para lo que sirve: una propiedad, en un subárbol acotado, que no
   admite excepciones porque el cliente la pidió sin excepciones.

   ⚠️ Va SOLO dentro de `#aside` y de los dos menús oscuros. La zona clara del
   chat conserva sus radios. */
#aside, #aside *,
.menu-flotante.menu-oscuro, .menu-flotante.menu-oscuro * {
  border-radius: 0 !important;
}
/* La única excepción, y es la que Luis señaló como círculo a propósito. */
#aside .aside-lista .conv > .conv-punto { border-radius: 50% !important; }

/* ══════════════════════════════════════════════════════════════════════════
   EL TÍTULO SE DESVANECE, NO SE CORTA CON PUNTOS - titulo-desvanece

   Luis, señalando la referencia: «mira cómo es el corte del título cuando el
   borde está cerca… tú dejas demasiado espacio en blanco, en cambio en el negro
   hacen un degradado y las letras incluso medio se ven».

   MEDIDO, y son DOS defectos, no uno:

     1. EL HUECO. La fila reservaba 30 px a la derecha para el «⋮», que ni
        siquiera está a la vista mientras uno no pasa el mouse. Resultado: en
        una fila sin hora el título terminaba 37 px antes del borde del lateral.
        Con hora, 66 px. Ese es el espacio en blanco.

     2. EL CORTE. `text-overflow: ellipsis` corta en seco y planta tres puntos.
        La referencia no corta: DESVANECE. Las últimas letras se ven a medias y
        el ojo entiende solo que sigue. Se lee más y se ve mejor.

   Se arreglan los dos: la fila deja de reservar, el «⋮» y la hora se ponen
   ENCIMA —ya no empujan—, y el título llega hasta el borde con una máscara que
   lo apaga en los últimos píxeles.
   ══════════════════════════════════════════════════════════════════════════ */

/* La fila deja de reservar sitio para lo que va encima. */
#aside .aside-lista .conv,
#aside .aside-lista .conv:not(:has(.conv-cuando)) {
  position: relative;
  padding-right: 6px;
}

/* ── EL DESVANECIDO ──
   26 px de apagado: menos y se ve como un corte sucio; más y se pierde una
   palabra entera. Va con las dos escrituras porque el prefijo `-webkit-` sigue
   haciendo falta en Safari y en el navegador de Android. */
#aside .aside-lista .conv > span:not([class]) {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}

/* ── LA HORA, ENCIMA Y NO EMPUJANDO ──
   Antes era un elemento más de la fila y le robaba 38 px al título en las 108
   filas que la llevan. Ahora flota a la derecha y el título pasa por debajo,
   ya desvanecido. */
#aside .aside-lista .conv-cuando {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  margin: 0; z-index: 1; pointer-events: none;
}
/* Donde hay hora, el apagado empieza antes: si no, la última palabra del título
   se leería encima del número. */
#aside .aside-lista .conv:has(.conv-cuando) > span:not([class]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 74px), transparent calc(100% - 46px));
          mask-image: linear-gradient(to right, #000 calc(100% - 74px), transparent calc(100% - 46px));
}
/* Al pasar el mouse sale el «⋮» donde estaba la hora: la hora se va y el
   título recupera todo el ancho, ya desvanecido bajo el botón. */
#aside .conv-fila:hover .conv-cuando { opacity: 0; }
#aside .conv-fila:hover .conv > span:not([class]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent calc(100% - 14px));
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent calc(100% - 14px));
}

/* ══ FUERA LAS FECHAS DE LA DERECHA - sin-fechas ══
   Luis lo pidió dos veces. Se esconden, no se borran: la segunda pasada de
   `desempatarFilas` busca este elemento para agregarle los segundos cuando dos
   conversaciones se crearon en el mismo minuto. El dato ahora vive en el
   globito que sale al pasar el mouse.

   Y con la hora fuera, el título recupera el ancho entero: el desvanecido
   vuelve a ser uno solo para todas las filas. */
#aside .aside-lista .conv-cuando { display: none; }
#aside .aside-lista .conv:has(.conv-cuando) > span:not([class]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}

/* ══════ EL MENU DE LOS TRES TEMAS - menu-tema ══════
   Es el mismo menú del lateral —misma superficie, mismo borde, mismas puntas
   rectas— con dos piezas más que los otros no necesitan: cada opción lleva su
   explicación en un renglón chico debajo del nombre, y la que está puesta
   lleva un visto a la derecha.

   La explicación hace falta porque «híbrido» no le dice nada a nadie: hay que
   decir que es el menú marino con el chat blanco. */
.menu-flotante.menu-tema { min-width: 234px; }
.menu-flotante.menu-tema .menu-op {
  align-items: flex-start;
  min-height: 44px;
  padding-top: 7px; padding-bottom: 7px;
}
.menu-flotante.menu-tema .menu-op > svg { margin-top: 2px; }
.menu-flotante.menu-tema .menu-op > span {
  display: grid; gap: 1px; min-width: 0; text-align: left;
}
.menu-flotante.menu-tema .menu-op > span > b {
  font-weight: 600; font-size: 13.5px; color: var(--menu-txt);
}
.menu-flotante.menu-tema .menu-op > span > i {
  font-style: normal; font-size: 11.5px; line-height: 1.3;
  color: var(--menu-txt-2);
}
/* El visto va en la misma columna donde los otros menús ponen el atajo. */
.menu-flotante.menu-tema .menu-visto {
  margin-left: auto; align-self: center; flex: none;
  font-style: normal; font-size: 13px; color: var(--m-marca, var(--turquesa));
}
.menu-flotante.menu-tema .menu-op.menu-puesto > span > b { color: #fff; }

/* ══════ EL BOTÓN DEL TEMA TIENE QUE DECIR QUE ABRE ALGO - tema-visible ══════
   Luis: «pero no veo dónde se cambia, qué pasa».

   MEDIDO: el botón está, es visible y funciona — 28×28 px en x=223, y=15, con
   su ícono en #C9D6E6 (10,54:1). El problema no es que no se vea: es que NO
   PARECE UN MENÚ. Un sol de 28 px, sin rótulo y sin flecha, pegado a otro ícono
   igual, no dice que al tocarlo se abre nada.

   Se le pone la flechita de siempre —la misma señal que usa la fila de la
   cuenta y todo menú desplegable del mundo— y el botón se ensancha lo justo
   para que quepa. Sigue siendo un solo mando con el de colapsar.

   ⚠️ Solo al del tema. El de colapsar NO abre menú: es una acción de un toque y
   ponerle flecha sería mentir. */
#aside #b-tema {
  width: auto; min-width: 44px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  padding: 0 6px 0 5px;
}
#aside #b-tema::after {
  content: ""; flex: none;
  width: 5px; height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity: .75;
}
#aside #b-tema:hover::after { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   EL TEMA «CLARO» DE VERDAD - tema-claro

   Luis, mostrando el modo claro del escritorio de Hermes: «el medio es un
   blanco, o sea el más claro, y los más oscuros los de las puntas».

   Hasta hoy `claro` e `hibrido` se veían IGUALES: los dos solo significaban «no
   apliques la paleta oscura», y en los dos el lateral seguía siendo marino.
   Acá el lateral y el panel de archivos se vuelven un gris claro y el centro
   queda blanco, que es la relación que él señaló.

   LA ESCALA, de las puntas hacia el centro:
       lateral y panel ....  #EDF1F7
       la conversación ....  #FFFFFF
   Un solo paso, del 3,5% de luminancia. Más y se ve como dos aplicaciones
   pegadas; menos y no se distingue el borde del centro.

   ⚠️ EL GRIS TIENE SESGO AZUL. #EDF1F7 no es gris de fábrica: lleva el tono del
   marino de la casa. Un gris neutro al lado del turquesa de la marca se ve
   sucio.

   ⚠️ EL ACENTO PASA POR MARCA BLANCA. Acá se usa `--marca-acento` —la versión
   OSCURA— porque el fondo ahora es claro. En el lateral marino se usaba
   `--marca-acento-claro`. Son las dos que app.js ya calcula por empresa.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-tema="claro"] {
  /* ── El centro: blanco ── */
  --piso:    #FFFFFF;
  --carta:   #FFFFFF;
  --carta-2: #F2F5FA;
  --carta-3: #E8EEF6;
  --borde:   #DCE3ED;
  --borde-2: #EAF0F6;

  /* ── Las puntas: gris claro con sesgo azul ── */
  --menu:       #EDF1F7;
  --menu-2:     #E1E7F0;   /* lo que se levanta: paso del mouse, menús */
  --menu-3:     #D3DBE7;   /* la conversación abierta */
  --menu-borde: #DAE1EB;
  --menu-txt:   #14202F;
  --menu-txt-2: #5E6E85;

  /* ── Los tres niveles de tinta del lateral ──
     Medidos contra #EDF1F7:
         --m1 #14202F  lo que se lee            ~15,3 : 1
         --m2 #3D4D64  lo que se acciona         ~8,7 : 1
         --m3 #63738A  el dato                   ~4,7 : 1
     La misma escala de tres pasos del tema marino, dada vuelta. */
  --m1: #14202F;
  --m2: #3D4D64;
  --m3: #63738A;
  --m-sup:   #E1E7F0;
  --m-viva:  #D3DBE7;
  --m-linea: #DAE1EB;
  --m-marca: var(--marca-acento, #0B7F72);
  --m-sobre-marca: var(--marca-sobre-acento, #FFFFFF);

  /* Las sombras vuelven a ser de tinta, no de tiznado. */
  --sombra:   0 1px 2px rgba(16,26,40,.06), 0 6px 18px rgba(16,26,40,.07);
  --sombra-2: 0 2px 6px rgba(16,26,40,.10), 0 18px 44px rgba(16,26,40,.14);
}

/* ══ EL PANEL DE ARCHIVOS TAMBIÉN ES PUNTA ══
   Usa `--carta`, que en claro es blanco: quedaría igual que el centro. Las dos
   puntas tienen que ir juntas. */
:root[data-tema="claro"] #panel { background: var(--menu); }
:root[data-tema="claro"] .panel-cabeza { border-bottom-color: var(--menu-borde); }

/* ══ LOS COLORES QUE ESTABAN CLAVADOS A MANO ══
   Trece bloques de parche dejaron colores escritos directo, pensados para el
   marino. Sobre gris claro son invisibles. Van uno por uno, con el mismo peso
   de selector que el original más el `:root[data-tema="claro"]` de adelante,
   que siempre gana. */

/* el título de una conversación */
:root[data-tema="claro"] #aside .aside-lista .conv { color: var(--m1); }
:root[data-tema="claro"] #aside .aside-lista .conv > span:not([class]) { color: var(--m1); }
:root[data-tema="claro"] #aside .conv-fila:hover .conv { color: var(--m1); }
:root[data-tema="claro"] #aside .conv-fila.viva .conv,
:root[data-tema="claro"] #aside .conv-fila.viva .conv > span:not([class]) { color: #0B1420; }

/* el dato: la hora, el rótulo del grupo, el marcador del buscador */
:root[data-tema="claro"] #aside .aside-lista .conv-cuando,
:root[data-tema="claro"] #aside .aside-titulillo,
:root[data-tema="claro"] #aside .aside-buscar svg,
:root[data-tema="claro"] #aside .aside-lista .conv > svg { color: var(--m3); }
:root[data-tema="claro"] #aside .aside-buscar input::placeholder { color: var(--m3); }
:root[data-tema="claro"] #aside .aside-buscar input { color: var(--m1); }

/* el puntico de estado */
:root[data-tema="claro"] #aside .aside-lista .conv > .conv-punto.hueco {
  border-color: color-mix(in srgb, var(--m3) 55%, transparent);
}
:root[data-tema="claro"] #aside .aside-lista .conv > .conv-punto.lleno {
  background: color-mix(in srgb, var(--m3) 70%, transparent);
}

/* la barra de desplazamiento de la lista */
:root[data-tema="claro"] #aside .aside-lista::-webkit-scrollbar-thumb { background: #C3CDDC; }
:root[data-tema="claro"] #aside .aside-lista:hover::-webkit-scrollbar-thumb { background: #A3B1C6; }
:root[data-tema="claro"] #aside .aside-lista { scrollbar-color: #C3CDDC transparent; }

/* los dos menús flotantes del lateral */
:root[data-tema="claro"] .menu-flotante.menu-oscuro {
  background: #FFFFFF; border-color: var(--menu-borde);
}
:root[data-tema="claro"] .menu-flotante.menu-oscuro button { color: var(--m1); }
:root[data-tema="claro"] .menu-flotante.menu-oscuro button:hover,
:root[data-tema="claro"] .menu-flotante.menu-oscuro button:focus-visible { background: var(--menu-2); }
:root[data-tema="claro"] .menu-flotante.menu-oscuro .menu-cab { color: var(--m3); }
:root[data-tema="claro"] .menu-flotante.menu-oscuro .menu-sep { background: var(--menu-borde); border-color: var(--menu-borde); }
:root[data-tema="claro"] .menu-flotante.menu-oscuro button svg { color: var(--m3); }
/* «Borrar» y «Cerrar sesión»: el rojo claro se hizo para fondo oscuro. */
:root[data-tema="claro"] .menu-flotante.menu-oscuro button.peligro { color: var(--mal); }
:root[data-tema="claro"] .menu-flotante.menu-oscuro button.peligro:hover {
  background: var(--mal-piso);
}
/* el menú de los temas */
:root[data-tema="claro"] .menu-flotante.menu-tema .menu-op > span > b { color: var(--m1); }
:root[data-tema="claro"] .menu-flotante.menu-tema .menu-op > span > i { color: var(--m3); }
:root[data-tema="claro"] .menu-flotante.menu-tema .menu-op.menu-puesto > span > b { color: #0B1420; }

/* la fila de la cuenta y el pie */
:root[data-tema="claro"] #aside .aside-cuenta { color: var(--m1); }
:root[data-tema="claro"] #aside .aside-cuenta > #p-plan { color: var(--m3); }
:root[data-tema="claro"] #aside .aside-pie .aside-btn { color: var(--m1); }
:root[data-tema="claro"] #aside .aside-pie .aside-btn svg { color: var(--m3); }
:root[data-tema="claro"] #aside .aside-pie #p-consumo { color: var(--m3); }
:root[data-tema="claro"] #aside .cuenta-ini { background: var(--menu-3); color: var(--m1); }

/* los dos botones de la cabeza */
:root[data-tema="claro"] #aside .icono-btn { color: var(--m2); border-color: var(--menu-borde); }
:root[data-tema="claro"] #aside .icono-btn:hover,
:root[data-tema="claro"] #aside .icono-btn:focus-visible { background: var(--menu-2); color: var(--m1); }
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn { background: var(--menu-2); }

/* ══ EL LOGO ══
   El PNG de la marca trae el nombre en casi blanco (#E0E0E0 es su color más
   repetido, 763 de las muestras): sobre gris claro desaparece.

   Se le pone su propio bloque marino, del tamaño justo. No es un parche: es
   como se resuelve un logotipo de una sola versión en un tema claro, y de paso
   el marino de la casa sigue estando en la pantalla.

   ⚠️ Si algún día hay un PNG del logo con el nombre oscuro, esto sobra: se
   quita este bloque y el logo va suelto. */
:root[data-tema="claro"] #aside .aside-logo {
  background: var(--menu-oscuro-marca, #0E1B30);
  padding: 6px 10px 6px 8px;
  margin-left: -2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   EL TEMA CLARO, ESTA VEZ SÍ - tema-claro-2

   POR QUÉ NO FUNCIONÓ EL BLOQUE ANTERIOR, MEDIDO:

       :root[data-tema="claro"] { --m1: #14202F; }   ← lo que escribí
       #aside { --m1: #EDF2F9; }                     ← lo que ya existía, línea 3416

   Los colores del lateral están definidos SOBRE EL PROPIO `#aside`, no en la
   raíz. Una variable puesta en el elemento le gana a la que baja heredada de
   `:root`, sin importar el peso del selector: la herencia solo llega hasta
   donde nadie la pisa. Medido después de aplicarlo:
       --menu en el aside .... #0E1B30   (debía ser #EDF1F7)
       --m1 en el aside ...... #EDF2F9   (debía ser #14202F)
       el título ............. contraste 1,07 : 1 — invisible
       208 piezas por debajo de 4,5 : 1

   Acá se redefinen EN EL MISMO SITIO donde están: sobre `#aside`. Y el fondo se
   pone además directo, para que no dependa de ninguna variable.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LAS PUNTAS: gris claro con sesgo azul ──
   #EDF1F7 no es gris de fábrica: lleva el tono del marino de la casa. Un gris
   neutro al lado del turquesa de la marca se ve sucio. */
:root[data-tema="claro"] #aside {
  background: #EDF1F7;
  border-right-color: #DAE1EB;

  --menu:       #EDF1F7;
  --menu-2:     #E2E8F1;
  --menu-3:     #D2DAE7;
  --menu-borde: #DAE1EB;
  --menu-txt:   #14202F;
  --menu-txt-2: #5E6E85;

  /* Los tres niveles de tinta, la misma escala del marino dada vuelta.
     Medidos contra #EDF1F7:
         --m1 #14202F  lo que se lee        15,0 : 1
         --m2 #3D4D64  lo que se acciona     8,5 : 1
         --m3 #63738A  el dato              4,6 : 1  */
  --m1: #14202F;
  --m2: #3D4D64;
  --m3: #63738A;
  --m-sup:   #E2E8F1;
  --m-viva:  #D2DAE7;
  --m-linea: #DAE1EB;

  /* ⚠️ LA MARCA. Acá se usa `--marca-acento` —la versión OSCURA del color de la
     empresa— porque el fondo ahora es claro; en el lateral marino se usaba
     `--marca-acento-claro`. Las dos las calcula app.js por empresa: esto es
     marca blanca y clavar el hexadecimal le borraría el color a los clientes.
     Sin empresa configurada cae en el verde DGNOVA #0B7F72. */
  --m-marca: var(--marca-acento, #0B7F72);
  --m-sobre-marca: var(--marca-sobre-acento, #FFFFFF);
}

/* ── EL CENTRO: blanco, que es lo más claro ── */
:root[data-tema="claro"] {
  --piso:    #FFFFFF;
  --carta:   #FFFFFF;
  --carta-2: #F3F6FA;
  --carta-3: #E9EEF6;
  --borde:   #DCE3ED;
  --borde-2: #EAF0F6;
}

/* ── LA OTRA PUNTA: el panel de archivos ──
   Usa `--carta`, que en claro es blanco: quedaría igual que el centro. Las dos
   puntas van juntas. */
:root[data-tema="claro"] #panel {
  background: #EDF1F7;
  border-left-color: #DAE1EB;
}
:root[data-tema="claro"] .panel-cabeza { border-bottom-color: #DAE1EB; }

/* ══ LOS COLORES QUE ESTABAN CLAVADOS A MANO ══
   Trece bloques de parche dejaron colores escritos directo, pensados para el
   marino. Cada uno lleva acá su gemelo claro, con el mismo selector de origen
   más el `:root[data-tema="claro"]` de adelante, que siempre gana. */
:root[data-tema="claro"] #aside .aside-lista .conv,
:root[data-tema="claro"] #aside .aside-lista .conv > span:not([class]),
:root[data-tema="claro"] #aside .conv-fila:hover .conv { color: #14202F; }
:root[data-tema="claro"] #aside .conv-fila.viva .conv,
:root[data-tema="claro"] #aside .conv-fila.viva .conv > span:not([class]) { color: #0B1420; }

:root[data-tema="claro"] #aside .aside-lista .conv-cuando,
:root[data-tema="claro"] #aside .aside-titulillo,
:root[data-tema="claro"] #aside .aside-buscar svg,
:root[data-tema="claro"] #aside .aside-lista .conv > svg { color: #63738A; }
:root[data-tema="claro"] #aside .aside-buscar input { color: #14202F; background: #FFFFFF; border-color: #DAE1EB; }
:root[data-tema="claro"] #aside .aside-buscar input::placeholder { color: #63738A; }

:root[data-tema="claro"] #aside .aside-lista .conv > .conv-punto.hueco { border-color: #93A0B4; }
:root[data-tema="claro"] #aside .aside-lista .conv > .conv-punto.lleno { background: #8593A8; }

:root[data-tema="claro"] #aside .aside-lista::-webkit-scrollbar-thumb { background: #C3CDDC; }
:root[data-tema="claro"] #aside .aside-lista:hover::-webkit-scrollbar-thumb { background: #9FAEC4; }
:root[data-tema="claro"] #aside .aside-lista { scrollbar-color: #C3CDDC transparent; }

/* los dos botones de la cabeza */
:root[data-tema="claro"] #aside .icono-btn { color: #3D4D64; border-color: #DAE1EB; }
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn { background: #E2E8F1; }
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn:hover { background: #D2DAE7; color: #14202F; }

/* el pie y la fila de la cuenta */
:root[data-tema="claro"] #aside .aside-cuenta,
:root[data-tema="claro"] #aside .aside-pie .aside-btn { color: #14202F; }
:root[data-tema="claro"] #aside .aside-cuenta > #p-plan,
:root[data-tema="claro"] #aside .aside-pie .aside-btn svg,
:root[data-tema="claro"] #aside .aside-pie #p-consumo { color: #63738A; }
:root[data-tema="claro"] #aside .cuenta-ini { background: #D2DAE7; color: #14202F; }
:root[data-tema="claro"] #aside .aside-pie { border-top-color: #DAE1EB; }
:root[data-tema="claro"] #aside .aside-cabeza { border-bottom-color: #DAE1EB; }

/* los menús flotantes del lateral */
:root[data-tema="claro"] .menu-flotante.menu-oscuro {
  background: #FFFFFF; border-color: #DAE1EB;
  box-shadow: 0 2px 6px rgba(16,26,40,.10), 0 18px 44px rgba(16,26,40,.14);
}
:root[data-tema="claro"] .menu-flotante.menu-oscuro button { color: #14202F; }
:root[data-tema="claro"] .menu-flotante.menu-oscuro button svg { color: #63738A; }
:root[data-tema="claro"] .menu-flotante.menu-oscuro button:hover,
:root[data-tema="claro"] .menu-flotante.menu-oscuro button:focus-visible { background: #F0F3F8; }
:root[data-tema="claro"] .menu-flotante.menu-oscuro .menu-cab { color: #63738A; }
:root[data-tema="claro"] .menu-flotante.menu-oscuro .menu-sep { background: #DAE1EB; border-color: #DAE1EB; }
/* El rojo claro se hizo para fondo oscuro: sobre blanco no se lee. */
:root[data-tema="claro"] .menu-flotante.menu-oscuro button.peligro { color: #A32B22; }
:root[data-tema="claro"] .menu-flotante.menu-oscuro button.peligro:hover { background: #FADEDB; }
:root[data-tema="claro"] .menu-flotante.menu-tema .menu-op > span > b { color: #14202F; }
:root[data-tema="claro"] .menu-flotante.menu-tema .menu-op > span > i { color: #63738A; }
:root[data-tema="claro"] .menu-flotante.menu-tema .menu-op.menu-puesto > span > b { color: #0B1420; }

/* ══ EL LOGO ══
   El PNG de la marca trae el nombre en casi blanco —#E0E0E0 es su color más
   repetido, 763 de las muestras— así que sobre gris claro desaparece.

   Se le pone su propio bloque marino del tamaño justo. No es un parche: es como
   se resuelve un logotipo de una sola versión en un tema claro, y de paso el
   marino de la casa sigue estando en la pantalla.

   ⚠️ El día que haya un PNG del logo con el nombre oscuro, esto sobra: se quita
   este bloque y el logo va suelto. */
:root[data-tema="claro"] #aside .aside-logo {
  background: #0E1B30;
  padding: 5px 9px;
  margin-left: -1px;
}
:root[data-tema="claro"] #aside #marca-lateral { color: #FFFFFF; }

/* ══ EL TERCER NIVEL DE TINTA, UN PASO MÁS OSCURO - claro-m3 ══
   MEDIDO: #63738A sobre #EDF1F7 da 4,26 : 1 y el mínimo de texto corriente es
   4,5. Lo llevan los rótulos de grupo, la línea del plan, el rol y el «⋮».
   #57667C da 5,08 : 1 — pasa con holgura y sigue siendo un paso claramente por
   debajo del título (15,0) y de lo que se acciona (8,5). */
:root[data-tema=claro] #aside { --m3: #57667C; }
:root[data-tema=claro] #aside .aside-lista .conv-cuando,
:root[data-tema=claro] #aside .aside-titulillo,
:root[data-tema=claro] #aside .aside-buscar svg,
:root[data-tema=claro] #aside .aside-lista .conv > svg,
:root[data-tema=claro] #aside .aside-buscar input::placeholder,
:root[data-tema=claro] #aside .aside-cuenta > #p-plan,
:root[data-tema=claro] #aside .cuenta-mas,
:root[data-tema=claro] #aside .aside-pie .aside-btn svg,
:root[data-tema=claro] #aside .aside-pie #p-consumo,
:root[data-tema=claro] .menu-flotante.menu-oscuro .menu-cab,
:root[data-tema=claro] .menu-flotante.menu-oscuro button svg,
:root[data-tema=claro] .menu-flotante.menu-tema .menu-op > span > i { color: #57667C; }


/* ══════════════════════════════════════════════════════════════════════════
   CUATRO DEFECTOS DEL TEMA CLARO - claro-arreglos

   Salieron de la revisión del tema. Tres los introduje yo con el bloque
   anterior; el cuarto venía de antes y solo se ve en claro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 · LOS DOS TEMAS SE SEGUÍAN PARECIENDO ══
   Es EL reclamo de fondo de Luis: que «claro» se veía igual que «híbrido». Yo
   lo arreglé a medias.

   MEDIDO: el lateral quedó en #EDF1F7 contra el centro blanco = 1,13 : 1.
   La referencia —el modo claro del escritorio de Hermes— deja esa distancia en
   1,056 : 1 y se apoya en la línea divisoria; con el brillo alto de un
   portátil, eso desaparece.

   #E7ECF4 la sube a 1,19 : 1 — 16,5 puntos de luminancia, TRES VECES la de
   Hermes. El borde entre la zona y el centro se ve solo, sin depender de
   ninguna sombra. */
:root[data-tema="claro"] #aside,
:root[data-tema="claro"] #panel {
  background: #E7ECF4;
  --menu: #E7ECF4;
}
/* Y las dos superficies de encima bajan con él, para conservar los pasos:
       lo que se levanta y el paso del mouse ... 1,14 : 1 sobre el lateral
       la conversación abierta ................. 1,34 : 1 sobre el lateral */
:root[data-tema="claro"] #aside {
  --menu-2: #D6DEEB;
  --menu-3: #C0CEE2;
  --m-sup:  #D6DEEB;
  --m-viva: #C0CEE2;
}
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn { background: #D6DEEB; }
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn:hover { background: #C0CEE2; }
:root[data-tema="claro"] #aside .cuenta-ini { background: #C0CEE2; }

/* ══ 2 · EL MEDIDOR DEL PLAN NO EXISTÍA ══
   MEDIDO: la canaleta usa `--borde`, que en claro es #DCE3ED, y encima va el
   turquesa de la marca. Turquesa sobre gris claro = 1,01 : 1. O sea que el
   medidor estaba pintado y NO SE VEÍA.

   La canaleta se pone marino. No es un color inventado: #22304A es
   `--menu-borde` del tema marino, o sea que se queda dentro de la familia de la
   casa. Sobre él, el degradado azul→turquesa da 3,12:1 el azul y 7,67:1 el
   turquesa. */
:root[data-tema="claro"] #aside .medidor-riel { background: #22304A; }

/* ══ 3 · EL PUNTO DE LA CONVERSACIÓN ABIERTA PERDÍA EL COLOR DE LA EMPRESA ══
   Lo rompí yo, y es aritmética de peso de selector:

       :root[data-tema="claro"] … .conv > .conv-punto.hueco   →  1 id · 6 clases
       #aside .conv-fila.viva .conv > .conv-punto             →  1 id · 3 clases

   Mi regla de «hueco» pesa más que la de «la fila abierta», así que en claro la
   conversación donde uno está volvía al aro gris. Acá la de la fila abierta
   recupera el peso, y de paso el punto responde al mouse como el resto. */
:root[data-tema="claro"] #aside .conv-fila.viva .conv > .conv-punto,
:root[data-tema="claro"] #aside .conv-fila.viva .conv > .conv-punto.hueco,
:root[data-tema="claro"] #aside .conv-fila.viva .conv > .conv-punto.lleno {
  background: var(--m-marca);
  border: 0;
}
:root[data-tema="claro"] #aside .conv-fila:hover .conv > .conv-punto.hueco { border-color: var(--m3); }
:root[data-tema="claro"] #aside .conv-fila:hover .conv > .conv-punto.lleno { background: var(--m2); }

/* ══ 4 · LA TINTA, RECALCULADA SOBRE EL PAPEL NUEVO ══
   Al bajar el lateral de #EDF1F7 a #E7ECF4 todo sube un poco de contraste, así
   que los tres niveles se recalculan para conservar la escala:
       --m1 #0F1A2A  lo que se lee ....... 14,7 : 1
       --m2 #33415A  lo que se acciona ...  8,7 : 1
       --m3 #4E5D77  el dato .............  5,6 : 1
   El dato queda con holgura sobre el mínimo de 4,5 incluso encima de la
   superficie levantada, que es su peor fondo. */
:root[data-tema="claro"] #aside {
  --m1: #0F1A2A;
  --m2: #33415A;
  --m3: #4E5D77;
  --menu-txt: #0F1A2A;
  --menu-txt-2: #4E5D77;
}
:root[data-tema="claro"] #aside .aside-lista .conv,
:root[data-tema="claro"] #aside .aside-lista .conv > span:not([class]),
:root[data-tema="claro"] #aside .conv-fila:hover .conv,
:root[data-tema="claro"] #aside .aside-buscar input,
:root[data-tema="claro"] #aside .aside-cuenta,
:root[data-tema="claro"] #aside .aside-pie .aside-btn,
:root[data-tema="claro"] #aside .cuenta-ini { color: #0F1A2A; }
:root[data-tema="claro"] #aside .conv-fila.viva .conv,
:root[data-tema="claro"] #aside .conv-fila.viva .conv > span:not([class]) { color: #0A121E; }
:root[data-tema="claro"] #aside .aside-lista .conv-cuando,
:root[data-tema="claro"] #aside .aside-titulillo,
:root[data-tema="claro"] #aside .aside-buscar svg,
:root[data-tema="claro"] #aside .aside-lista .conv > svg,
:root[data-tema="claro"] #aside .aside-buscar input::placeholder,
:root[data-tema="claro"] #aside .aside-cuenta > #p-plan,
:root[data-tema="claro"] #aside .cuenta-mas,
:root[data-tema="claro"] #aside .aside-pie .aside-btn svg,
:root[data-tema="claro"] #aside .aside-pie #p-consumo { color: #4E5D77; }
:root[data-tema="claro"] #aside .icono-btn { color: #33415A; }

/* ══ LA PANTALLA DE ENTRADA QUEDÓ ILEGIBLE - claro-entrar ══
   MEDIDO con el tema claro puesto, ANTES de entrar:
       .entrar-obra   fondo #0E1B30 (marino)  ·  letra #14202F (marino oscuro)
   O sea letra marina sobre marino: 1,05 : 1. No se lee nada.

   La causa: `.entrar-obra` toma su letra de `--menu-txt`, y el tema claro da
   vuelta esa variable en la raíz porque el LATERAL pasa a ser claro. Pero la
   pantalla de entrada NO es el lateral: es la mitad marina de la puerta, y se
   queda marina en los tres temas —ahí va el logo de la empresa sobre su color—.

   Se le devuelve su letra clara. Es la excepción que confirma la regla: la
   variable dice «texto sobre la superficie de marca», y esta pantalla es la
   única que conserva esa superficie cuando el lateral ya no la tiene. */
:root[data-tema=claro] .entrar-obra { color: #E3E9F2; }
:root[data-tema=claro] .entrar-obra .entrar-frase p,
:root[data-tema=claro] .entrar-obra .entrar-pie { color: #A9B6C8; }
:root[data-tema=claro] .entrar-obra h1,
:root[data-tema=claro] .entrar-obra strong { color: #FFFFFF; }


/* ══════════════════════════════════════════════════════════════════════════
   CUATRO ARREGLOS DEL TEMA CLARO - claro-arreglos-2
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 · LAS PUNTAS, MÁS CLARAS ══
   Luis lo pidió dos veces. Yo había hecho lo contrario: las OSCURECÍ de #EDF1F7
   a #E7ECF4 para separarlas del centro. Se separaron, pero quedaron pesadas.

   La separación no tiene que salir del gris. Sale de una LÍNEA, que es como lo
   resuelve el escritorio de Hermes: allá la distancia de luminancia es apenas
   1,056 : 1 y lo que parte las zonas es el canto.

       el papel de las puntas ...  #F1F4FA   1,10 : 1 contra el centro
       el canto que las parte ...  #C8D3E3   1,50 : 1 contra el centro
                                             1,36 : 1 contra el papel

   Así el borde se ve —lo pone la línea— y el gris deja de pesar. */
:root[data-tema="claro"] #aside {
  background: #F1F4FA;
  --menu: #F1F4FA;
  --menu-2: #E4EAF3;
  --menu-3: #D4DEED;
  --m-sup:  #E4EAF3;
  --m-viva: #D4DEED;
  border-right: 1px solid #C8D3E3;
}
:root[data-tema="claro"] #panel {
  background: #F1F4FA;
  border-left: 1px solid #C8D3E3;
}
/* Las costuras de dentro bajan con el papel, para que no compitan con el canto. */
:root[data-tema="claro"] #aside .aside-cabeza { border-bottom-color: #DCE4EF; }
:root[data-tema="claro"] #aside .aside-pie { border-top-color: #DCE4EF; }
:root[data-tema="claro"] #aside { --m-linea: #DCE4EF; --menu-borde: #DCE4EF; }
:root[data-tema="claro"] #aside .cuenta-ini { background: #D4DEED; }

/* ══ 2 · LOS DOS BOTONES DE ARRIBA PARECÍAN PEGADOS CON PEGANTE ══
   Luis: «los iconos sobre otro fondo, como si esto fuera Paint».

   MEDIDO: yo les puse relleno #D6DEEB sobre un lateral #E7ECF4. En el tema
   marino ese relleno es un susurro —1,11 : 1— y sirve para que el mando se lea
   como un mando. Sobre papel claro el mismo gesto se ve como un recorte pegado
   encima, porque en claro los bordes de una superficie se notan mucho más.

   En claro el mando no lleva relleno: lleva su ícono y ya. El relleno aparece
   solo al pasar el mouse, que es cuando de verdad hace falta decir «esto se
   toca». */
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn {
  background: transparent;
  border-color: transparent;
}
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn:hover,
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn:focus-visible {
  background: #E4EAF3;
  border-color: #DCE4EF;
}

/* ══ 3 · «MIS ARCHIVOS» Y EL PERFIL NO SON CONVERSACIONES ══
   Luis: «no debes colocarlos así como si fueran títulos de conversación».
   Tiene razón, y es un error de jerarquía, no de color.

   MEDIDO: los dos traían relleno #D6DEEB Y un borde de 1 px. Eso es la receta
   de una TARJETA. En una lista donde las conversaciones son filas planas, dos
   tarjetas al pie se leen como los dos elementos más importantes de la pantalla
   — y son justo lo contrario: se tocan una vez al día.

   Quedan planos, como las conversaciones, y se levantan solo al pasar el mouse.
   La diferencia con una conversación la hace su sitio —debajo de la línea del
   pie— y su ícono, no un recuadro. */
:root[data-tema="claro"] #aside .aside-pie .aside-btn,
:root[data-tema="claro"] #aside .aside-cuenta {
  background: transparent;
  border-color: transparent;
}
:root[data-tema="claro"] #aside .aside-pie .aside-btn:hover,
:root[data-tema="claro"] #aside .aside-pie .aside-btn:focus-visible,
:root[data-tema="claro"] #aside .aside-cuenta:hover,
:root[data-tema="claro"] #aside .aside-cuenta:focus-visible {
  background: #E4EAF3;
}
/* Y lo mismo en el tema marino: allá el defecto es el mismo, solo que el
   susurro lo disimula. Un pie que se lee como dos tarjetas está mal en los
   tres temas. */
#aside .aside-pie .aside-btn,
#aside .aside-cuenta { background: transparent; border-color: transparent; }
#aside .aside-pie .aside-btn:hover,
#aside .aside-pie .aside-btn:focus-visible,
#aside .aside-cuenta:hover,
#aside .aside-cuenta:focus-visible { background: var(--m-sup); }

/* ══ 4 · EL MENÚ ACHICADO ══
   MEDIDO: en 68 px de ancho, la cabeza apila el logo y los DOS botones en
   columna, cada uno con su relleno, y el pie sigue mostrando las dos tarjetas
   con el texto cortado. Se lee como tres cosas sueltas, no como un riel.

   Un riel compacto es una columna de símbolos centrados del mismo tamaño, sin
   rellenos y sin texto. Eso es lo que queda. */
#app.aside-chico #aside .aside-cabeza {
  flex-direction: column; align-items: center; gap: 4px;
  height: auto; min-height: 0; padding: 10px 6px 8px;
}
#app.aside-chico #aside .aside-logo { padding: 4px 6px; margin: 0; }
#app.aside-chico #aside .aside-logo img { max-width: 34px; }
#app.aside-chico #aside .aside-cabeza .icono-btn {
  width: 32px; height: 32px; flex: 0 0 32px;
  background: transparent; border-color: transparent;
}
/* La flecha del tema no cabe en 68 px y no hace falta: en el riel, un símbolo
   solo ya se lee como «esto hace algo». */
#app.aside-chico #aside #b-tema { width: 32px; min-width: 0; padding: 0; gap: 0; }
#app.aside-chico #aside #b-tema::after { display: none; }
/* El pie: solo símbolos, centrados, sin texto ni recuadro. */
#app.aside-chico #aside .aside-pie { padding: 8px 6px 10px; gap: 4px; }
#app.aside-chico #aside .aside-pie .aside-btn,
#app.aside-chico #aside .aside-cuenta {
  justify-content: center; gap: 0; padding: 0;
  background: transparent; border-color: transparent;
}
#app.aside-chico #aside .aside-cuenta > #p-quien,
#app.aside-chico #aside .aside-cuenta > #p-plan,
#app.aside-chico #aside .aside-cuenta > .cuenta-mas,
#app.aside-chico #aside .aside-pie .aside-btn > span,
#app.aside-chico #aside .medidor p { display: none; }
#app.aside-chico #aside .medidor { padding: 4px 8px 8px; }

/* ══ EL PIE DEL RIEL SE QUEDA ABAJO - chico-pie ══
   MEDIDO en el menú achicado: el pie —el ícono de archivos y el avatar— quedaba
   pegado debajo del botón de nueva conversación, a 205 px del techo, con 650 px
   de vacío debajo.

   La causa: la lista de conversaciones se esconde con `display: none` cuando el
   menú se achica, y un elemento escondido sale del reparto de la caja flexible.
   Era ella la que empujaba el pie hasta abajo.

   Se le dice al pie que se empuje solo. */
#app.aside-chico #aside .aside-pie { margin-top: auto; }

/* ══ LA FILA DE LA CUENTA TAMPOCO ES UNA TARJETA - pie-plano ══
   Mi arreglo anterior no le llegó, y es aritmética de peso otra vez:

       #aside #b-cuenta-menu   →  DOS identificadores   (línea 3725)
       #aside .aside-cuenta    →  uno y una clase       (mi regla)

   El elemento tiene las dos cosas —clase `aside-cuenta` e id `b-cuenta-menu`—
   y yo apunté a la clase. La del id gana, y ella le pone relleno `--m-sup` y
   borde de 1 px: la receta de una tarjeta.

   Luis: «no debes colocarlos así como si fueran títulos de conversación». Queda
   plana, como «Mis archivos», y se levanta solo al pasar el mouse. Lo que la
   distingue de una conversación es su sitio —debajo de la línea del pie— y su
   avatar, no un recuadro. */
#app #aside #b-cuenta-menu {
  background: transparent;
  border-color: transparent;
}
#app #aside #b-cuenta-menu:hover,
#app #aside #b-cuenta-menu:focus-visible { background: var(--m-sup); }

/* ══════════════════════════════════════════════════════════════════════════
   EL RIEL COMPACTO, NIVELADO - riel-parejo

   Luis: «el sidebar compactado se ve mal, el usuario pequeño, el botón grande,
   no está nivelado nada».

   MEDIDO en los 68 px del riel, mando por mando:

       colapsar ................ 32 x 32
       tema .................... 32 x 32
       nueva conversación ...... 43 x 34     ← distinto
       mis archivos ............ 55 x 34     ← distinto
       fila de la cuenta ....... 55 x 34     ← distinto
       el avatar ...............  22 x 22    ← distinto
       el ícono del nuevo ...... 15 x 15
       el ícono de archivos .... 15 x 15
       el logo ................. 40 x 26

   CINCO anchos distintos para cinco cosas que en un riel son lo mismo: un
   cuadrado que se toca. Y los huecos entre ellos tampoco cuadran: 36, 51 y 38.

   Un riel compacto es UNA COLUMNA DE CUADRADOS IGUALES. Todo pasa a 36 x 36
   —el mismo cuadrado— con su símbolo en 17, el avatar en 24, y un solo hueco
   entre piezas.

   ⚠️ 36 px, no 32: es lo que deja al símbolo de 17 con aire suficiente para
   que el cuadrado del mouse no se vea apretado, y en el celular la regla de
   44 px que ya existe sigue mandando encima de esta.
   ══════════════════════════════════════════════════════════════════════════ */
#app.aside-chico #aside {
  --riel: 36px;
  --riel-simbolo: 17px;
}

/* Todos los mandos, el mismo cuadrado. */
#app.aside-chico #aside .aside-cabeza .icono-btn,
#app.aside-chico #aside #b-nueva,
#app.aside-chico #aside .aside-pie .aside-btn,
#app.aside-chico #aside #b-cuenta-menu {
  width: var(--riel); min-width: var(--riel); max-width: var(--riel);
  height: var(--riel); min-height: var(--riel);
  flex: 0 0 var(--riel);
  padding: 0; gap: 0;
  display: flex; align-items: center; justify-content: center;
  margin-left: auto; margin-right: auto;
}
/* Todos los símbolos, el mismo tamaño. */
#app.aside-chico #aside .aside-cabeza .icono-btn svg,
#app.aside-chico #aside #b-nueva svg,
#app.aside-chico #aside .aside-pie .aside-btn svg {
  width: var(--riel-simbolo); height: var(--riel-simbolo); flex: none;
}
/* El avatar es un símbolo más: dos tercios del cuadrado. */
#app.aside-chico #aside .cuenta-ini {
  width: 24px; height: 24px; min-width: 24px; flex: none; font-size: 10px;
}
/* El logo, dentro del mismo cuadrado y sin su placa marina, que en 68 px de
   ancho se comía toda la cabeza. */
#app.aside-chico #aside .aside-logo {
  width: var(--riel); height: var(--riel);
  padding: 0; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
#app.aside-chico #aside .aside-logo img {
  max-width: 30px; max-height: 26px; width: auto; height: auto;
}

/* UN SOLO HUECO entre piezas: 8 px. Antes eran 36, 51 y 38 px de separación
   entre bloques distintos, que es lo que se lee como «no está nivelado». */
#app.aside-chico #aside .aside-cabeza { gap: 8px; padding: 10px 0 10px; }
#app.aside-chico #aside .aside-zona { padding: 8px 0; }
#app.aside-chico #aside .aside-pie { padding: 8px 0 12px; gap: 8px; }
#app.aside-chico #aside .aside-buscar { display: none; }

/* ⚠️ En el celular manda la regla de 44 px que ya existe, y este bloque no
   puede taparla: el dedo necesita el área, el mouse no. */
@media (hover: none) {
  #app.aside-chico #aside { --riel: 44px; }
  #app.aside-chico #aside .cuenta-ini { width: 28px; height: 28px; min-width: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL PIE SE SALÍA DEL LATERAL - pie-no-sale

   MEDIDO, con el lateral llegando hasta x = 268:

       el pie ................  0 → 267    267 px   ✅
       «Mis archivos» ........ 16 → 287    271,328  ← SE SALE 19 px
       la fila de la cuenta .. 16 → 287    271,328  ← SE SALE 19 px
       el medidor ............ 16 → 287    271,328  ← SE SALE 19 px
       una conversación ...... 16 → 261    245      ✅

   Los tres miden EXACTAMENTE lo mismo, 271,328, y ninguno de los tres lo pide:
   los tres dicen `width: 100%`. El 100% se resolvió contra una columna que
   creció sola.

   LA CAUSA: el pie es una caja de rejilla de una sola columna `1fr`. En una
   rejilla, el tamaño mínimo de una pieza es su CONTENIDO MÍNIMO, no cero. La
   fila de la cuenta lleva avatar + «Luis Carlos Luna» + «· Dirección» + el
   «⋮», y todo eso junto sin partir mide 271,328. La columna creció hasta caber
   esa fila, y las otras dos se estiraron con ella.

   Es el defecto de rejilla más común que hay, y por eso `minmax(0, 1fr)`
   existe: dice «esta columna puede achicarse por debajo de su contenido», que
   es lo que deja que el texto se corte con puntos en vez de empujar la caja.
   ══════════════════════════════════════════════════════════════════════════ */
#aside .aside-pie { grid-template-columns: minmax(0, 1fr); }
#aside .aside-pie > *,
#aside .aside-pie .aside-btn,
#aside #b-cuenta-menu,
#aside .medidor { min-width: 0; max-width: 100%; }

/* ══ Y LOS DOS QUE QUEDARON DESNIVELADOS EN EL RIEL ══
   MEDIDO después de nivelar: de las nueve piezas del riel compacto, siete
   quedaron en 36 x 36. Dos no:
       el botón del tema ....  32 x 36   ← una regla mía anterior le clava 32
       la imagen del logo ...  40 x 26   ← otra le clava 40 de ancho
   Las dos se corrigen con el peso que hace falta. */
#app.aside-chico #aside #b-tema {
  width: var(--riel); min-width: var(--riel); max-width: var(--riel);
}
#app.aside-chico #aside .aside-logo img {
  max-width: 28px; width: auto; height: auto;
}

/* ══ EL LOGO DEL RIEL, A SU TAMAÑO - riel-logo ══
   MEDIDO: el logo del riel compacto queda en 40 x 26, cuando su proporción real
   es 290 x 84 — o sea que a 26 de alto le corresponden 90 de ancho. Con
    no se deforma: se encoge dentro de una caja de 40 x 26
   y deja aire arriba y abajo. Por eso en el riel se ve chiquito y descuadrado
   al lado de los símbolos de 17.

   Dos reglas mías con más peso no lograron cambiarlo, así que acá va con la
   marca que zanja: 28 px de ancho, la altura que le corresponda. Es lo mismo
   que se hizo con las puntas rectas, y por la misma razón — una medida que no
   admite excepciones dentro de un subárbol acotado. */
#app.aside-chico #aside .aside-logo img {
  max-width: 28px !important;
  max-height: none !important;
  width: 28px !important;
  height: auto !important;
}

/* ══ EL SÍMBOLO DE LA MARCA EN EL RIEL - riel-simbolo ══
   MEDIDO: el logo completo mide 290 x 84. En un riel de 68 px, entero y
   proporcionado queda en 28 x 8 — una tirita de 8 px de alto al lado de
   símbolos de 17. Ilegible y descuadrado.

   La causa es que el archivo trae DOS cosas: el símbolo (los primeros ~84 px,
   cuadrados) y la palabra «dgnova» (los otros ~206). En un riel solo cabe el
   símbolo, que es justo lo que hacen todas las aplicaciones cuando se achican.

   No hay un archivo aparte del símbolo: el icono.svg que está en la carpeta de
   marca es un marcador genérico —una N azul en una caja— que NO es la marca.
   Así que el símbolo se saca del mismo PNG, recortándolo: la imagen se escala
   a 26 de alto y se muestra su parte izquierda.

   26 x 26 lo pone en la misma familia que los símbolos de 17 sin quedar
   chiquito: es una marca, tiene derecho a pesar un poco más.

   ATENCION: si algun dia hay un PNG o SVG del simbolo solo, esto sobra. */
#app.aside-chico #aside .aside-logo img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  object-fit: cover !important;
  object-position: left center !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   EL LOGO CLARO DE VERDAD, Y EL RIEL SIN COSTURAS - logo-claro-riel
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 · FUERA LA PLACA MARINA: HAY LOGO PARA FONDO CLARO ══
   Luis: quitarle el fondo y ponerle las letras negras. Tenia razon: la placa
   marina era un parche, no una solucion.

   Se hizo el archivo que faltaba, dgnova-logo-claro.png, a partir del original:
       el simbolo termina en la columna 62
       la palabra arranca en la 82
       entre las dos hay 20 columnas vacias, o sea corte limpio en la 72
   De la 72 en adelante todo pasa a tinta marina, conservando la transparencia
   -que es donde vive la suavidad del borde de cada letra-. El simbolo, con su
   degradado azul turquesa, queda intacto.

   ATENCION: archivo NUEVO. El original no se toco.

   El cambio de imagen se hace con content, que en un img reemplaza la fuente
   sin tener que meterle mano al HTML ni al JavaScript. */
:root[data-tema="claro"] #aside .aside-logo {
  background: transparent;
  padding: 0;
  margin-left: 0;
}
:root[data-tema="claro"] #aside .aside-logo img {
  content: url("/marca/dgnova-logo-claro.png");
}
:root[data-tema="claro"] #aside #marca-lateral { color: #0F1A2A; }

/* ══ 2 · EL RIEL, UN SOLO GRUPO ARRIBA Y OTRO ABAJO ══
   MEDIDO en el riel de 68 px: entre el boton del tema y el de nueva
   conversacion hay una costura horizontal, y otra encima del pie. En un riel
   de 68 px de ancho esas dos lineas se leen como cortes, no como separaciones:
   parten cuatro simbolos en tres pedazos sueltos.

   Arriba queda UN grupo -marca, colapsar, tema, nueva conversacion- con el
   mismo hueco entre los cuatro. Abajo, otro. Y entre los dos, el vacio de la
   lista, que es lo normal en un riel. */
#app.aside-chico #aside .aside-cabeza {
  border-bottom: 0;
  padding: 10px 0 0;
}
#app.aside-chico #aside .aside-zona { padding: 8px 0 0; }
#app.aside-chico #aside .aside-pie { padding: 10px 0 12px; }

/* El boton de nueva conversacion es el unico con relleno del riel, y esta bien
   que lo tenga -es la accion principal-, pero en 36 px el simbolo de 17 le
   quedaba flotando. Se le ajusta para que pese lo mismo que sus vecinos. */
#app.aside-chico #aside #b-nueva svg { width: 18px; height: 18px; }

/* La marca no lleva relleno en el riel: es una marca, no un boton. */
#app.aside-chico #aside .aside-logo { background: transparent; }

/* ══ EL GRIS DE LAS PUNTAS, MAS CLARO - papel-mas-claro ══
   Luis: cambiar ese color por un gris mas clarito.

   MEDIDO: #F1F4FA contra el centro blanco da 1,10 : 1. Subiendolo a #F5F8FD la
   distancia baja a 1,07 : 1 — practicamente nada. Y esta bien que sea nada:
   la separacion NO la hace el gris, la hace el canto.

   Por eso el canto sube un paso al mismo tiempo, de #C8D3E3 a #C2CEE0: 1,55 : 1
   contra el centro. El borde se ve MAS que antes aunque el papel sea mas claro,
   que es exactamente lo que se busca — puntas claras, separacion nitida. */
:root[data-tema="claro"] #aside {
  background: #F5F8FD;
  --menu: #F5F8FD;
  --menu-2: #E8EDF6;
  --menu-3: #D8E1EE;
  --m-sup:  #E8EDF6;
  --m-viva: #D8E1EE;
  border-right-color: #C2CEE0;
}
:root[data-tema="claro"] #panel {
  background: #F5F8FD;
  border-left-color: #C2CEE0;
}
:root[data-tema="claro"] #aside .cuenta-ini { background: #D8E1EE; }
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn:hover,
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn:focus-visible { background: #E8EDF6; }
:root[data-tema="claro"] #aside .aside-pie .aside-btn:hover,
:root[data-tema="claro"] #aside .aside-pie .aside-btn:focus-visible,
:root[data-tema="claro"] #app #aside #b-cuenta-menu:hover,
:root[data-tema="claro"] #app #aside #b-cuenta-menu:focus-visible { background: #E8EDF6; }

/* ══════════════════════════════════════════════════════════════════════════
   EL CHAT TAMBIEN, Y SIN REDONDEO - chat-azul-recto

   Luis: y que paso con estos colores, ademas que no sea redondeado.

   MEDIDO en una conversacion de verdad, despues de pasar el acento a azul:

       mi burbuja, fondo ......  #E0F7F4   verde menta   << se quedo
       mi burbuja, borde ......  #9FE5DC   verde agua    << se quedo
       nombre del Agente ......  #0A7266   verde oscuro  << se quedo
       etiqueta ASISTENTE .....  #0A7266 sobre #E0F7F4   << se quedo
       el boton de enviar .....  #1B5FBF   azul          ok

   El acento cambio, pero sus TRES acompanantes estaban escritos a mano en
   verde: no se derivaban de el. Por eso el chat quedo mitad azul y mitad verde.

   Se derivan del acento con color-mix, asi que de ahora en adelante siguen a la
   empresa: El Yunque, con su naranja, va a tener su menta naranja sin que nadie
   toque nada.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --acento-piso: color-mix(in srgb, var(--acento) 11%, #FFFFFF);
  --acento-bord: color-mix(in srgb, var(--acento) 34%, #FFFFFF);
  --acento-2:    color-mix(in srgb, var(--acento) 88%, #000000);
}
/* En oscuro la mezcla va contra el fondo oscuro, no contra el blanco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="hibrido"]) {
    --acento-piso: color-mix(in srgb, var(--acento) 16%, #0B1220);
    --acento-bord: color-mix(in srgb, var(--acento) 38%, #0B1220);
    --acento-2:    color-mix(in srgb, var(--acento) 78%, #FFFFFF);
  }
}
:root[data-tema="oscuro"] {
  --acento-piso: color-mix(in srgb, var(--acento) 16%, #0B1220);
  --acento-bord: color-mix(in srgb, var(--acento) 38%, #0B1220);
  --acento-2:    color-mix(in srgb, var(--acento) 78%, #FFFFFF);
}

/* ══ SIN REDONDEO, EN TODA LA APLICACION ══
   El lateral ya quedo recto por pedido de Luis. El chat seguia en 10 px la
   burbuja, 7 px los avatares y 4 px la etiqueta: tres redondeos distintos y
   ninguno cuadrado.

   Se bajan las dos medidas de la escala. La tercera, --r-3, son 999 px y se
   queda: la usan las cosas que SI son redondas de verdad, como la canaleta del
   medidor. Un riel de 4 px con las puntas rectas se ve cortado. */
:root {
  --r:   0px;
  --r-2: 0px;
}

/* Los tres acompanantes del acento, ya resueltos por el programa. El respaldo
   de cada uno es el azul de la casa, para el instante antes de que el programa
   escriba la marca de la empresa. */
:root {
  --acento-piso: var(--marca-piso, #E4EDFA);
  --acento-bord: var(--marca-bord, #A9C4EA);
  --acento-2:    var(--marca-2, #17539F);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="hibrido"]) {
    --acento-piso: var(--marca-piso-oscuro, #16233A);
    --acento-bord: var(--marca-bord-oscuro, #2B4877);
    --acento-2:    var(--marca-2-oscuro, #9BBCE7);
  }
}
:root[data-tema="oscuro"] {
  --acento-piso: var(--marca-piso-oscuro, #16233A);
  --acento-bord: var(--marca-bord-oscuro, #2B4877);
  --acento-2:    var(--marca-2-oscuro, #9BBCE7);
}

/* La etiqueta ASISTENTE se quedo en 4 px: tiene su propio redondeo escrito a
   mano, no sale de la escala. Recta como todo lo demas. */
.etiqueta { border-radius: 0; }

/* ══ LAS PUNTAS, OTRO PASO MAS CLARAS - papel-mas-claro-2 ══
   Luis: hay que aclarar mas cada uno.
       el papel de las puntas ...  #F5F8FD -> #F9FBFE
       el canto que las parte ...  #C2CEE0 -> #BCCADE
   El papel sube y el canto baja un pelo mas: cuanto mas claro el papel, mas
   trabajo tiene que hacer la linea para que se vea donde termina una zona. */
:root[data-tema="claro"] #aside,
:root[data-tema="claro"] #panel { background: #F9FBFE; }
:root[data-tema="claro"] #aside { --menu: #F9FBFE; --menu-2: #EDF2FA; --m-sup: #EDF2FA; border-right-color: #BCCADE; }
:root[data-tema="claro"] #panel { border-left-color: #BCCADE; }
:root[data-tema="claro"] #aside .aside-pie .aside-btn:hover,
:root[data-tema="claro"] #app #aside #b-cuenta-menu:hover,
:root[data-tema="claro"] #aside .aside-cabeza .icono-btn:hover { background: #EDF2FA; }