/* ===========================================================================
   Consola conversacional de La Maraka
   ---------------------------------------------------------------------------
   Tres decisiones que explican todo lo demás:

   1. Un solo acento de marca (el ámbar del icono). El resto del color está
      reservado para estados con significado: rojo pide atención, verde
      confirma, gris no dice nada. Si todo tiene color, nada destaca.
   2. Los controles se miden por el dispositivo, no por el gusto: 34 px con
      ratón, 44 px cuando el puntero es grueso. Ancho según el contenido; el
      ancho completo se reserva para el móvil, donde sí lo justifica.
   3. El mensaje es el protagonista. Nunca baja de 16,5 px, y hay una lectura
      cómoda a 18,5 px para quien la necesite.
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* superficies · fondo neutro, paneles claros, separadores finos */
  --fondo: #f4f4f5;
  --panel: #ffffff;
  --panel-2: #fafafa;
  --linea: #e4e4e7;
  --linea-fuerte: #d4d4d8;

  /* tinta */
  --tinta: #1a1a1e;
  --tinta-2: #5c5c68;
  --tinta-3: #8b8b96;

  /* acento de marca · uno, y sólo uno */
  --acento: #8a5c00;
  --acento-texto: #ffffff;
  --acento-suave: #fdf6e6;
  --acento-borde: #e6cf9a;

  /* estados con significado */
  --alerta: #a3231a;
  --alerta-suave: #fdeceb;
  --ok: #14663c;
  --ok-suave: #e9f5ee;

  /* burbujas */
  --burbuja-cliente: #f1f1f3;
  --burbuja-propia: #eaf1fa;
  --burbuja-propia-borde: #d6e4f5;

  --r: 7px;
  --r-sm: 6px;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.06);
  --sombra-flotante: 0 4px 14px rgb(0 0 0 / 0.12);

  /* medidas de control · ratón por omisión */
  --h-control: 34px;
  --h-control-sm: 30px;
  --pad-control: 0 12px;

  /* tipografía */
  --fs-base: 15px;
  --fs-mensaje: 16.5px;
  --lh-mensaje: 1.5;
  --rail: 238px;
  --lista: 304px;
  --contexto: 300px;
  /* Ancho cómodo de lectura del hilo. Una línea de 70 caracteres se lee de un
     vistazo; una de 140 obliga a buscar dónde sigue. */
  --hilo-max: 1120px;
}

/* Puntero grueso: dedos, no ratón. Áreas de al menos 44 px. */
@media (pointer: coarse) {
  :root {
    --h-control: 44px;
    --h-control-sm: 44px;
    --pad-control: 0 14px;
  }
}

/* Lectura cómoda: sólo crece lo que se lee, no la interfaz entera. */
:root[data-lectura='comoda'] {
  --fs-mensaje: 18.5px;
  --lh-mensaje: 1.62;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121215;
    --panel: #1a1a1e;
    --panel-2: #202025;
    --linea: #2c2c33;
    --linea-fuerte: #3a3a43;
    --tinta: #f2f2f4;
    --tinta-2: #a6a6b2;
    --tinta-3: #7c7c88;
    --acento: #e6b455;
    --acento-texto: #1a1a1e;
    --acento-suave: #2a2415;
    --acento-borde: #4d4225;
    --alerta: #ff9d92;
    --alerta-suave: #3a201e;
    --ok: #7ddba6;
    --ok-suave: #16301f;
    --burbuja-cliente: #26262c;
    --burbuja-propia: #1e2a38;
    --burbuja-propia-borde: #2b3d52;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-flotante: 0 4px 16px rgb(0 0 0 / 0.6);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font: var(--fs-base) / 1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#raiz { height: 100%; }

.cargando { padding: 2rem; color: var(--tinta-2); }

/* Foco siempre visible, en todo lo que se puede enfocar. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Saltar al contenido: lo primero que encuentra el teclado. */
.saltar {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100;
  background: var(--panel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  padding: 8px 12px;
  transition: top 0.1s;
  /* Aunque sólo lo alcanza el teclado, cuando aparece es un destino más:
     se le da la misma altura mínima que a cualquier control. */
  min-height: var(--h-control);
  display: inline-flex;
  align-items: center;
}
.saltar:focus { top: 8px; }

/* ============================================================ estructura */

.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  height: 100dvh;
  min-height: 0;
}

.contenido {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ------------------------------------------------------------------- rail */

.rail {
  background: var(--panel);
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 10px;
  gap: 2px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 8px 14px;
}

.marca img { width: 26px; height: 26px; border-radius: var(--r-sm); }

.marca-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca-texto b { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.marca-texto span { font-size: 11.5px; color: var(--tinta-3); }

.rail nav { display: flex; flex-direction: column; gap: 2px; }

.rail nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--h-control);
  padding: 0 10px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 550;
  /* Una sección no parte su nombre en dos líneas: el contador la empujaba y
     «Atención humana» quedaba en dos renglones desalineados con el resto. */
  white-space: nowrap;
}

/* El rótulo no se encoge: el rail se dimensionó para que quepan enteros.
   Un nombre de sección recortado a «Atención hum…» no es compacto, es peor. */
.rail nav a > span:not(.contador) { flex: none; }

.rail nav a:hover { background: var(--panel-2); color: var(--tinta); }

.rail nav a[aria-current='page'] {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 650;
}

.rail nav a svg { flex: none; opacity: 0.9; }

.contador {
  margin-left: auto;
  background: var(--alerta);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-color-scheme: dark) { .contador { color: #1a1a1e; } }

/* En el rail los botones se alinean con el resto de la columna, no al centro. */
.rail-pie button { justify-content: flex-start; width: 100%; }

.rail-pie {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Conexión y modo de prueba: discretos, pero siempre a la vista. */
.senal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--tinta-2);
}

.punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--tinta-3);
}
.punto.vivo { background: var(--ok); }
.punto.roto { background: var(--alerta); }

.usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 2px;
  font-size: 12.5px;
  color: var(--tinta-3);
}

/* ------------------------------------------------ cabecera de la sección */

.cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  min-height: 46px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel);
  flex: none;
}

.cabecera h1 {
  font-size: 15px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
}

.cabecera .sub {
  font-size: 12.5px;
  color: var(--tinta-3);
  margin: 0;
}

.derecha { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* La vuelta atrás sólo existe donde hace falta: en el teléfono. */
.solo-movil { display: none; }
/* El botón de contexto está en la cabecera en escritorio; en el teléfono se
   abre desde la misma cabecera, así que no se oculta: sólo se acorta. */
.solo-ancho { flex: none; }

/* ============================================================== controles */

button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  height: var(--h-control);
  padding: var(--pad-control);
  border-radius: var(--r);
  border: 1px solid var(--linea-fuerte);
  background: var(--panel);
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

button:hover:not(:disabled) { background: var(--panel-2); border-color: var(--tinta-3); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Una sola acción principal por pantalla. */
button.principal {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
}
button.principal:hover:not(:disabled) { background: var(--acento); color: var(--acento-texto); filter: brightness(1.08); border-color: var(--acento); }

/* Secundarias: presentes, no protagonistas. */
button.discreta {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-2);
  font-weight: 550;
}
button.discreta:hover:not(:disabled) { background: var(--panel-2); color: var(--tinta); }

button.peligro { color: var(--alerta); }
button.peligro:hover:not(:disabled) { background: var(--alerta-suave); border-color: var(--alerta); }

button.pequena { height: var(--h-control-sm); font-size: 13px; padding: 0 10px; }

.grupo-acciones {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Separador fino entre grupos de acciones. */
.divisor-v {
  width: 1px;
  height: 20px;
  background: var(--linea);
  margin: 0 4px;
}

input[type='text'],
input[type='password'],
input[type='search'],
textarea {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: 7px 10px;
  min-height: var(--h-control);
  border-radius: var(--r);
  border: 1px solid var(--linea-fuerte);
  background: var(--panel);
  color: var(--tinta);
}

input::placeholder, textarea::placeholder { color: var(--tinta-3); }

textarea {
  resize: vertical;
  line-height: 1.5;
}

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--tinta-2); }

.pista { color: var(--tinta-3); font-size: 12.5px; margin: 4px 0 0; }

/* ================================================================= avisos */

.nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--r);
  border: 1px solid var(--linea);
  background: var(--panel-2);
  font-size: 13.5px;
  color: var(--tinta-2);
  margin: 10px 0;
}

.nota svg { flex: none; margin-top: 1px; }
.nota.mala { border-color: var(--alerta); background: var(--alerta-suave); color: var(--alerta); }
.nota.buena { border-color: var(--ok); background: var(--ok-suave); color: var(--ok); }
.nota ul { margin: 4px 0 0; padding-left: 18px; }

/* ================================================================ bandeja */

/* Tres columnas: lista, conversación y contexto. La del medio es la que crece;
   las otras dos tienen un ancho fijo porque su contenido no gana nada con más
   sitio. El contexto se pliega y entonces son dos.
   
   TODAS las variantes por `data-contexto` viven dentro de una consulta de
   anchura, y no sueltas. Sueltas ganaban por especificidad a la columna única
   del teléfono —`.bandeja[data-contexto]` pesa más que `.bandeja`— y la
   consola se dibujaba a 304 px dentro de una pantalla de 390, con una franja
   gris a la derecha. La regla general: si una variante puede contradecir a un
   punto de ruptura, va dentro de un punto de ruptura. */
.bandeja {
  display: grid;
  min-height: 0;
  flex: 1;
}

@media (min-width: 901px) {
  .bandeja { grid-template-columns: var(--lista) minmax(0, 1fr) var(--contexto); }
  .bandeja[data-contexto='cerrado'] { grid-template-columns: var(--lista) minmax(0, 1fr); }
  .bandeja[data-contexto='cerrado'] .panel-contexto { display: none; }
}

.panel-lista {
  border-right: 1px solid var(--linea);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.filtros {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--linea);
  flex: none;
  overflow-x: auto;
}

.filtros button {
  height: var(--h-control-sm);
  padding: 0 9px;
  font-size: 12.5px;
  border-color: transparent;
  background: transparent;
  color: var(--tinta-2);
  font-weight: 550;
}

.filtros button[aria-pressed='true'] {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 650;
}

.lista-scroll { overflow-y: auto; flex: 1; min-height: 0; }

/* Filas, no tarjetas: separadores finos y nada más. */
.fila {
  display: block;
  padding: 8px 12px 9px;
  border-bottom: 1px solid var(--linea);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.fila:hover { background: var(--panel-2); }

.fila[aria-current='true'] {
  background: var(--acento-suave);
  border-left-color: var(--acento);
}

.fila-alta { display: flex; align-items: baseline; gap: 8px; }
.fila-nombre { font-weight: 650; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-hora { font-size: 11.5px; color: var(--tinta-3); flex: none; }

.fila-baja { display: flex; align-items: center; gap: 8px; margin-top: 3px; }

.fila-previo {
  font-size: 13px;
  color: var(--tinta-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.estado-linea {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tinta-3);
  flex: none;
}

.estado-linea.pendiente { color: var(--alerta); }
.estado-linea.atendida { color: var(--acento); }

.vacio {
  padding: 28px 20px;
  color: var(--tinta-3);
  font-size: 13.5px;
  text-align: center;
}

/* ---------------------------------------------------------- conversación */

.panel-conv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--fondo);
}

.conv-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  min-height: 46px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel);
  flex: none;
}

.conv-quien { min-width: 0; }
.conv-quien b { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.conv-quien span { font-size: 12px; color: var(--tinta-3); }

/* Indicadores. Sin borde, sin fondo de botón y sin nada que pulsar: si se
   parecieran a un botón, alguien intentaría pulsarlos. */
.conv-estado {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-width: 0;
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
  white-space: nowrap;
}
.insignia.pendiente { color: var(--alerta); }
.insignia.atendida { color: var(--acento); }

.conv-estado .atiende {
  font-size: 12.5px;
  color: var(--tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hilo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* El margen lateral crece con la pantalla hasta centrar una columna de
     lectura cómoda. En un monitor ancho, un hilo de borde a borde no es más
     información: es la misma, peor repartida. */
  padding: 16px max(20px, calc((100% - var(--hilo-max)) / 2)) 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Una conversación corta se apoya abajo, pegada al campo de respuesta, como
   en cualquier chat. El truco del margen automático evita que el desbordamiento
   recorte por arriba, que es lo que pasa con `justify-content: flex-end`. */
.hilo > *:first-child { margin-top: auto; }

.centro-vacio {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--tinta-3);
  text-align: center;
  max-width: 34ch;
  font-size: 13.5px;
}
.centro-vacio p { margin: 0; }

.dia {
  align-self: center;
  font-size: 11.5px;
  color: var(--tinta-3);
  padding: 2px 0 6px;
}

.msg { max-width: min(76ch, 84%); min-width: 0; flex-shrink: 0; }
.msg.propio { align-self: flex-end; }

.msg-quien {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 3px 2px;
}
.msg.propio .msg-quien { text-align: right; margin: 0 2px 3px 0; }

.msg-cuerpo {
  background: var(--burbuja-cliente);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: var(--fs-mensaje);
  line-height: var(--lh-mensaje);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg.propio .msg-cuerpo {
  background: var(--burbuja-propia);
  border-color: var(--burbuja-propia-borde);
}

.msg-pie {
  font-size: 11.5px;
  color: var(--tinta-3);
  margin: 3px 2px 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.msg.propio .msg-pie { justify-content: flex-end; }
.msg-pie .mal { color: var(--alerta); }

.msg.descartado .msg-cuerpo { opacity: 0.55; border-style: dashed; border-color: var(--alerta); }

/* Los del sistema no son de nadie: texto centrado, sin burbuja. */
.msg.sistema {
  align-self: center;
  max-width: 56ch;
  text-align: center;
}
.msg.sistema .msg-cuerpo {
  background: transparent;
  border: none;
  padding: 2px 8px;
  font-size: 13px;
  color: var(--tinta-2);
  line-height: 1.5;
}
.msg.sistema .msg-quien { display: none; }
.msg.sistema .msg-pie { justify-content: center; }

/* ------------------------------------------------------------- redacción */

.redaccion {
  flex: none;
  border-top: 1px solid var(--linea);
  background: var(--panel);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

.redaccion-caja {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.redaccion textarea {
  font-size: var(--fs-mensaje);
  line-height: 1.45;
  min-height: 44px;
  max-height: 180px;
  resize: none;
  padding: 10px 12px;
}

.redaccion-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--tinta-3);
}

/* Estado en el que no se puede escribir: se explica y se ofrece la salida. */
.bloqueo {
  flex: none;
  border-top: 1px solid var(--linea);
  background: var(--panel);
  padding: 14px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bloqueo p { margin: 0; font-size: 13.5px; color: var(--tinta-2); flex: 1; min-width: 220px; }

/* ------------------------------------------------------- confirmaciones */

.confirmar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  box-shadow: var(--sombra-flotante);
  font-size: 13.5px;
}

.confirmar > span { color: var(--tinta-2); }

.ancla-confirmar { position: relative; }
.ancla-confirmar .confirmar {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  white-space: nowrap;
}

/* ============================================================ biblioteca */

.biblioteca {
  display: grid;
  grid-template-columns: var(--lista) 1fr;
  min-height: 0;
  flex: 1;
}

.doc-fila {
  display: block;
  width: 100%;
  text-align: left;
  height: auto;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--linea);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  font-weight: 500;
}

.doc-fila:hover { background: var(--panel-2); border-color: transparent; border-bottom-color: var(--linea); }
.doc-fila[aria-current='true'] { background: var(--acento-suave); border-left-color: var(--acento); }

.doc-nombre { display: block; font-size: 14px; font-weight: 650; }
.doc-meta { display: block; font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }

.editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--fondo);
}

.editor-cabecera input[type='text'] { max-width: 320px; }

.editor-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 56px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel);
  flex: none;
  flex-wrap: wrap;
}

.editor-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }

.editor-cuerpo textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  min-height: 320px;
  height: 100%;
  background: var(--panel);
}

.editor-pie {
  flex: none;
  border-top: 1px solid var(--linea);
  background: var(--panel);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.editor-pie .separador { flex: 1; }

.marca-borrador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  color: var(--acento);
  background: var(--acento-suave);
  border: 1px solid var(--acento-borde);
  border-radius: var(--r-sm);
  padding: 2px 7px;
}

/* ================================================================= estado */

.hoja {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.hoja-centro { max-width: 720px; margin: 0 auto; }

.bloque {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  margin-bottom: 14px;
  overflow: hidden;
}

.bloque > h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
}

.bloque dl { margin: 0; }

.bloque dl > div {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--linea);
  font-size: 13.5px;
}

.bloque dl > div:last-child { border-bottom: none; }
.bloque dt { color: var(--tinta-2); }
.bloque dd { margin: 0; overflow-wrap: anywhere; }
.bloque dd.mal { color: var(--alerta); font-weight: 600; }
.bloque dd.bien { color: var(--ok); font-weight: 600; }

.bloque .acciones-bloque { padding: 10px 14px; display: flex; gap: 8px; flex-wrap: wrap; }

table.versiones { width: 100%; border-collapse: collapse; font-size: 13px; }
table.versiones th, table.versiones td {
  text-align: left;
  padding: 8px 14px;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
table.versiones th { color: var(--tinta-3); font-weight: 600; font-size: 12px; }
table.versiones tr:last-child td { border-bottom: none; }
.envoltura-tabla { overflow-x: auto; }

/* ================================================================== chat */

.prueba {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
}

/* El padding de .hilo ya centra la lectura: limitar también su ancho
   suma dos centrados y puede reducir el contenido a cero en escritorio. */
.prueba .hilo { width: 100%; min-width: 0; }
.prueba .redaccion > * { max-width: var(--hilo-max); margin-left: auto; margin-right: auto; }

/* ================================================================= login */

.entrada {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--fondo);
}

.entrada form {
  width: min(360px, 100%);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 22px;
  box-shadow: var(--sombra);
}

.entrada h1 { font-size: 17px; margin: 0 0 2px; }
.entrada .pista { margin-bottom: 6px; }
.entrada button { width: 100%; margin-top: 16px; height: max(var(--h-control), 40px); }

/* ============================================================== teléfono */

.barra-movil, .tabs-movil { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rail { display: none; }

  .contenido { grid-row: 1; }

  /* Barra inferior: las tres secciones, siempre alcanzables con el pulgar. */
  .tabs-movil {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--panel);
    border-top: 1px solid var(--linea);
    padding-bottom: env(safe-area-inset-bottom);
    flex: none;
  }

  .tabs-movil a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    text-decoration: none;
    color: var(--tinta-3);
    font-size: 11px;
    font-weight: 600;
  }

  .tabs-movil a[aria-current='page'] { color: var(--acento); }

  /* Una sola columna: o la lista, o la conversación.
     `minmax(0, 1fr)` y no `1fr`: un track `1fr` no baja del contenido mínimo
     de su hijo, y el relleno centrado del hilo lo empujaba a 800 px dentro de
     una pantalla de 390. */
  .bandeja, .biblioteca { grid-template-columns: minmax(0, 1fr); }
  .bandeja[data-vista='conversacion'] .panel-lista,
  .biblioteca[data-vista='editor'] .panel-lista { display: none; }
  .bandeja[data-vista='lista'] .panel-conv,
  .biblioteca[data-vista='lista'] .editor { display: none; }

  .panel-lista { border-right: none; }
  .solo-movil { display: block; flex: none; }

  .hilo { padding: 14px 12px 6px; }
  .msg { max-width: 88%; }
  .redaccion { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }

  .bloque dl > div { grid-template-columns: 1fr; gap: 2px; }
  .bloque dt { font-size: 12.5px; }

  /* En el móvil el ancho completo sí está justificado: es la acción del pulgar. */
  .bloqueo button.principal, .redaccion .enviar-movil { flex: 1; }

  .editor-cuerpo textarea { min-height: 240px; }
}

/* En el teléfono la cabecera son DOS filas y nada más: quién arriba, cómo está
   y el contexto abajo. Envolviendo con flex salían cuatro, y una cabecera de
   cuatro filas se come el historial, que es lo que hay que leer. */
@media (max-width: 560px) {
  .conv-cabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 8px;
    padding: 4px 10px 6px;
    min-height: 0;
  }
  .conv-cabecera .solo-movil { grid-area: 1 / 1; }
  .conv-quien { grid-area: 1 / 2; }
  .conv-quien b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Los indicadores conservan su rótulo entero. Reducirlos a un icono ahorraría
     veinte píxeles y costaría saber qué significan. */
  .conv-estado { grid-area: 2 / 1 / 3 / 2; margin-left: 0; gap: 10px; }
  .conv-cabecera > button { grid-area: 2 / 2; justify-self: end; }
}

/* Movimiento reducido: sin transiciones. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Contraste alto: separadores más marcados. */
@media (prefers-contrast: more) {
  :root { --linea: #b0b0b8; --linea-fuerte: #8a8a94; --tinta-2: #3f3f48; --tinta-3: #5c5c66; }
}


/* ============================================ panel de contexto (lateral)
   Va al lado del historial, no encima. Se lee de arriba abajo: primero quién
   atiende y en qué estado, luego el resumen, luego el evento y los tiempos.
   Todo es texto: aquí no hay nada que pulsar salvo cerrarlo en el teléfono. */

.panel-contexto {
  border-left: 1px solid var(--linea);
  background: var(--panel);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ctx-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-height: 46px;
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
  flex: none;
}

.ctx-cabecera h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.ctx-cabecera button { margin-left: auto; }

.ctx-seccion {
  padding: 12px 14px 13px;
  border-bottom: 1px solid var(--linea);
}

.ctx-seccion:last-child { border-bottom: 0; }

.ctx-seccion h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--tinta-2);
}

.ctx-seccion h3 svg { flex: none; opacity: 0.75; }

.ctx-seccion dl { margin: 0; display: grid; gap: 8px; }

.ctx-dato dt {
  font-size: 12px;
  /* `--tinta-3` daba 3,37 : 1 y el mínimo de AA para texto normal es 4,5. Lo
     detectó la revisión de contraste, no el ojo: en la captura se veía bien.
     Es justo el tipo de fallo que sólo aparece si se mide. */
  color: var(--tinta-2);
  margin-bottom: 1px;
}

.ctx-dato dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.ctx-nota {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-2);
}

/* ------------------------------------------------------------------- pie
   Todas las acciones juntas: la destacada arriba, las salidas debajo. */

.pie {
  flex: none;
  border-top: 1px solid var(--linea);
  background: var(--panel);
}

.pie .bloqueo,
.pie .redactar { border-top: 0; }

.salidas {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 10px;
  flex-wrap: wrap;
}

/* Con el dedo, las salidas también son objetivos táctiles. */
@media (pointer: coarse) {
  .salidas { padding-bottom: 12px; }
}

/* ------------------------------------------------- el panel en el teléfono
   Deja de ser una columna y pasa a ser una hoja que tapa la conversación,
   porque a 390 px no caben tres columnas ni dos. */

/* El límite INFERIOR importa: sin él, esta regla pisaba la columna única del
   teléfono —está más abajo en el archivo y ganaba— y la consola se dibujaba a
   720 px dentro de una pantalla de 390. Se veía como una franja gris a la
   derecha. Lo encontró la captura del teléfono, no el navegador de escritorio. */
@media (min-width: 901px) and (max-width: 1100px) {
  .bandeja,
  .bandeja[data-contexto='abierto'] {
    grid-template-columns: var(--lista) minmax(0, 1fr);
  }
  /* La hoja sólo existe si hay una conversación abierta Y el panel está
     desplegado. Sin la primera condición, un panel vacío quedaba flotando
     sobre la lista y se tragaba las pulsaciones: se veía nada y no funcionaba
     nada. Lo encontró el recorrido en navegador, no la vista. */
  .bandeja[data-contexto='abierto'][data-vista='conversacion'] .panel-contexto {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 92vw);
    z-index: 40;
    box-shadow: var(--sombra-flotante);
  }
  .bandeja[data-contexto='cerrado'] .panel-contexto,
  .bandeja[data-vista='lista'] .panel-contexto { display: none; }
}

/* En el teléfono el panel es siempre una hoja. */
@media (max-width: 900px) {
  .bandeja[data-contexto='abierto'][data-vista='conversacion'] .panel-contexto {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 92vw);
    z-index: 40;
    box-shadow: var(--sombra-flotante);
    display: flex;
  }
  .bandeja[data-contexto='cerrado'] .panel-contexto,
  .bandeja[data-vista='lista'] .panel-contexto { display: none; }
}

/* Un panel sin contenido no se dibuja. Cinturón, además del tirante de
   arriba: si algún día se renderiza vacío por otro camino, tampoco estorba. */
.panel-contexto:empty { display: none; }

/* ============================================= modo incrustado (WordPress)
   La consola dentro de otro panel. Pierde su rail y sus pestañas —el panel que
   la contiene ya tiene navegación, y dos menús que dicen cosas distintas son
   peor que uno— y conserva una franja de una línea con las secciones, la
   conexión y quién ha iniciado sesión. Esas tres cosas el panel anfitrión no
   las sabe, y callarlas escondería que el servicio sigue en modo de prueba.

   Esto es SÓLO la interfaz. Quién eres y qué puedes hacer no se resuelve
   porque la consola quepa en un marco: ver INTEGRACION-WORDPRESS.md. */

:root[data-incrustado] .app {
  grid-template-columns: 1fr;
  /* Dentro de un marco la altura la pone el anfitrión, no la pantalla. */
  height: 100%;
  min-height: 420px;
}

.franja {
  order: -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  min-height: 40px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel);
  flex: none;
}

.franja nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; }

.franja-enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-control-sm);
  padding: 0 9px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--tinta-2);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}

.franja-enlace:hover { background: var(--panel-2); color: var(--tinta); }

.franja-enlace[aria-current='page'] {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 650;
}

.franja-enlace .contador { margin-left: 2px; }

.franja-senales {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.franja-usuario, .franja-prueba { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.franja-prueba { color: var(--acento); font-weight: 600; }

@media (max-width: 560px) {
  .franja { gap: 8px; padding: 0 8px; }
  .franja-usuario { display: none; }
}

/* Identidad oficial: el logo blanco conserva contraste en ambos temas. */
.marca { flex-direction: column; align-items: flex-start; gap: 6px; }
.marca img { width: 164px; height: auto; max-width: 100%; border-radius: 4px; background: #19191c; padding: 8px; }
.marca-texto b { display: none; }