/* ===========================================================================
   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:not([data-tema='claro']) {
    --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);
  }
}

:root[data-tema='oscuro'] {
    --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);
  }
:root[data-tema='claro'] { color-scheme:light; }
:root[data-tema='oscuro'] { color-scheme:dark; }

* { 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) minmax(0, 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:not([type]),
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
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;
  /* En una fila flexible, un `textarea` no baja de su ancho intrínseco si no
     se le dice: sin esto, el campo empuja al botón fuera de la pantalla. */
  min-width: 0;
}

.redaccion-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--tinta-3);
  /* Con varias notas al pie, en el teléfono se reparten en dos líneas en vez
     de comprimirse en columnas de tres palabras. */
  flex-wrap: wrap;
  row-gap: 2px;
}

/* Con el dedo no hay Ctrl + Intro. Lo que sí importa —que un mensaje enviado
   no se puede editar— se queda. */
@media (pointer: coarse) {
  .redaccion-pie > span:nth-child(1),
  .redaccion-pie > span:nth-child(2) { display: none; }
}

/* 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(6, minmax(0, 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; }

/* ------------------------------------------------------------------ audio
 *
 * Nota de voz: el reproductor y la transcripción, uno encima de la otra y en
 * la misma burbuja. La transcripción lleva SIEMPRE su etiqueta, porque un
 * texto sin etiqueta se lee como algo que el cliente escribió.
 *
 * Una transcripción dudosa se ve distinta de una buena a simple vista —borde
 * de alerta y fondo tenue—; si se vieran iguales, quien atiende contestaría a
 * partir de ella sin enterarse de que es una conjetura.
 */
.audio-caja {
  background: var(--burbuja-cliente);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.msg.propio .audio-caja {
  background: var(--burbuja-propia);
  border-color: var(--burbuja-propia-borde);
}

.audio-caja audio.audio {
  width: 100%;
  max-width: 320px;
  height: 34px;
  display: block;
}

.audio-etiqueta {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta-2);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.audio-etiqueta span + span {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.audio-etiqueta.mal,
.audio-etiqueta.dudosa { color: var(--alerta); }

.audio-texto {
  font-size: var(--fs-mensaje);
  line-height: var(--lh-mensaje);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.audio-texto.dudosa,
.audio-texto.mal {
  border-left: 3px solid var(--alerta);
  padding-left: 9px;
  color: var(--tinta-2);
  font-style: italic;
}

.audio-aviso {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-2);
}
.audio-aviso.mal { color: var(--alerta); }

/* En teléfono el reproductor ocupa el ancho: los controles nativos son
   pequeños y recortarlos los vuelve imposibles de acertar con el pulgar. */
@media (pointer: coarse) {
  .audio-caja audio.audio { max-width: none; height: 40px; }
}

/* ------------------------------------------------- herramientas de redacción
 *
 * Una barra corta encima del campo: negrita, cursiva, tachado, monoespacio y
 * vista previa. Nada más. Cada botón que se añade aquí es un botón que hay que
 * mirar antes de escribir, y escribir rápido es el trabajo.
 *
 * Los botones son del alto de control del sistema, no más grandes: en la
 * conversación el protagonista es el mensaje.
 */
.herramientas {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0 0 6px;
  flex-wrap: wrap;
}

.herramienta {
  height: var(--h-control);
  min-width: var(--h-control);
  padding: 0 9px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--fondo-2);
  color: var(--tinta-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
}
.herramienta:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.herramienta:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.h-negrita { font-weight: 800; }
.h-cursiva { font-style: italic; font-weight: 600; }
.h-tachado { text-decoration: line-through; font-weight: 600; }
.h-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

/* La vista previa es lo que verá el cliente, así que se parece a una burbuja
   suya y no a un cuadro de configuración. */
.previa {
  border: 1px dashed var(--linea-fuerte);
  border-radius: 8px;
  padding: 8px 11px 10px;
  margin: 0 0 8px;
  background: var(--fondo-2);
}
.previa-titulo {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tinta-3);
}
.previa-texto {
  font-size: var(--fs-mensaje);
  line-height: var(--lh-mensaje);
  overflow-wrap: anywhere;
}
.previa-vacia { color: var(--tinta-3); font-style: italic; }
.previa-texto .wa-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--fondo);
  border-radius: 4px;
  padding: 1px 4px;
}
.previa-texto .wa-cita {
  display: inline-block;
  border-left: 3px solid var(--linea-fuerte);
  padding-left: 8px;
  color: var(--tinta-2);
}

.contador { margin-left: auto; }
.contador.mal { color: var(--alerta); font-weight: 600; }

/* Herramientas del operador: siempre insertan primero en el borrador. */
.editor-extras {padding:12px;border:1px solid var(--borde, #444);border-radius:10px;max-height:320px;overflow:auto;}
.editor-extras input {width:100%;margin:6px 0;padding:8px;background:transparent;color:inherit;border:1px solid #666;border-radius:6px;}
.emoji-lista {display:flex;flex-wrap:wrap;gap:6px;}
.emoji-lista button {font-size:24px;min-width:42px;min-height:42px;background:transparent;border:1px solid #666;border-radius:8px;cursor:pointer;}
.respuesta-guardada {padding:10px 0;border-bottom:1px solid #555;}
.respuesta-guardada p {white-space:pre-wrap;overflow-wrap:anywhere;max-height:100px;overflow:auto;}
.herramientas {flex-wrap:wrap;}
.editor-adjunto {padding:10px;border:1px solid #666;border-radius:8px;}
.editor-adjunto img,.imagen-adjunta {max-width:100%;max-height:240px;object-fit:contain;border-radius:6px;}
.editor-adjunto audio,.msg-cuerpo audio {max-width:100%;}

/* Herramientas compactas: nombres para lectores de pantalla y ayuda nativa. */
.herramientas .herramienta-icono { width: 36px; min-height: 36px; padding: 8px; justify-content: center; }
.herramientas .herramienta-icono .rotulo { display: none; }
.herramientas .herramienta-icono:hover, .herramientas .herramienta-icono:focus-visible { background: var(--superficie-2, #303039); outline-offset: 2px; }

/* Administración de respuestas e importaciones */
.gestion-cuerpo{overflow:auto;padding:24px;flex:1;min-height:0;max-width:1300px;width:100%;margin:auto;box-sizing:border-box}
.gestion-dos-columnas{display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);gap:28px;margin-top:24px}
.gestion-formulario label{display:flex;flex-direction:column;gap:6px;margin:14px 0;font-size:13px}
.gestion-formulario input:not([type=checkbox]),.gestion-formulario textarea,.gestion-formulario select,.gestion-entradas input,.gestion-entradas textarea,.gestion-dos-columnas input[type=search]{width:100%;box-sizing:border-box;padding:10px;color:inherit;background:var(--panel-2);border:1px solid var(--linea-fuerte);border-radius:6px}
.gestion-formulario textarea{resize:vertical;min-height:90px}
.gestion-lista .doc-fila{width:100%;text-align:left;white-space:normal;margin-top:8px}
.gestion-entradas{max-width:800px}.gestion-entradas button{margin:10px 8px 10px 0}.gestion-entradas details{margin-top:16px}
.gestion-formulario .opcion-check{flex-direction:row;align-items:flex-start;gap:10px}.opcion-check input{margin-top:3px}
.fuente-original{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:12px;padding:12px;background:#16171b}
.resultado-fuente{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #34343c}
@media(max-width:760px){.gestion-dos-columnas{grid-template-columns:1fr}.gestion-cuerpo{padding:16px}.resultado-fuente{display:block}}

/* Importador: herramientas arriba, fichas a un lado y formulario compacto. */
.importador-cuerpo{max-width:1480px;padding:20px;}
.importador-herramientas{max-width:none;border:1px solid #32333b;border-radius:12px;background:#191a1f;padding:12px 16px;}
.importador-modos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.importador-herramientas .importador-modos button{margin:0;padding:8px 12px;}
.importador-modos button[aria-pressed=true]{background:#e0b5501c;color:var(--acento,#e0b550);box-shadow:inset 0 0 0 1px #e0b5504d;}
.importador-entrada{display:flex;align-items:center;gap:10px;}
.importador-entrada input{flex:1;min-width:0;}
.importador-entrada button{margin:0;flex-shrink:0;min-height:40px;}
.importador-herramientas .herramienta-ayuda{font-size:12px;color:#a6a6b2;margin:7px 0 0;}
.importador-area{grid-template-columns:220px minmax(0,1fr);gap:20px;margin-top:20px;align-items:start;}
.importador-fichas{position:sticky;top:0;min-width:0;max-height:70vh;overflow:auto;}
.importador-fichas h2{font-size:14px;margin:0 0 12px;color:#c3c3cc;}
.importador-fichas .doc-fila{border:1px solid #33343c;border-radius:8px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px;}
.importador-fichas .doc-fila[aria-pressed=true]{border-color:#bd9541;background:#e0b55013;}
.ficha-estado{font-size:11px;font-weight:400;color:#aaaab7;}
.importador-editor{min-width:0;border:1px solid #32333b;border-radius:12px;padding:20px;background:#17181c;}
.importador-editor h2{font-size:20px;margin:0 0 8px;}
.importador-editor>p{font-size:12px;color:#a6a6b2;line-height:1.6;margin:6px 0 10px;}
.importador-editor>details{font-size:12px;margin-top:10px;padding-bottom:14px;border-bottom:1px solid #30313a;}
.importador-editor>a{font-size:12px;}
.importador-editor .ficha-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:18px 0;}
.importador-editor .ficha-campos label{margin:0;min-width:0;gap:7px;color:#c3c3cc;font-size:12px;}
.importador-editor .campo-ancho{grid-column:1 / -1;}
.importador-editor input[type=date],.importador-editor input[type=time]{color-scheme:dark;min-height:41px;min-width:0;}
.importador-editor textarea{min-height:74px;line-height:1.5;}
.ayuda-campo{font-size:11px;color:#90909e;}
.ficha-acciones{padding-top:16px;margin-top:16px;border-top:1px solid #30313a;gap:10px;flex-wrap:wrap;}
.ficha-acciones .primaria{background:var(--acento,#e0b550);color:#17130c;border-color:transparent;}
@media(max-width:1100px){.importador-area{grid-template-columns:180px minmax(0,1fr);gap:14px}.importador-editor{padding:16px}}
@media(max-width:760px){.importador-cuerpo{padding:12px}.importador-area{grid-template-columns:1fr}.importador-fichas{position:static;max-height:180px}.importador-fichas .gestion-lista{display:flex;gap:8px;overflow:auto}.importador-fichas .doc-fila{width:auto;min-width:170px;max-width:250px;flex-shrink:0;margin:0}.importador-herramientas{padding:12px}.importador-entrada{flex-wrap:wrap}.importador-entrada input{flex-basis:100%}.importador-modos{gap:4px}.importador-herramientas .importador-modos button{padding:8px;font-size:12px}}
@media(max-width:480px){.importador-editor .ficha-campos{grid-template-columns:1fr}.importador-editor .campo-ancho{grid-column:auto}}

/* Acciones de ficha: separación efectiva y contraste en todos los estados. */
.ficha-acciones{display:flex;align-items:center;gap:16px;}
.ficha-acciones>button{min-height:44px;padding:10px 16px;}
.ficha-acciones>button.discreta{border:1px solid var(--linea-fuerte,#454650);background:var(--panel-2,#24252c);}
.ficha-acciones>button.primaria:hover:not(:disabled),
.ficha-acciones>button.primaria:focus-visible:not(:disabled){background:#fff;color:#17130c;border-color:#fff;filter:none;}
.ficha-acciones>button:focus-visible{outline:2px solid var(--acento,#e0b550);outline-offset:3px;}

/* Administración de asesores: navegación y formulario compacto. */
.asesores-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:24px;align-items:start;}
.asesores-lista{display:grid;gap:12px;}.asesor-item{justify-content:flex-start;text-align:left;}
.asesores-ficha{margin:0;min-width:0;}.asesor-grid,.asesor-permisos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.asesor-campo{display:flex;flex-direction:column;gap:8px;}.asesor-grid input,.asesor-grid select{width:100%;min-height:42px;}
.asesor-permisos label,.asesor-checks label{display:flex;flex-direction:row;align-items:center;gap:10px;}
.asesor-checks{display:flex;gap:24px;margin:20px 0;}.asesor-permisos input{width:18px;height:18px;}
.asesor-horario{display:grid;grid-template-columns:minmax(110px,1.4fr) 1fr 1fr auto;gap:12px;margin-bottom:12px;}.asesor-horario input{min-width:0;}
.asesores-ficha h3{margin-top:24px;}.asesores-ficha .ficha-acciones{margin-top:24px;}
@media(max-width:850px){.asesores-layout{grid-template-columns:1fr;}.asesor-grid,.asesor-permisos{grid-template-columns:1fr;}.tabs-movil{display:flex;overflow-x:auto;}.tabs-movil>a{min-width:74px;flex:1;}}

.asesores-ficha form{padding:20px;}.asesores-ficha h2{margin:0 0 20px;}.asesores-ficha .asesor-campo{margin:0;}
.asesores-ficha input:not([type=checkbox]),.asesores-ficha select{font:inherit;padding:10px 12px;border:1px solid var(--linea-fuerte);border-radius:6px;color:var(--tinta);background:var(--panel-2);}
.asesores-ficha input:read-only{opacity:.75;}.asesores-ficha p.ayuda{font-size:13px;color:var(--tinta-2);margin:12px 0;}
.asesores-ficha .asesor-grid{row-gap:18px;}.asesores-ficha .asesor-campo>span{font-size:13px;color:var(--tinta-2);}

/* Colaboradores 045: espacios coherentes y controles usables en móvil. */
.colaboradores-cabecera{padding:16px 20px;min-height:72px;}
.colaboradores-cabecera .sub{margin-top:6px;line-height:1.5;}
.colaboradores-reparto>h2{padding:16px 20px;}
.colaboradores-reparto-contenido{padding:20px;display:grid;gap:16px;}
.colaboradores-reparto-contenido>label{display:flex;align-items:center;gap:10px;margin:0;}
.colaboradores-reparto-contenido input{width:18px;height:18px;flex:none;}
.colaboradores-reparto-contenido .ayuda{margin:0;line-height:1.6;color:var(--tinta-2);font-size:13px;}
.colaboradores-reparto-contenido>button{justify-self:start;border:1px solid var(--linea-fuerte);padding:10px 14px;}
.colaborador-admin{padding:16px;background:var(--panel);border:1px solid var(--linea);border-radius:8px;display:grid;gap:8px;}
.colaborador-admin .ayuda{margin:0;color:var(--tinta-2);font-size:13px;line-height:1.5;}
.asesores-lista>button{min-height:44px;padding:12px;white-space:normal;}
.asesores-ficha .ayuda{line-height:1.6;}
.asesores-ficha .asesor-permisos label{margin:0;padding:8px 0;line-height:1.5;}
.asesor-permisos input{flex:none;}
.colaborador-telefono{display:grid;grid-template-columns:125px minmax(0,1fr);gap:12px;min-width:0;}
.prefijo-pais{display:flex;align-items:center;border:1px solid var(--linea-fuerte);border-radius:6px;background:var(--panel-2);}
.prefijo-pais>span{padding-left:12px;}
.asesores-ficha .prefijo-pais input{border:0;background:transparent;min-width:0;padding-left:6px;}
.asesores-ficha .peligro{color:#ffada8;border:1px solid #aa5755;background:transparent;}
.asesores-ficha .peligro:hover{background:#4c2528;color:#fff;}
.colaborador-confirmacion{margin-top:20px;padding:16px;border:1px solid #aa5755;border-radius:6px;}
.asesores-ficha .asesor-grid>*{min-width:0;}
@media(max-width:600px){
 .colaboradores-cabecera{padding:16px;}
 .asesores-ficha form,.colaboradores-reparto-contenido{padding:16px;}
 .asesor-horario{grid-template-columns:1fr 1fr;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--linea);}
 .asesor-horario select{grid-column:1/-1;}
 .asesor-horario button{justify-self:start;}
 .asesor-checks{flex-wrap:wrap;gap:16px;}
 .colaborador-telefono{grid-template-columns:105px minmax(0,1fr);}
 .asesores-ficha .ficha-acciones>button{width:100%;justify-content:center;}
}

/* Conocimiento central 046: catálogo consultable junto a los documentos. */
.conocimiento-catalogo{margin:16px;padding:16px 20px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);flex:none;}
.conocimiento-catalogo>summary{cursor:pointer;font-weight:650;}
.conocimiento-catalogo>input{width:100%;padding:10px 12px;margin:8px 0 16px;background:var(--panel-2);color:var(--tinta);border:1px solid var(--linea-fuerte);border-radius:6px;}
.conocimiento-eventos-lista{max-height:400px;overflow:auto;}
.conocimiento-evento{padding:14px 4px;border-top:1px solid var(--linea);}
.conocimiento-evento summary{cursor:pointer;}
.conocimiento-evento p{line-height:1.5;}

/* Perfil personal, también disponible en pantallas pequeñas. */
.perfil-hoja { width:100%; max-width:900px; margin-inline:auto; }
.perfil-formulario { padding:24px; }
.perfil-formulario > h2 { padding:0; margin:0 0 18px; border:0; }
.perfil-formulario > h2:not(:first-child) { margin-top:28px; }
.perfil-formulario .ayuda { margin:14px 0; line-height:1.5; }
.perfil-formulario > .asesor-campo { max-width:400px; }
@media(max-width:640px){ .perfil-formulario { padding:18px; } }

/* Visibilidad de contraseñas: mismo control en acceso, perfil y colaboradores. */
.clave-control { position:relative; width:100%; min-width:0; }
.clave-control input { padding-inline-end:52px; }
.clave-control .clave-visibilidad {
  position:absolute; inset-inline-end:3px; top:3px; bottom:3px;
  width:40px; min-width:40px; height:auto; min-height:0; padding:0;
  background:transparent; border-color:transparent; color:var(--tinta-2);
}
.clave-control .clave-visibilidad:hover { background:var(--panel-2); color:var(--tinta); }
.clave-control .clave-visibilidad[aria-pressed='true'] { color:var(--acento); background:var(--acento-suave); }
.clave-control .clave-visibilidad:focus-visible { outline:2px solid var(--acento); outline-offset:-2px; }
.campo-clave { margin:12px 0 4px; }
.campo-clave > label { margin:0; }
@media (pointer:coarse) {
  .clave-control input { min-height:48px; padding-inline-end:54px; }
  .clave-control .clave-visibilidad { width:44px; min-width:44px; top:2px; bottom:2px; }
}

.config-logo { display:block; width:160px; height:96px; object-fit:contain; background:var(--panel-2); border:1px solid var(--linea); padding:12px; border-radius:var(--r); }
.config-logo-fila { display:flex; align-items:center; gap:20px; margin-block:20px; }
.acceso-correo { width:min(100%,430px); padding:24px; background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); }
.entrada .acceso-correo form { width:100%; padding:0; border:0; box-shadow:none; }
.acceso-correo .config-logo { margin-bottom:20px; }
@media(max-width:640px){.config-logo-fila{align-items:stretch;flex-direction:column;}.config-logo-fila input{max-width:100%;}}


/* Paneles 049: campos coherentes e interruptores accesibles. */
.config-formulario input:not([type=checkbox]):not([type=file]) {
  width:100%; min-width:0; min-height:44px; box-sizing:border-box;
  padding:11px 12px; font:inherit; font-size:14px; line-height:1.4;
  color:var(--tinta); background:var(--panel-2);
  border:1px solid var(--linea-fuerte); border-radius:var(--r);
}
.config-formulario > .asesor-campo { max-width:none; }
.config-formulario .asesor-campo { min-width:0; }
.config-formulario .config-logo-fila input[type=file] { width:100%; font:inherit; }
.config-formulario input[type=file]::file-selector-button {
  font:inherit; padding:10px 12px; margin-right:12px; border-radius:var(--r);
  border:1px solid var(--linea-fuerte); color:var(--tinta); background:var(--panel-2); cursor:pointer;
}
body input.interruptor {
  appearance:none; -webkit-appearance:none; display:inline-block; position:relative;
  box-sizing:border-box; width:46px; min-width:46px; max-width:46px;
  height:28px; min-height:28px; padding:3px; margin:0;
  border:1px solid var(--tinta-3); border-radius:999px;
  background:var(--panel-2); cursor:pointer; flex:0 0 46px; vertical-align:middle;
  transition:background-color .16s, border-color .16s;
}
body input.interruptor::before {
  content:''; display:block; width:20px; height:20px; border-radius:50%;
  background:var(--tinta-2); transition:transform .16s, background-color .16s;
}
body input.interruptor:checked { background:var(--acento); border-color:var(--acento); }
body input.interruptor:checked::before { transform:translateX(18px); background:var(--acento-texto); }
body input.interruptor:focus-visible { outline:2px solid var(--acento); outline-offset:4px; }
body input.interruptor:disabled { opacity:.45; cursor:not-allowed; }
.asesores-ficha input.interruptor:read-only { opacity:1; }
.asesores-ficha input.interruptor:disabled { opacity:.45; }
.opcion-interruptor,.opcion-check { display:flex; align-items:center; gap:12px; min-height:44px; line-height:1.5; cursor:pointer; }
.config-formulario .config-activar { margin:20px 0 0; padding:12px 0; }
.asesor-checks { flex-wrap:wrap; }
.asesor-checks label,.asesor-permisos label,.colaboradores-reparto-contenido > label { min-height:44px; cursor:pointer; }
@media(prefers-reduced-motion:reduce){body input.interruptor,body input.interruptor::before{transition:none;}}
@media(forced-colors:active){
  body input.interruptor { background:Canvas; border-color:ButtonText; forced-color-adjust:none; }
  body input.interruptor::before { background:ButtonText; }
  body input.interruptor:checked { background:Highlight; border-color:Highlight; }
  body input.interruptor:checked::before { background:HighlightText; }
}

/* 051: la navegación móvil no impone su ancho mínimo a toda la página. */
.app { width:100%; max-width:100%; }
.tabs-movil { min-width:0; max-width:100%; }
.preferencias-personales { padding:20px 24px; }
.preferencias-personales h2 { padding:0; margin:0 0 16px; border:0; }
.tema-selector { display:flex; flex-direction:column; gap:8px; }
.tema-selector select { font:inherit; min-height:44px; padding:8px 12px; border:1px solid var(--linea-fuerte); border-radius:var(--r); color:var(--tinta); background:var(--panel-2); }
.instalacion-acciones { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
.instalacion-ayuda { margin-top:12px; line-height:1.6; overflow-wrap:anywhere; }
@media(max-width:900px){
  .app { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .tabs-movil { display:flex; width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
  .tabs-movil > a { flex:0 0 78px; min-width:78px; padding:8px 4px; }
  .contenido,.panel-conv,.conv-cabecera,.redaccion,.redaccion-caja,.bloqueo,.hoja { min-width:0; max-width:100%; }
  .conv-estado { flex-wrap:wrap; min-width:0; }
  .conv-quien,.conv-quien > * { min-width:0; max-width:100%; }
  .bloqueo p { min-width:0; flex-basis:100%; }
  .msg-cuerpo,.msg-pie { overflow-wrap:anywhere; }
  body input:not([type=checkbox]):not([type=radio]):not([type=file]),body select,body textarea { font-size:16px; }
  .asesor-horario { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .asesor-horario select { grid-column:1/-1; }
  .asesor-horario button { grid-column:1/-1; justify-self:start; }
}
@media(max-width:560px){
  .conv-cabecera { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .conv-cabecera > button,.conv-cabecera .solo-movil { min-width:0; max-width:100%; white-space:normal; }
  .perfil-formulario,.preferencias-personales { padding:18px; }
}
@media(display-mode:standalone){
  .app { padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
}

/* Interfaz 063: navegación y marca por tema. */
.marca { align-items:center; padding-bottom:20px; }
.marca img { background:transparent; width:180px; height:76px; object-fit:contain; padding:6px; }
.marca-texto { text-align:center; }
.logo-negro { filter:brightness(0); }
.rail > nav { overflow-y:auto; min-height:0; padding-bottom:16px; }
.rail-pie { flex-shrink:0; padding-top:10px; gap:4px; }
.nav-atencion summary { display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px; border-radius:var(--r); color:var(--tinta-2); font-weight:600; cursor:pointer; font-size:13.5px; list-style:none; }
.nav-atencion summary::-webkit-details-marker,.movil-mas summary::-webkit-details-marker,.filtro-movil summary::-webkit-details-marker { display:none; }
.nav-atencion summary > svg:last-child { margin-left:auto; transition:transform .15s; }
.nav-atencion[open] summary { background:var(--acento-suave); color:var(--acento); }
.nav-atencion[open] summary > svg:last-child { transform:rotate(180deg); }
.nav-submenu { border-left:1px solid var(--linea); margin:6px 8px 12px 18px; padding-left:10px; }
.rail .nav-submenu a { min-height:34px; font-size:13px; }
.usuario-perfil { display:flex; gap:10px; padding:10px; text-decoration:none; border-radius:var(--r); color:var(--tinta-2); min-height:40px; }
.usuario-perfil:hover,.usuario-perfil[aria-current] { background:var(--acento-suave); color:var(--acento); }
.tema-boton { display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:8px 10px; }
.tema-boton svg { flex:none; }
.bandeja-filtro { padding:14px 16px; border-bottom:1px solid var(--linea); flex:none; }
.bandeja-titulo { font-size:14px; margin:0; color:var(--tinta); }
.filtro-movil { display:none; }
.contador-caracteres { margin-left:auto; font-size:12px; color:var(--tinta-3); }
.contador-caracteres:empty { display:none; }
.contador-caracteres.mal { color:var(--alerta); font-weight:600; }
.marca-ajustes { display:grid; gap:16px; margin:24px 0; }
.marca-ajuste { padding:18px; border:1px solid var(--linea); border-radius:var(--r); min-width:0; }
.marca-ajuste h3 { margin:0; font-size:14px; }
.marca-ajuste .config-logo-fila { margin:14px 0 6px; }
.marca-ajuste-claro .config-logo { background:#fff; border-color:#ddd; }
.marca-ajuste-oscuro .config-logo { background:#1a1a1e; border-color:#444; }
.config-logo[data-logo-marca] { background:transparent; }
@media(max-width:850px){
 .bandeja-titulo { display:none; }
 .filtro-movil { display:block; position:relative; }
 .filtro-movil summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; min-height:30px; font-weight:650; list-style:none; }
 .filtro-opciones { padding:8px 0; display:grid; gap:4px; }
 .filtro-opciones a { padding:10px; color:var(--tinta-2); border-radius:var(--r); text-decoration:none; }
 .filtro-opciones a[aria-current] { background:var(--acento-suave); color:var(--acento); }
 .tabs-movil { overflow:visible; justify-content:space-around; gap:0; position:relative; z-index:20; }
 .tabs-movil > a,.tabs-movil > details { flex:1 1 0; min-width:0; max-width:25%; }
 .tabs-movil a { font-size:11px; }
 .movil-mas > summary { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px; min-height:52px; list-style:none; color:var(--tinta-2); cursor:pointer; font-size:11px; }
 .movil-menu { position:absolute; bottom:calc(100% + 8px); right:8px; width:min(300px,calc(100vw - 16px)); max-height:65dvh; overflow-y:auto; background:var(--panel); border:1px solid var(--linea); border-radius:10px; box-shadow:0 8px 28px #0002; padding:8px; }
 .tabs-movil .movil-menu a { display:flex; flex-direction:row; justify-content:flex-start; padding:12px; gap:10px; font-size:13px; }
 .movil-menu button { width:100%; justify-content:flex-start; }
}

.config-logo-fondo { width:160px; height:96px; flex:none; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; }
.marca-ajuste-claro .config-logo-fondo { background:#fff; }
.marca-ajuste-oscuro .config-logo-fondo { background:#1a1a1e; }
.marca-ajuste .config-logo-fondo .config-logo { background:transparent; border:0; width:100%; height:100%; }

/* Instalación pública 064: accesible antes de iniciar sesión. */
.entrada { overflow-y:auto; align-items:safe center; }
.entrada form { flex:none; }
.instalacion-acceso { margin-top:22px; padding-top:20px; border-top:1px solid var(--linea); }
.entrada .instalacion-acceso h2 { font-size:14px; font-weight:650; margin:0 0 8px; }
.instalacion-acceso .pista { font-size:13px; line-height:1.5; }
.instalacion-controles { margin-top:12px; }
.entrada .instalar-app { margin-top:4px; min-height:44px; height:auto; padding:10px 12px; }
.instalacion-ayuda:empty { display:none; }
.instalacion-ayuda { font-size:13px; }
.instalacion-ayuda p { margin:8px 0; }
.instalacion-ayuda ol { margin:8px 0; padding-left:22px; }
.instalacion-ayuda li { margin:6px 0; }
@media(max-width:640px){.entrada{padding:20px 16px max(20px,env(safe-area-inset-bottom));}.entrada form{width:min(400px,100%);padding:22px;}}

/* Apariencia disponible antes de iniciar sesión. */
.acceso-cabecera { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.entrada .acceso-cabecera h1 { margin:0; min-width:0; overflow-wrap:anywhere; }
.entrada .tema-acceso { width:44px; height:44px; min-width:44px; margin:0; padding:0; flex:none; justify-content:center; border:1px solid var(--linea); border-radius:50%; background:var(--panel); color:var(--tinta); }
.entrada .tema-acceso span { display:none; }
.entrada .tema-acceso:hover { background:var(--fondo); }

/* Marca centrada en el acceso, independiente del botón de apariencia. */
.entrada .acceso-marca { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:0; margin-bottom:18px; }
.entrada .acceso-marca h1 { grid-column:2; display:flex; justify-content:center; align-items:center; }
.entrada .acceso-marca .tema-acceso { grid-column:3; justify-self:end; }
.acceso-logo { display:block; width:180px; max-width:100%; height:78px; object-fit:contain; }

/* 068: navegación móvil lateral, con cabecera estable. */
.cabecera-movil { display:none; }
.menu-lateral { width:min(340px,calc(100vw - 48px)); max-width:none; height:100dvh; max-height:100dvh; margin:0; padding:0; border:0; border-right:1px solid var(--linea); background:var(--panel); color:var(--tinta); overflow-y:auto; overscroll-behavior:contain; }
.menu-lateral::backdrop { background:rgba(0,0,0,.48); }
.menu-lateral .rail { display:flex; min-height:100%; border:0; padding: max(12px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom)); }
.menu-lateral .rail > nav { overflow:visible; padding-bottom:20px; }
.menu-lateral .rail nav a,.menu-lateral .nav-atencion summary { min-height:44px; white-space:normal; }
.menu-lateral .rail nav a > span:not(.contador) { flex:1; }
.menu-encabezado { display:flex; align-items:center; justify-content:space-between; padding:0 4px 8px; }
.menu-abrir,.menu-cerrar,.menu-perfil { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; padding:0; color:var(--tinta); text-decoration:none; }
.bandeja-etiqueta { margin:0 0 5px; font-size:11px; color:var(--tinta-3); }
.bandeja-resumen { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--tinta-2); }
.bandeja-vacia { padding:40px 24px; display:flex; align-items:center; flex-direction:column; text-align:center; gap:12px; color:var(--tinta-2); }
.bandeja-vacia h2 { margin:0; font-size:17px; color:var(--tinta); }
.bandeja-vacia p { margin:0; max-width:300px; line-height:1.6; }
@media(max-width:900px){
 .app { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); padding-bottom:env(safe-area-inset-bottom); }
 .app > .contenido { grid-row:2; grid-column:1; }
 .cabecera-movil { display:grid; grid-template-columns:88px minmax(0,1fr) 88px; grid-row:1; grid-column:1; align-items:center; gap:4px; padding:8px 12px; border-bottom:1px solid var(--linea); background:var(--panel); }
 .cabecera-marca { display:flex; align-items:center; justify-content:center; min-width:0; min-height:44px; border-radius:var(--r); }
 .cabecera-marca img { width:140px; max-width:100%; height:44px; object-fit:contain; }
 .cabecera-accesos { display:flex; align-items:center; justify-content:flex-end; }
 .cabecera-movil .tema-cabecera { width:44px; height:44px; min-height:44px; padding:0; justify-content:center; color:var(--tinta); }
 .tema-cabecera span { display:none; }
 .bandeja-titulo { display:block; font-size:22px; }
 .bandeja-filtro { padding:20px 16px 16px; }
 .bandeja-etiqueta { font-size:12px; }
 .bandeja-resumen { font-size:13px; }
 .tabs-movil,.filtro-movil { display:none; }
 :root[data-incrustado] .app { grid-template-rows:auto minmax(0,1fr); }
}

/* 071 · Ayudas de permisos y canales de bienvenida. */
.asesores-ficha .opcion-ayuda {
  display:flex; align-items:flex-start; gap:12px; padding:12px 0;
  margin:0; min-width:0; min-height:44px; cursor:pointer;
}
.asesores-ficha .opcion-ayuda > .interruptor { margin-top:2px; }
.opcion-ayuda-texto { display:flex; flex-direction:column; gap:5px; min-width:0; }
.opcion-ayuda-titulo { color:var(--tinta); font-size:14px; font-weight:600; line-height:1.5; }
.opcion-ayuda-descripcion { color:var(--tinta-2); font-size:13px; font-weight:400; line-height:1.55; overflow-wrap:anywhere; }
.colaborador-estado { margin:20px 0 12px; }
.colaborador-bienvenida { margin:12px 0 26px; padding:8px 16px; border:1px solid var(--linea); border-radius:var(--r); background:var(--panel-2); }
.bienvenida-canales { border-top:1px solid var(--linea); margin-top:6px; padding:16px 0 4px; }
.bienvenida-canales[hidden] { display:none; }
.bienvenida-canales-titulo { margin:0 0 8px; color:var(--tinta-2); font-size:13px; font-weight:600; }
.bienvenida-canales > .ayuda { margin:10px 0 4px; }
@media(max-width:600px){.colaborador-bienvenida{padding-inline:12px;}.asesores-ficha .opcion-ayuda{gap:10px;}}

/* Disponibilidad personal: controles coherentes con Colaboradores. */
.disponibilidad-formulario{margin-bottom:20px;}
.disponibilidad-formulario .opcion-ayuda{display:flex;align-items:flex-start;gap:12px;margin:18px 0;cursor:pointer;}
.disponibilidad-formulario .opcion-ayuda > .interruptor{flex-shrink:0;margin-top:2px;}
.disponibilidad-formulario .asesor-horario input,.disponibilidad-formulario .asesor-horario select{width:100%;min-width:0;min-height:44px;font:inherit;padding:10px 12px;border:1px solid var(--linea-fuerte);border-radius:6px;color:var(--tinta);background:var(--panel-2);}
.disponibilidad-formulario .asesor-horario input:focus-visible,.disponibilidad-formulario .asesor-horario select:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
.disponibilidad-formulario .ayuda{font-size:13px;color:var(--tinta-2);}

/* Avisos personales: misma jerarquía y controles que disponibilidad. */
.avisos-formulario{margin-bottom:20px;}
.avisos-formulario .opcion-ayuda{display:flex;align-items:flex-start;gap:12px;margin:18px 0;cursor:pointer;}
.avisos-formulario .opcion-ayuda > .interruptor{flex-shrink:0;margin-top:2px;}
.avisos-formulario .ayuda{font-size:13px;color:var(--tinta-2);line-height:1.6;}
.avisos-formulario .ficha-acciones{flex-wrap:wrap;gap:12px;}

/* Historial administrativo de avisos: lectura cómoda en móvil. */
.avisos-filtros{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0;align-items:center}
.avisos-filtros input{flex:1 1 240px;min-width:0}.avisos-filtros select{flex:1 1 160px;min-width:0;max-width:100%}
.historial-avisos{display:grid;gap:14px}.aviso-tarjeta{border:1px solid var(--borde,#7775);border-radius:12px;padding:18px;overflow-wrap:anywhere}
.aviso-cabecera{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.aviso-tarjeta p{margin:10px 0}.avisos-paginacion{display:flex;gap:12px;justify-content:flex-end;margin:18px 0}

/* 079: filtros y estados de atención, con texto además de color. */
.avisos-filtros{display:grid;grid-template-columns:minmax(220px,1.45fr) minmax(160px,1fr) minmax(190px,1.15fr) auto;gap:16px;align-items:end;padding:22px;border:1px solid var(--linea);border-radius:12px;background:var(--panel);margin:24px 0;}
.aviso-filtro{display:flex;flex-direction:column;gap:9px;min-width:0;font-size:13px;color:var(--tinta-2);}
.avisos-filtros input,.avisos-filtros select{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;height:46px;min-height:46px;flex:none;font:inherit;font-size:14px;line-height:1.3;padding:11px 14px;border:1px solid var(--linea-fuerte);border-radius:8px;background:var(--panel-2);color:var(--tinta);}
.avisos-filtros select{padding-right:40px;cursor:pointer;}.avisos-filtros option{background:var(--panel-2);color:var(--tinta);}
.aviso-select{position:relative;display:block;}.aviso-select>svg{position:absolute;right:14px;top:15px;pointer-events:none;color:var(--tinta-2);}
.avisos-filtros button{height:46px;min-height:46px;border-radius:8px;padding-inline:20px;}
.avisos-filtros input:focus-visible,.avisos-filtros select:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-color:var(--acento);}
.avisos-introduccion{color:var(--tinta-2);margin:4px 0 0;line-height:1.6;}.avisos-resultados{padding-top:2px;}.avisos-aclaracion{margin-top:24px;max-width:900px;line-height:1.7;color:var(--tinta-2);font-size:12px;}
.avisos-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:48px 24px;border:1px dashed var(--linea-fuerte);border-radius:12px;background:var(--panel);}.avisos-vacio>svg{color:var(--tinta-2);}.avisos-vacio h2{font-size:17px;margin:0;}.avisos-vacio p{max-width:440px;line-height:1.7;color:var(--tinta-2);margin:0;}
.asesor-item.discreta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}.asesor-item small{font-size:11px;color:var(--tinta-2);}
.disponibilidad-indicador{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:400;}.disponibilidad-indicador:before{content:'';width:8px;height:8px;border-radius:50%;background:#ce6b67;flex-shrink:0;}.disponibilidad-indicador.disponible:before{background:#3fba84;}
.atencion-politica{padding:20px;margin:20px 0;}.atencion-politica summary{cursor:pointer;font-weight:600;}.atencion-politica form{margin-top:18px;max-width:920px;}.atencion-politica textarea{width:100%;box-sizing:border-box;min-height:120px;padding:12px;font:inherit;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea-fuerte);border-radius:8px;resize:vertical;}.atencion-politica p{line-height:1.65;}.atencion-politica button{margin-top:12px;}
.avisos-cola{border:1px solid var(--linea);border-left:3px solid var(--acento);border-radius:10px;padding:20px;margin:20px 0;background:var(--panel);}.avisos-cola h2{font-size:16px;margin:0 0 8px;}.aviso-pendiente{display:grid;gap:6px;padding:14px 0;border-top:1px solid var(--linea);text-decoration:none;color:var(--tinta);}.aviso-pendiente span,.aviso-pendiente small{color:var(--tinta-2);}
@media(max-width:1100px){.avisos-filtros{grid-template-columns:1fr 1fr;}.avisos-filtros button{justify-content:center;}}
@media(max-width:600px){.avisos-filtros{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px;}.avisos-vacio{padding:36px 20px;}.avisos-cola{padding:16px;}.avisos-filtros input,.avisos-filtros select{font-size:16px;}}

.avisos-paginacion[hidden]{display:none;}
.asesores-lista .asesor-item.discreta{height:auto;min-height:98px;padding:14px 12px;white-space:normal;line-height:1.4;flex-shrink:0;}

.push-supervision{margin-top:26px;padding-top:18px;border-top:1px solid var(--linea);}.push-supervision[hidden]{display:none;}.push-supervision select{width:100%;max-width:520px;min-height:44px;padding:10px 12px;font:inherit;border:1px solid var(--linea-fuerte);border-radius:8px;background:var(--panel-2);color:var(--tinta);}.avisos-actualizacion{color:var(--tinta-2);font-size:12px;line-height:1.6;margin-top:-4px;margin-bottom:18px;}

.aviso-laboratorio{padding:.6rem 1rem;background:#172554;color:#bfdbfe;text-align:center;font:600 13px system-ui;position:relative;z-index:1000}

/* Formularios de acceso: estructura reutilizable, independiente de la marca. */
.entrada { height:100%; min-height:0; overflow-y:auto; padding:32px 20px; align-items:safe center; }
.entrada .acceso-correo { width:min(100%,520px); padding:32px; border-radius:20px; }
.entrada .acceso-correo form { background:transparent; }
.entrada h1 { font-size:24px; line-height:1.25; letter-spacing:-.6px; }
.entrada .ayuda { font-size:15px; line-height:1.6; color:var(--tinta-2); margin:12px 0 24px; }
.entrada input:not([type]), .entrada input[type=text], .entrada input[type=email], .entrada input[type=password] {
 width:100%; min-width:0; height:48px; padding:12px 14px; border-radius:10px; font-size:16px;
}
.entrada input:focus-visible { outline:3px solid var(--acento-borde); outline-offset:2px; border-color:var(--acento); }
.entrada .clave-control input { padding-inline-end:56px; }
.entrada .clave-control .clave-visibilidad { top:2px; bottom:2px; width:44px; min-width:44px; height:44px; margin:0; padding:0; }
.instalacion-formulario { display:grid; gap:16px; }
.instalacion-formulario label { margin:0 0 7px; font-size:13px; }
.instalacion-formulario .campo-clave { margin:0; gap:0; }
.alta-fila { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.alta-campo { min-width:0; }
.alta-pista { margin:-10px 0 -2px; font-size:12px; color:var(--tinta-2); }
.instalacion-formulario > [aria-live]:empty { display:none; }
.entrada .instalacion-formulario button.principal { height:48px; margin:4px 0 0; border-radius:10px; font-size:15px; }
@media(max-width:540px){
 .entrada { padding:20px 12px; }
 .entrada .acceso-correo { padding:24px 20px; border-radius:16px; }
 .entrada h1 { font-size:22px; }
 .alta-fila { grid-template-columns:1fr; }
}