/*
 * Alma CRM — hoja de estilos única. Sin compilación: lo que ves es lo que carga el navegador.
 * El contrato con las vistas está en docs/DISENO.md; las piezas las genera app/Support/ui.php.
 *
 * Capas, en este orden:
 *   1. Fichas            colores, tipografía, espacio (tema claro y tema oscuro)
 *   2. Base              reinicio mínimo, texto, enlaces, foco
 *   3. Marcos            app (riel + hoja), auth (orbe + hoja), error
 *   4. Estructura        .block .split .stack .cluster .grid-* .rows .table .kv .form .filters
 *   5. Piezas            botones, campos, puntos, personas, avisos, navegación interna, flotantes
 *   6. Pantallas         tableta (riel de iconos) y móvil (barra inferior)
 *   7. Impresión y movimiento reducido
 *
 * Tres ideas que no se negocian:
 *   · El punto es la unidad: estado, presencia, progreso y pasos se dibujan con puntos.
 *   · Rojo = pide atención ahora. Morado = en orden. Ámbar = pendiente. El rojo nunca decora.
 *   · Una sola hoja sobre el escritorio: dentro de la hoja no hay cajas con sombra; separan el espacio y un filete.
 */

/* ════════════════════════════════════════════════════════════════════════
   1. FICHAS
   ════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Marca — muestreados del logo */
  --noche: #2B1055;
  --azul: #5B2BB5;
  --mar: #7445C7;
  --cielo: #C4B0F0;
  --rojo: #E93C33;
  --ambar: #BC7705;

  /* Superficies */
  --mesa: #EFEBF7;            /* el escritorio */
  --papel: #FFFFFF;           /* la hoja */
  --bruma: #F6F3FB;           /* superficie tenue dentro de la hoja */
  --campo: #FFFFFF;           /* fondo de los campos */
  --flotante: #FFFFFF;        /* menús y diálogos */
  --filete: #E2DBF0;          /* líneas divisorias */
  --filete-fuerte: #CEC3E3;
  --borde: #8577A6;           /* contorno de controles (3:1 sobre cualquier superficie) */
  --velo: rgba(43, 16, 85, 0.06);
  --velo-fuerte: rgba(43, 16, 85, 0.11);

  /* Tinta */
  --tinta: #2B1055;
  --tinta-2: #5A4A7D;
  --tinta-3: #66578A;

  /* Acción */
  --accion: #5B2BB5;
  --accion-fuerte: #4A2296;
  --sobre-accion: #FFFFFF;
  --enlace: #5B2BB5;
  --foco: #5B2BB5;
  --foco-halo: rgba(196, 176, 240, 0.7);

  /* Estados: el color del punto, el del texto y el del fondo tenue */
  --ok: #5B2BB5;
  --nuevo: #8B5CF6;
  --nuevo-halo: rgba(196, 176, 240, 0.55);
  --alerta: #BC7705;
  --alerta-tinta: #8A5600;
  --alerta-fondo: #FBF1DC;
  --urgente: #E93C33;
  --urgente-tinta: #B8231B;
  --urgente-fondo: #FDECEA;
  --urgente-halo: rgba(233, 60, 51, 0.2);
  --urgente-solido: #CF2A21;
  --urgente-solido-fuerte: #B3221A;
  --sobre-urgente: #FFFFFF;
  --apagado: #8577A6;
  --punto-vacio: #CEC3E3;

  /* Tostada (aviso flotante): invertida respecto de la hoja */
  --tostada: #2B1055;
  --sobre-tostada: #FFFFFF;

  /* Conversaciones: el fondo del chat y sus burbujas (las del cliente, las nuestras) */
  --fondo-chat: #F6F3FB;
  --burbuja: #FFFFFF;
  --burbuja-propia: #E9E1FA;

  /* Sombras: solo para lo que flota, teñidas de azul noche */
  --sombra-hoja: 0 1px 2px rgba(43, 16, 85, 0.04), 0 18px 44px -28px rgba(43, 16, 85, 0.22);
  --sombra-flotante: 0 0 0 1px rgba(43, 16, 85, 0.05), 0 14px 36px -10px rgba(43, 16, 85, 0.24), 0 4px 10px -4px rgba(43, 16, 85, 0.1);
  --telon: rgba(20, 8, 40, 0.46);

  /* Flecha de los desplegables */
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A4A7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Tipografía */
  --f-titulo: "Funnel Display", "Funnel Sans", "Alma respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Funnel Sans", "Alma respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs: 0.8125rem;   /* 13 */
  --t-sm: 0.875rem;    /* 14 */
  --t-base: 0.9375rem; /* 15 */
  --t-md: 1.0625rem;   /* 17 */
  --t-lg: 1.25rem;     /* 20 */
  --t-xl: 1.625rem;    /* 26 */
  --t-2xl: 2.125rem;   /* 34 */
  --t-3xl: 3rem;       /* 48 */

  /* Espacio: múltiplos de 4 px */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;

  /* Radios */
  --r-control: 0.625rem;  /* 10: botones y campos */
  --r-bloque: 0.875rem;   /* 14: avisos, menús */
  --r-hoja: 1.5rem;       /* 24: la hoja */

  /* Medidas */
  --alto: 2.75rem;        /* 44: alto de botones y campos */
  --riel: 15.5rem;        /* ancho del riel */
  --borde-hoja: 0.75rem;  /* cuánto escritorio se ve alrededor de la hoja */
  --margen: clamp(1.25rem, 4.2vw, 3.5rem);  /* margen interior de la hoja */
  --barra: 0rem;          /* alto de la barra inferior (solo móvil) */

  /* Movimiento */
  --rapido: 120ms;
  --suave: 180ms;
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Tema oscuro: elegido a mano… */
html[data-theme="oscuro"] {
  color-scheme: dark;

  --mesa: #120A24;
  --papel: #1C1136;
  --bruma: #26184A;
  --campo: #150C2B;
  --flotante: #2A1B50;
  --filete: #35255F;
  --filete-fuerte: #463378;
  --borde: #8E7FB5;
  --velo: rgba(196, 176, 240, 0.08);
  --velo-fuerte: rgba(196, 176, 240, 0.15);

  --tinta: #EEE9F8;
  --tinta-2: #BDB0D6;
  --tinta-3: #A596C4;

  --accion: #C4B0F0;
  --accion-fuerte: #D9CCF7;
  --sobre-accion: #1E0F45;
  --enlace: #C4B0F0;
  --foco: #C4B0F0;
  --foco-halo: rgba(196, 176, 240, 0.36);

  --ok: #A78BFA;
  --nuevo: #D9CCF7;
  --nuevo-halo: rgba(217, 204, 247, 0.26);
  --alerta: #E0A030;
  --alerta-tinta: #F0B95A;
  --alerta-fondo: #33290F;
  --urgente: #F2564D;
  --urgente-tinta: #FF8A80;
  --urgente-fondo: #3A1A22;
  --urgente-halo: rgba(242, 86, 77, 0.3);
  --urgente-solido: #F2675E;
  --urgente-solido-fuerte: #FF8A80;
  --sobre-urgente: #2A0503;
  --apagado: #8E7FB5;
  --punto-vacio: #463378;

  --tostada: #EEE9F8;
  --sobre-tostada: #2B1055;

  --fondo-chat: #160D2C;
  --burbuja: #26184A;
  --burbuja-propia: #3B2475;

  --sombra-hoja: 0 0 0 1px rgba(196, 176, 240, 0.06);
  --sombra-flotante: 0 0 0 1px rgba(196, 176, 240, 0.12), 0 18px 44px -10px rgba(0, 0, 0, 0.62);
  --telon: rgba(8, 3, 18, 0.68);

  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDB0D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* …o el del sistema, cuando la persona dejó "automático". (Mismos valores que el bloque de arriba.) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="claro"]):not([data-theme="oscuro"]) {
    color-scheme: dark;

    --mesa: #120A24;
    --papel: #1C1136;
    --bruma: #26184A;
    --campo: #150C2B;
    --flotante: #2A1B50;
    --filete: #35255F;
    --filete-fuerte: #463378;
    --borde: #8E7FB5;
    --velo: rgba(196, 176, 240, 0.08);
    --velo-fuerte: rgba(196, 176, 240, 0.15);

    --tinta: #EEE9F8;
    --tinta-2: #BDB0D6;
    --tinta-3: #A596C4;

    --accion: #C4B0F0;
    --accion-fuerte: #D9CCF7;
    --sobre-accion: #1E0F45;
    --enlace: #C4B0F0;
    --foco: #C4B0F0;
    --foco-halo: rgba(196, 176, 240, 0.36);

    --ok: #A78BFA;
    --nuevo: #D9CCF7;
    --nuevo-halo: rgba(217, 204, 247, 0.26);
    --alerta: #E0A030;
    --alerta-tinta: #F0B95A;
    --alerta-fondo: #33290F;
    --urgente: #F2564D;
    --urgente-tinta: #FF8A80;
    --urgente-fondo: #3A1A22;
    --urgente-halo: rgba(242, 86, 77, 0.3);
    --urgente-solido: #F2675E;
    --urgente-solido-fuerte: #FF8A80;
    --sobre-urgente: #2A0503;
    --apagado: #8E7FB5;
    --punto-vacio: #463378;

    --tostada: #EEE9F8;
    --sobre-tostada: #2B1055;

    --fondo-chat: #160D2C;
    --burbuja: #26184A;
    --burbuja-propia: #3B2475;

    --sombra-hoja: 0 0 0 1px rgba(196, 176, 240, 0.06);
    --sombra-flotante: 0 0 0 1px rgba(196, 176, 240, 0.12), 0 18px 44px -10px rgba(0, 0, 0, 0.62);
    --telon: rgba(8, 3, 18, 0.68);

    --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDB0D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* El logo tiene una versión para cada fondo: se muestra la que corresponde al tema. */
.brand-on-dark { display: none; }
html[data-theme="oscuro"] .brand-on-light { display: none; }
html[data-theme="oscuro"] .brand-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="claro"]):not([data-theme="oscuro"]) .brand-on-light { display: none; }
  html:not([data-theme="claro"]):not([data-theme="oscuro"]) .brand-on-dark { display: block; }
}

/* ════════════════════════════════════════════════════════════════════════
   2. BASE
   ════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: var(--filete-fuerte) transparent;
  scroll-padding-top: var(--s6);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mesa);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend, pre {
  margin: 0;
  padding: 0;
}

ol, ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

img, svg, canvas, video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

a {
  color: var(--enlace);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

strong, b, .strong { font-weight: 600; }

small, .small { font-size: var(--t-sm); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

button { cursor: pointer; }

fieldset { border: 0; min-width: 0; }

table { border-collapse: collapse; border-spacing: 0; }

time { white-space: nowrap; }

hr {
  border: 0;
  border-top: 1px solid var(--filete);
  margin: var(--s6) 0;
}

::selection {
  background: var(--cielo);
  color: var(--noche);
}

[hidden] { display: none !important; }

/* Foco visible en todo lo interactivo: un anillo del color de acción, separado del control. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

:focus:not(:focus-visible) { outline: none; }

/* La hoja recibe el foco al usar "Saltar al contenido": no hace falta dibujarlo. */
main:focus { outline: none; }

/* Iconos (Lucide). El trazo hereda el color del texto. */
.ic {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke-width: 1.75;
  vertical-align: -0.24em;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--s3);
  left: var(--s3);
  z-index: 200;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-control);
  background: var(--accion);
  color: var(--sobre-accion);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline-offset: 3px;
}

/* Ajustes de texto */
.muted { color: var(--tinta-2); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.lead {
  max-width: 62ch;
  color: var(--tinta-2);
  font-size: var(--t-md);
  line-height: 1.55;
}

.title-2 {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
}

.title-3 {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Cifra grande con su leyenda */
.figure {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.figure strong {
  font-family: var(--f-titulo);
  font-size: var(--t-3xl);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.figure span {
  color: var(--tinta-2);
  font-size: var(--t-sm);
}

/* ════════════════════════════════════════════════════════════════════════
   3. MARCOS
   ════════════════════════════════════════════════════════════════════════ */

/* ── 3.1 Aplicación: el riel va directo sobre el escritorio; el contenido, en la hoja ── */

body.app {
  display: grid;
  grid-template-columns: var(--riel) minmax(0, 1fr);
  align-items: start;
}

.rail {
  --sup: var(--mesa);
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  height: 100vh;
  height: 100dvh;
  padding: var(--s6) var(--s3) var(--s3) var(--s3);
}

.rail-brand {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: var(--s6);
  padding: 0 var(--s2) 0 1.125rem;
  border-radius: var(--r-control);
  text-decoration: none;
}

.rail-brand .brand-logo {
  width: auto;
  height: 2.375rem;
}

.rail-brand .brand-mark {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
}

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

.rail-foot {
  margin-top: auto;
  padding-top: var(--s4);
}

.rail-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 2.5rem;
  padding: 0 var(--s3) 0 1.375rem;
  border-radius: var(--r-control);
  color: var(--tinta-2);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--rapido), color var(--rapido);
}

.rail-link .ic {
  width: 1.25rem;
  height: 1.25rem;
}

.rail-link:hover {
  background: var(--velo);
  color: var(--tinta);
}

.rail-link:focus-visible { outline-offset: -2px; border-radius: var(--r-control); }

/* La entrada activa no lleva caja: la marca un punto, como en el orbe. */
.rail-link.is-active {
  color: var(--tinta);
  font-weight: 650;
}

.rail-link.is-active::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.1875rem;
  border-radius: 50%;
  background: var(--accion);
}

.rail-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lo que espera respuesta: punto rojo + cantidad. */
.rail-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  color: var(--tinta);
  font-size: var(--t-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.rail-badge::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--urgente);
}

/* "Yo": abajo, con su menú hacia arriba. */
.rail-me {
  display: block;
  margin-top: var(--s3);
}

.rail-me-button {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 3.25rem;
  padding: var(--s2) var(--s2) var(--s2) 0.6875rem;
  border-radius: var(--r-bloque);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--rapido);
}

.rail-me-button::-webkit-details-marker { display: none; }

.rail-me-button:hover,
.rail-me[open] > .rail-me-button {
  background: var(--velo);
}

.rail-me-button:focus-visible { outline-offset: -2px; border-radius: var(--r-bloque); }

.rail-me-button > .ic {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  color: var(--tinta-3);
}

.rail-me-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.rail-me-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-me-role {
  overflow: hidden;
  color: var(--tinta-2);
  font-size: var(--t-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La hoja */
.sheet {
  --sup: var(--papel);
  min-width: 0;
  min-height: calc(100vh - var(--borde-hoja) * 2);
  min-height: calc(100dvh - var(--borde-hoja) * 2);
  margin: var(--borde-hoja) var(--borde-hoja) var(--borde-hoja) 0;
  border-radius: var(--r-hoja);
  background: var(--papel);
  box-shadow: var(--sombra-hoja);
}

.page {
  --ancho: 62rem;
  width: 100%;
  max-width: calc(var(--ancho) + var(--margen) * 2);
  margin-inline: auto;
  padding: clamp(1.75rem, 4.4vw, 3.5rem) var(--margen) clamp(3rem, 7vw, 5.5rem);
}

.page-narrow { --ancho: 40rem; }
.page-wide { --ancho: 84rem; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  margin-bottom: var(--s10);
}

.page-heading { min-width: 0; }

.page-title {
  font-size: clamp(1.875rem, 1.35rem + 2vw, 2.75rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.page-sub {
  max-width: 64ch;
  margin-top: var(--s2);
  color: var(--tinta-2);
  font-size: var(--t-md);
}

.page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  margin: 0 0 var(--s3) -0.125rem;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
}

.page-back .ic { width: 1rem; height: 1rem; }
.page-back:hover { color: var(--tinta); }

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.page-body > * + * { margin-top: var(--s8); }

/* ── 3.2 Ingreso: mitad el orbe vivo, mitad la hoja del formulario ── */

body.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

body.auth.auth-wide { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }

.auth-stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  padding: var(--s8);
  overflow: hidden;
  isolation: isolate;
}

/* El escritorio del ingreso lleva la trama del orbe: puntos que se apagan hacia el borde.
   Se ve aunque el lienzo todavía no haya dibujado nada. */
.auth-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--filete-fuerte) 1.1px, transparent 1.6px);
  background-size: 1.375rem 1.375rem;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 64% 58% at 50% 50%, transparent 46%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 58% at 50% 50%, transparent 46%, #000 60%, transparent 100%);
  opacity: 0.85;
}

.orb {
  width: min(88%, 40rem, 82vh);
  height: auto;
  aspect-ratio: 1;
}

.auth-aside {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  max-width: 30rem;
  color: var(--tinta-2);
  font-size: var(--t-md);
  line-height: 1.45;
}

.auth-aside strong,
.auth-aside h2 {
  display: block;
  margin-bottom: var(--s1);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.auth-sheet {
  --sup: var(--papel);
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: calc(100vh - var(--borde-hoja) * 2);
  min-height: calc(100dvh - var(--borde-hoja) * 2);
  margin: var(--borde-hoja) var(--borde-hoja) var(--borde-hoja) 0;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: var(--r-hoja);
  background: var(--papel);
  box-shadow: var(--sombra-hoja);
}

.auth-box {
  width: 100%;
  max-width: 23.5rem;
}

.auth-wide .auth-box { max-width: 40rem; }

.auth-box > * + * { margin-top: var(--s6); }

.auth-brand {
  display: inline-block;
  margin-bottom: var(--s6);
  border-radius: var(--r-control);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.auth-brand .brand-logo {
  width: auto;
  height: 2.875rem;
}

.auth-title {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.034em;
}

.auth-sub {
  margin-top: var(--s3);
  color: var(--tinta-2);
  font-size: var(--t-md);
}

.auth-foot {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--filete);
  color: var(--tinta-2);
  font-size: var(--t-sm);
}

.auth-foot a { font-weight: 500; }

/* ── 3.3 Error: una hoja sola en medio del escritorio ── */

body.error-page {
  display: grid;
  place-items: center;
  padding: var(--s4);
}

.error-box {
  width: 100%;
  max-width: 35rem;
  padding: clamp(1.75rem, 6vw, 3.5rem);
  border-radius: var(--r-hoja);
  background: var(--papel);
  box-shadow: var(--sombra-hoja);
}

/* El código se dibuja con puntos, del rojo al azul, como el orbe. */
.error-code {
  width: fit-content;
  margin: 0 0 var(--s5) -0.04em;
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: clamp(5.5rem, 26vw, 9.5rem);
  font-weight: 750;
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) and ((-webkit-background-clip: text) or (background-clip: text)) {
  .error-code {
    padding-bottom: 0.06em;
    background-image: linear-gradient(98deg, var(--urgente) 6%, var(--nuevo) 58%, var(--ok) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-mask-image: radial-gradient(circle, #000 0.105rem, transparent 0.125rem);
    mask-image: radial-gradient(circle, #000 0.105rem, transparent 0.125rem);
    -webkit-mask-size: 0.34rem 0.34rem;
    mask-size: 0.34rem 0.34rem;
  }
}

.error-title {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.error-text {
  max-width: 46ch;
  margin-top: var(--s3);
  color: var(--tinta-2);
  font-size: var(--t-md);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s8);
}

.error-ref {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--filete);
  color: var(--tinta-2);
  font-size: var(--t-sm);
}

.error-ref strong {
  color: var(--tinta);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.error-debug {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-bloque);
  background: var(--bruma);
  color: var(--tinta-2);
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════════════════
   4. ESTRUCTURA
   ════════════════════════════════════════════════════════════════════════ */

/* Sección de la página. Las secciones se separan con espacio y un filete: nunca con cajas. */
.block,
.split {
  min-width: 0;
}

.page-body > .block + .block,
.page-body > .block + .split,
.page-body > .split + .split,
.page-body > .split + .block,
.block + .block,
.split + .split,
.block + .split,
.split + .block,
.split + .form > .split:first-of-type,
.block + .form > .split:first-of-type,
.form + .split,
.form + .block {
  margin-top: var(--s10);
  padding-top: var(--s10);
  border-top: 1px solid var(--filete);
}

.block-head {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s5);
}

.block-title {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.block-desc {
  max-width: 66ch;
  color: var(--tinta-2);
}

/* Dos columnas: a la izquierda qué es, a la derecha los controles. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--s5) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.split-info {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.split-info .block-desc,
.split-info > p {
  color: var(--tinta-2);
}

.split-main { min-width: 0; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.stack > * { min-width: 0; }
.stack-sm { gap: var(--s2); }
.stack-lg { gap: var(--s8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

.cluster-end { justify-content: flex-end; }
.cluster-between { justify-content: space-between; }

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--s6) var(--s8);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Lista de filas */
.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding: var(--s4) 0;
  border-top: 1px solid var(--filete);
}

.row:first-child { border-top: 0; padding-top: var(--s1); }
.row:last-child { padding-bottom: var(--s1); }

.row-main {
  flex: 1 1 12rem;
  min-width: 0;
}

.row-end {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2) var(--s4);
  margin-left: auto;
}

/* Tabla de datos */
.table-wrap {
  margin-inline: calc(var(--s3) * -1);
}

.table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  padding: 0.8125rem var(--s3);
  text-align: left;
  vertical-align: middle;
}

.table thead th {
  padding-top: 0;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--filete-fuerte);
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
}

.table tbody th { font-weight: 600; }

.table tbody tr + tr > * { border-top: 1px solid var(--filete); }

.table tbody tr { transition: background-color var(--rapido); }
.table tbody tr:hover { background: var(--bruma); }

.table tbody tr > :first-child { border-radius: var(--r-control) 0 0 var(--r-control); }
.table tbody tr > :last-child { border-radius: 0 var(--r-control) var(--r-control) 0; }

.table .num,
.table .right { text-align: right; }

/* Lista de definiciones */
.kv {
  display: grid;
  grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr);
}

.kv dt,
.kv dd {
  padding: 0.6875rem 0;
  border-top: 1px solid var(--filete);
}

.kv dt {
  padding-right: var(--s4);
  color: var(--tinta-2);
}

.kv dt:first-of-type,
.kv dt:first-of-type + dd {
  border-top: 0;
  padding-top: 0;
}

.kv dd { min-width: 0; }

/* Formularios */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.form > .field,
.form > .field-code,
.form > .form-row,
.form > .choices,
.form > .check {
  max-width: 34rem;
}

.form > .form-row { max-width: 44rem; }

.form-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s4);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
}

.inline-form {
  display: inline-flex;
  min-width: 0;
}

/* Filtros sobre una lista */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
}

.filters .field {
  flex: 0 1 13rem;
  min-width: 9rem;
}

.filters .field:first-child { flex: 1 1 15rem; max-width: 22rem; }
.filters + .table-wrap,
.filters + .empty { margin-top: var(--s5); }

/* ════════════════════════════════════════════════════════════════════════
   5. PIEZAS
   ════════════════════════════════════════════════════════════════════════ */

/* ── 5.1 Botones ── */

.btn {
  --btn-fondo: transparent;
  --btn-tinta: var(--tinta);
  --btn-borde: transparent;
  --btn-alto: var(--alto);
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--btn-alto);
  padding: 0 1.125rem;
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-control);
  background: var(--btn-fondo);
  color: var(--btn-tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido);
}

.btn::-webkit-details-marker { display: none; }

.btn .ic {
  width: 1.125rem;
  height: 1.125rem;
  margin-inline: -0.125rem;
}

.btn:focus-visible { border-radius: var(--r-control); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  --btn-fondo: var(--accion);
  --btn-tinta: var(--sobre-accion);
  --btn-borde: var(--accion);
}

.btn-primary:hover {
  --btn-fondo: var(--accion-fuerte);
  --btn-borde: var(--accion-fuerte);
}

.btn-secondary {
  --btn-fondo: var(--campo);
  --btn-borde: var(--borde);
}

.btn-secondary:hover {
  --btn-fondo: var(--bruma);
  --btn-borde: var(--tinta-2);
}

.btn-quiet {
  --btn-tinta: var(--tinta-2);
}

.btn-quiet:hover {
  --btn-fondo: var(--velo);
  --btn-tinta: var(--tinta);
}

/* Destructivo: el rojo aparece en el texto; se llena solo al confirmar (en el diálogo). */
.btn-danger {
  --btn-tinta: var(--urgente-tinta);
  --btn-borde: var(--urgente-tinta);
}

.btn-danger:hover {
  --btn-fondo: var(--urgente-fondo);
}

.dialog-actions .btn-danger {
  --btn-fondo: var(--urgente-solido);
  --btn-tinta: var(--sobre-urgente);
  --btn-borde: var(--urgente-solido);
}

.dialog-actions .btn-danger:hover {
  --btn-fondo: var(--urgente-solido-fuerte);
  --btn-borde: var(--urgente-solido-fuerte);
}

.btn-sm {
  --btn-alto: 2.125rem;
  padding: 0 0.75rem;
  gap: 0.375rem;
  font-size: var(--t-sm);
}

.btn-sm .ic { width: 1rem; height: 1rem; }

.btn-lg {
  --btn-alto: 3.25rem;
  padding: 0 1.5rem;
  font-size: var(--t-md);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-icon {
  --btn-alto: 2.25rem;
  width: var(--btn-alto);
  padding: 0;
}

.btn-icon .ic { margin: 0; width: 1.25rem; height: 1.25rem; }

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Mientras un formulario se envía, su botón queda en espera. */
.btn[aria-busy="true"],
.btn.is-busy {
  cursor: progress;
  pointer-events: none;
}

/* ── 5.2 Campos ── */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.field-label {
  display: block;
  color: var(--tinta);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.35;
}

.field-optional {
  margin-left: 0.25rem;
  color: var(--tinta-3);
  font-weight: 400;
}

.input {
  display: block;
  width: 100%;
  min-height: var(--alto);
  padding: 0.5625rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-control);
  background-color: var(--campo);
  color: var(--tinta);
  font-size: var(--t-base);
  line-height: 1.4;
  appearance: none;
  transition: border-color var(--rapido), box-shadow var(--rapido), background-color var(--rapido);
}

.input::placeholder {
  color: var(--tinta-3);
  opacity: 1;
}

.input:hover { border-color: var(--tinta-2); }

.input:focus,
.input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--foco);
  border-radius: var(--r-control);
  box-shadow: 0 0 0 3px var(--foco-halo);
}

.input:disabled,
.input[readonly] {
  border-color: var(--filete-fuerte);
  background-color: var(--bruma);
  color: var(--tinta-2);
}

.input:disabled { cursor: not-allowed; }

/* Que el autocompletado del navegador no pinte el campo de amarillo. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  caret-color: var(--tinta);
  box-shadow: 0 0 0 100vmax var(--campo) inset;
}

.input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100vmax var(--campo) inset, 0 0 0 3px var(--foco-halo);
}

.input-area {
  min-height: 6.5rem;
  line-height: 1.5;
  resize: vertical;
}

.input-select {
  padding-right: 2.5rem;
  background-image: var(--flecha);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.125rem 1.125rem;
  cursor: pointer;
  text-overflow: ellipsis;
}

.input-wrap {
  position: relative;
  display: block;
}

.input-wrap .input { padding-right: 3rem; }

.input-peek {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--tinta-2);
  transition: background-color var(--rapido), color var(--rapido);
}

.input-peek:hover {
  background: var(--velo);
  color: var(--tinta);
}

.input-peek[aria-pressed="true"] { color: var(--accion); }

.field-hint {
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: var(--urgente-tinta);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.45;
}

.field-error .ic {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1875rem;
}

.has-error .input,
.input[aria-invalid="true"] {
  border-color: var(--urgente-tinta);
}

.has-error .input:focus,
.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--urgente-halo);
}

/* Código de 6 dígitos: cifras grandes y separadas, una sola casilla (se puede pegar). */
.field-code { max-width: 19rem; }

.input-code {
  min-height: 3.75rem;
  padding-inline: 0.5rem 0.25rem;
  font-family: var(--f-titulo);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Casilla e interruptor */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  width: fit-content;
  max-width: 100%;
  min-height: 1.5rem;
  cursor: pointer;
}

.check > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.check-box {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  border: 1.5px solid var(--borde);
  border-radius: 0.375rem;
  background: var(--campo);
  transition: background-color var(--rapido), border-color var(--rapido);
}

.check-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid var(--sobre-accion);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform var(--rapido) var(--curva);
}

.check:hover .check-box { border-color: var(--tinta-2); }

.check > input:checked + .check-box {
  border-color: var(--accion);
  background: var(--accion);
}

.check > input:checked + .check-box::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.check > input:focus-visible + .check-box {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.check-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.check-label {
  font-weight: 500;
  line-height: 1.45;
}

.check-hint {
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.check > input:disabled ~ .check-box { opacity: 0.5; }
.check > input:disabled ~ .check-text { color: var(--tinta-3); }
.check:has(> input:disabled) { cursor: not-allowed; }

/* Interruptor: el texto a la izquierda y, a la derecha, un punto que cruza de lado. */
.check-switch {
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--s6);
  width: 100%;
}

.check-switch > input {
  left: auto;
  right: 0;
  width: 2.75rem;
  height: 1.625rem;
}

.check-switch .check-box {
  width: 2.75rem;
  height: 1.625rem;
  margin-top: 0;
  border-radius: 1rem;
  background: transparent;
}

.check-switch .check-box::after {
  left: 0.1875rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--apagado);
  transform: none;
  transition: transform var(--suave) var(--curva), background-color var(--rapido);
}

.check-switch > input:checked + .check-box::after {
  background: var(--sobre-accion);
  transform: translateX(1.125rem);
}

/* Opciones excluyentes con descripción: una lista con filetes; la elegida lleva el punto. */
.choices {
  display: flex;
  flex-direction: column;
}

.choices > .field-label {
  margin-bottom: var(--s2);
  padding: 0;
}

.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-inline: calc(var(--s3) * -1);
  padding: var(--s3);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: background-color var(--rapido);
}

.choice + .choice::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--s3);
  right: var(--s3);
  border-top: 1px solid var(--filete);
}

.choice:hover { background: var(--bruma); }
.choice:hover::before,
.choice:hover + .choice::before { border-color: transparent; }

.choice > input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.0625rem 0 0;
  border: 1.5px solid var(--borde);
  border-radius: 50%;
  background: var(--campo);
  appearance: none;
  cursor: inherit;
  transition: border-color var(--rapido), box-shadow var(--rapido), background-color var(--rapido);
}

.choice > input:checked {
  border-color: var(--accion);
  background: var(--accion);
  box-shadow: inset 0 0 0 0.25rem var(--campo);
}

.choice > input:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 50%;
}

.choice-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.choice-label {
  font-weight: 500;
  line-height: 1.45;
}

.choice > input:checked + .choice-body .choice-label { font-weight: 650; }

.choice-desc {
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.choices > .field-error { margin-top: var(--s2); }

/* ── 5.3 El punto: estado, medidores, etiquetas ── */

.tone-ok { --tono: var(--ok); --tono-tinta: var(--accion); --tono-fondo: var(--bruma); }
.tone-nuevo { --tono: var(--nuevo); --tono-tinta: var(--accion); --tono-fondo: var(--bruma); }
.tone-alerta { --tono: var(--alerta); --tono-tinta: var(--alerta-tinta); --tono-fondo: var(--alerta-fondo); }
.tone-urgente { --tono: var(--urgente); --tono-tinta: var(--urgente-tinta); --tono-fondo: var(--urgente-fondo); }
.tone-apagado { --tono: var(--apagado); --tono-tinta: var(--tinta-2); --tono-fondo: var(--bruma); }

.dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tono, var(--apagado));
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  line-height: 1.3;
  vertical-align: middle;
}

/* Cada tono se distingue también por la forma, no solo por el color. */
.status.tone-apagado { color: var(--tinta-2); }
.status.tone-apagado .dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--apagado);
}

.status.tone-urgente .dot { box-shadow: 0 0 0 3px var(--urgente-halo); }
.status.tone-nuevo .dot { box-shadow: 0 0 0 3px var(--nuevo-halo); }

.status.is-pulse .dot {
  position: relative;
}

.status.is-pulse .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--tono, var(--apagado));
  animation: pulso 1.8s var(--curva) infinite;
}

@keyframes pulso {
  0% { transform: scale(1); opacity: 0.55; }
  80%, 100% { transform: scale(3); opacity: 0; }
}

/* Medidor: 3 de 5. Sustituye a las barras de progreso. */
.dots {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
}

.dots .dot {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--punto-vacio);
  transition: background-color var(--suave), transform var(--suave) var(--curva);
}

.dots .dot.is-on { background: var(--tono, var(--ok)); }

/* Medidor de una contraseña nueva: el script pone data-level de 0 a 4. */
.meter {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 1.25rem;
}

.meter .dots { gap: 0.3125rem; }
.meter .dots .dot { width: 0.5rem; height: 0.5rem; }

.meter-text {
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.3;
}

.meter[data-level="0"],
.meter[data-level="1"] { --tono: var(--urgente); }
.meter[data-level="2"] { --tono: var(--alerta); }
.meter[data-level="3"],
.meter[data-level="4"] { --tono: var(--ok); }

.meter[data-level="0"] .dot:nth-child(-n + 1),
.meter[data-level="1"] .dot:nth-child(-n + 2),
.meter[data-level="2"] .dot:nth-child(-n + 3),
.meter[data-level="3"] .dot:nth-child(-n + 4),
.meter[data-level="4"] .dot:nth-child(-n + 5) {
  background: var(--tono);
}

.meter[data-level="0"] .meter-text,
.meter[data-level="1"] .meter-text { color: var(--urgente-tinta); }
.meter[data-level="2"] .meter-text { color: var(--alerta-tinta); }

/* Etiqueta discreta (rol, tipo): texto con un contorno fino, sin relleno de color. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: 0.4375rem;
  color: var(--tinta-2);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.tag[class*="tone-"]::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--tono);
}

/* ── 5.4 Personas ── */

.avatar {
  --lado: 2.25rem;
  --av-fondo: var(--mar);
  --av-tinta: #FFFFFF;
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--lado);
  height: var(--lado);
  border-radius: 50%;
  background: var(--av-fondo);
  color: var(--av-tinta);
  font-family: var(--f-titulo);
  font-size: calc(var(--lado) * 0.39);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  user-select: none;
  vertical-align: middle;
}

.avatar-sm { --lado: 1.75rem; }
.avatar-md { --lado: 2.25rem; }
.avatar-lg { --lado: 3rem; }
.avatar-xl { --lado: 4.5rem; }

/* Ocho colores de la gama del logo. Los cálidos son pálidos a propósito: el rojo vivo queda para lo urgente. */
.c1 { --av-fondo: #2B1055; --av-tinta: #FFFFFF; }
.c2 { --av-fondo: #5B2BB5; --av-tinta: #FFFFFF; }
.c3 { --av-fondo: #7445C7; --av-tinta: #FFFFFF; }
.c4 { --av-fondo: #C4B0F0; --av-tinta: #2B1055; }
.c5 { --av-fondo: #E9E1FA; --av-tinta: #5B2BB5; }
.c6 { --av-fondo: #F8DAD6; --av-tinta: #8C1C15; }
.c7 { --av-fondo: #1E5FA8; --av-tinta: #FFFFFF; }
.c8 { --av-fondo: #D6EBF8; --av-tinta: #0A4F96; }

.avatar-dot {
  position: absolute;
  right: -0.0625rem;
  bottom: -0.0625rem;
  width: max(0.625rem, 28%);
  height: max(0.625rem, 28%);
  border: 2px solid var(--sup, var(--papel));
  border-radius: 50%;
  background: var(--punto-vacio);
}

.avatar.is-online .avatar-dot { background: var(--nuevo); }

.avatar.is-off {
  filter: grayscale(1);
  opacity: 0.55;
}

.person {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.person-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-sub {
  overflow: hidden;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Elegir el color del avatar: el propio avatar es el botón; el elegido lleva un aro. */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.swatch {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  cursor: pointer;
}

.swatch > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.swatch > .avatar { transition: box-shadow var(--rapido), transform var(--rapido); }
.swatch:hover > .avatar { transform: scale(1.06); }
.swatch > input:checked + .avatar { box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--accion); }
.swatch > input:focus-visible + .avatar { box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--foco), 0 0 0 9px var(--foco-halo); }

fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > .field-label { padding: 0; margin-bottom: var(--s3); }

/* ── 5.5 Avisos y vacíos ── */

.note {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 0.875rem var(--s4);
  border-radius: var(--r-bloque);
  background: var(--tono-fondo, var(--bruma));
}

.note > .ic {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  color: var(--tono-tinta, var(--accion));
}

.note-body {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.note-title { font-weight: 650; }

.note-action {
  flex: none;
  align-self: center;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s12) var(--s4);
  text-align: center;
}

/* El icono va dentro de un aro de puntos. */
.empty-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--s5);
  border: 2px dotted var(--borde);
  border-radius: 50%;
  color: var(--tinta-2);
}

.empty-icon .ic {
  width: 1.625rem;
  height: 1.625rem;
  stroke-width: 1.5;
}

.empty-title {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.018em;
}

.empty-text {
  max-width: 44ch;
  margin-top: var(--s2);
  color: var(--tinta-2);
}

.empty-action { margin-top: var(--s5); }

/* Mensajes de una sola vez, bajo el título */
.flashes {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s6);
}

.auth-box > .flashes { margin-bottom: 0; }

.flash {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.25rem 0.25rem 0.875rem;
  border-radius: var(--r-bloque);
  background: var(--tono-fondo, var(--bruma));
  font-weight: 500;
  animation: entra var(--suave) var(--curva);
}

.flash > .ic {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--tono-tinta, var(--accion));
}

.flash > span {
  flex: 1;
  min-width: 0;
  padding-block: 0.375rem;
}

.flash-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--tinta-2);
}

.flash-close:hover {
  background: var(--velo-fuerte);
  color: var(--tinta);
}

.flash-close .ic { width: 1rem; height: 1rem; }

@keyframes entra {
  from { opacity: 0; transform: translateY(-0.375rem); }
}

/* ── 5.6 Navegación dentro de la página ── */

/* Pestañas: un filete y, sobre él, un punto bajo la sección abierta. */
.tabs {
  display: flex;
  gap: var(--s8);
  padding-bottom: 0.3125rem;
  background: linear-gradient(var(--filete), var(--filete)) left 0 bottom 0.25rem / 100% 1px no-repeat;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s2);
  padding: 0.5rem 0 0.875rem;
  color: var(--tinta-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--rapido);
}

.tab .ic { width: 1.125rem; height: 1.125rem; }
.tab:hover { color: var(--tinta); }
.tab:focus-visible { outline-offset: -2px; }

.tab.is-active {
  color: var(--tinta);
  font-weight: 650;
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: -0.21875rem;
  border-radius: 50%;
  background: var(--accion);
  box-shadow: 0 0 0 0.1875rem var(--sup, var(--papel));
}

/* Pasos de un proceso: puntos unidos por una línea */
.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) 0;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--tinta-3);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
}

.step + .step::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  margin-inline: 0.875rem 0.25rem;
  background: var(--filete-fuerte);
}

.step .dot {
  width: 0.625rem;
  height: 0.625rem;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--apagado);
}

.step.is-done { color: var(--tinta-2); }
.step.is-done .dot,
.step.is-current .dot {
  background: var(--ok);
  box-shadow: none;
}

.step.is-done + .step::before { background: var(--ok); }

.step.is-current {
  color: var(--tinta);
  font-weight: 650;
}

.step.is-current .dot { box-shadow: 0 0 0 0.25rem var(--foco-halo); }

/* Paginación */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--filete);
}

.pager-now {
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

/* ── 5.7 Lo que flota: menús, diálogos, tostadas ── */

.menu {
  position: relative;
  display: inline-block;
}

.menu > summary {
  list-style: none;
  cursor: pointer;
}

.menu > summary::-webkit-details-marker { display: none; }

.menu[open] > .btn-quiet {
  --btn-fondo: var(--velo-fuerte);
  --btn-tinta: var(--tinta);
}

.menu-list {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 14rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.375rem;
  border-radius: var(--r-bloque);
  background: var(--flotante);
  box-shadow: var(--sombra-flotante);
  font-size: var(--t-base);
  font-weight: 400;
  text-align: left;
  white-space: normal;
  transform-origin: top right;
  animation: abre var(--rapido) var(--curva);
}

.menu-up {
  top: auto;
  bottom: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  min-width: 0;
  transform-origin: bottom center;
}

@keyframes abre {
  from { opacity: 0; transform: scale(0.97); }
}

.menu-list .inline-form {
  display: flex;
  flex-direction: column;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.375rem;
  padding: 0.375rem 0.625rem;
  border: 0;
  border-radius: 0.5625rem;
  background: none;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-item .ic {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--tinta-2);
}

.menu-item:hover { background: var(--velo); }
.menu-item:focus-visible { outline-offset: -2px; border-radius: 0.5625rem; }

.menu-item.is-danger,
.menu-item.is-danger .ic { color: var(--urgente-tinta); }

.menu-item.is-danger:hover { background: var(--urgente-fondo); }

/* Diálogo de confirmación (lo crea el script; se abre con showModal) */
dialog.dialog {
  width: 100%;
  max-width: min(27rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: var(--flotante);
  color: var(--tinta);
  box-shadow: var(--sombra-flotante);
  overflow: auto;
}

dialog.dialog[open] { animation: sube var(--suave) var(--curva); }

dialog.dialog::backdrop {
  background: var(--telon);
  animation: aparece var(--suave) ease-out;
}

@keyframes sube {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.985); }
}

@keyframes aparece {
  from { opacity: 0; }
}

.dialog-box {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: 0;
  padding: var(--s6);
}

.dialog-title {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.dialog-text { color: var(--tinta-2); }

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s2);
  margin-top: var(--s5);
}

/* Tostada: confirma algo sin interrumpir ("Copiado") */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra) + var(--s6) + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.6875rem 1.125rem 0.6875rem 1rem;
  border-radius: var(--r-bloque);
  background: var(--tostada);
  color: var(--sobre-tostada);
  box-shadow: var(--sombra-flotante);
  font-weight: 500;
  line-height: 1.35;
  transform: translateX(-50%);
  animation: tostada var(--suave) var(--curva);
}

.toast::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cielo);
}

.toast.tone-urgente::before,
.toast.is-error::before,
.toast[data-tone="urgente"]::before,
.toast[data-tone="error"]::before { background: var(--rojo); }

.toast.tone-alerta::before,
.toast[data-tone="alerta"]::before,
.toast[data-tone="aviso"]::before { background: #E0A030; }

.toast .ic { display: none; }

.toast[hidden],
.toast.is-leaving {
  opacity: 0;
  transition: opacity var(--suave);
}

@keyframes tostada {
  from { opacity: 0; transform: translate(-50%, 0.5rem); }
}

/* ── 5.8 Datos sueltos ── */

/* El código QR siempre va oscuro sobre blanco, también en el tema oscuro: así lo lee cualquier cámara. */
.qr {
  display: grid;
  place-items: center;
  width: 13rem;
  max-width: 100%;
  aspect-ratio: 1;
  padding: var(--s3);
  border: 1px solid var(--filete);
  border-radius: var(--r-bloque);
  background-color: #FFFFFF;
  color: #2B1055;
}

.qr:empty {
  background-image: radial-gradient(circle, #CEC3E3 0.125rem, transparent 0.15625rem);
  background-size: 0.75rem 0.75rem;
  background-position: center;
  background-origin: content-box;
  background-clip: content-box;
}

.qr-svg,
.qr > svg,
.qr > img,
.qr > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Códigos que se muestran una sola vez */
.secret-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s6);
  max-width: 24rem;
  padding: var(--s5) var(--s6);
  border-radius: var(--r-bloque);
  background: var(--bruma);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.09em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.secret-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}

.secret-list li::before {
  content: "";
  flex: none;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--punto-vacio);
}

/* ── 5.9 Leads: embudo, ficha e historia ── */

/* Enlace que ocupa toda una fila o celda sin parecer enlace */
.row-link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.row-link:hover .strong,
.row-link:hover .person-name { text-decoration: underline; text-underline-offset: 0.2em; }

/* El embudo: una columna por etapa, separadas por un filete (sin cajas). Se desplaza de lado. */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15.5rem, 1fr);
  margin-inline: calc(var(--margen) * -1);
  padding: 0 var(--margen) var(--s4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margen);
}

.board-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: var(--s4);
  border-left: 1px solid var(--filete);
  scroll-snap-align: start;
}

.board-col:first-child { padding-left: 0; border-left: 0; }
.board-col:last-child { padding-right: 0; }

.board-head { padding-bottom: var(--s3); }

.board-name {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.board-count {
  color: var(--tinta-3);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.board-sum {
  color: var(--tinta-2);
  font-size: var(--t-xs);
}

.board-col[data-kind="ganada"] .board-name,
.board-col[data-kind="perdida"] .board-name { color: var(--tinta-2); }

.board-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-height: 7rem;
  margin-inline: calc(var(--s2) * -1);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-bloque);
  transition: background-color var(--rapido), box-shadow var(--rapido);
}

.board-col.is-over .board-list {
  background: var(--velo);
  box-shadow: inset 0 0 0 1.5px var(--foco);
}

.board-more {
  padding: var(--s2);
  font-size: var(--t-sm);
}

.lead-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  align-items: center;
  margin-inline: calc(var(--s2) * -1);
  padding: var(--s3) var(--s2);
  border-radius: var(--r-control);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--rapido);
}

.lead-card:hover { background: var(--bruma); }
.lead-card[draggable="true"] { cursor: grab; }
.lead-card.is-dragging { opacity: 0.4; }

.lead-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lead-card-name {
  overflow: hidden;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-sub {
  overflow: hidden;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-meta {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  align-items: center;
  gap: 0.125rem var(--s3);
  color: var(--tinta-3);
  font-size: var(--t-xs);
}

.lead-card-meta .status { font-size: var(--t-xs); }

/* Ficha: a la izquierda lo que se hace, a la derecha lo que se sabe */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: var(--s10) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.ficha-main { min-width: 0; }

.ficha-side {
  position: sticky;
  top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  min-width: 0;
}

.ficha-side section {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.kv-tight { grid-template-columns: minmax(4.5rem, 6.5rem) minmax(0, 1fr); font-size: var(--t-sm); }
.kv-tight dt, .kv-tight dd { padding-block: 0.5rem; }
.kv-tight dd { overflow-wrap: anywhere; }

/* Etapas en la ficha: los mismos puntos de los pasos, pero cada uno es un botón */
.stage-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s2);
  margin-bottom: var(--s5);
}

.stage {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem 0.25rem 0.75rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: 999px;
  background: none;
  color: var(--tinta-2);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
}

button.stage { cursor: pointer; transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido); }
button.stage:hover { border-color: var(--accion); color: var(--tinta); background: var(--velo); }

.stage .dot {
  width: 0.5rem;
  height: 0.5rem;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--apagado);
}

.stage.is-done .dot { background: var(--ok); box-shadow: none; }

.stage.is-current {
  border-color: var(--accion);
  background: var(--accion);
  color: var(--sobre-accion);
  font-weight: 650;
}

.stage.is-current .dot { background: var(--sobre-accion); box-shadow: none; }

/* Desplegable con un formulario corto (cerrar un lead, ver un QR) */
.closers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s3);
}

/* El que se abre ocupa su propio renglón: el formulario nunca empuja al botón vecino. */
.closers > .closer[open] { flex: 1 1 100%; }
.closers .closer-form { max-width: 30rem; }

.closer > summary { list-style: none; }
.closer > summary::-webkit-details-marker { display: none; }
.closer[open] > summary { --btn-fondo: var(--velo-fuerte); }

.closer-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-top: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-bloque);
  background: var(--bruma);
}

/* Historia: una línea de puntos, como el orbe */
.timeline {
  display: flex;
  flex-direction: column;
  margin-top: var(--s6);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0 var(--s3);
  padding-bottom: var(--s5);
}

.tl-item::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 0.125rem;
  left: 0.46875rem;
  width: 1px;
  background: var(--filete);
}

.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }

.tl-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.4375rem auto 0;
  border-radius: 50%;
  background: var(--punto-vacio);
}

.tl-item.is-nota .tl-dot,
.tl-item.is-llamada .tl-dot,
.tl-item.is-reunion .tl-dot { background: var(--ok); }
.tl-item.is-etapa .tl-dot { background: var(--nuevo); box-shadow: 0 0 0 3px var(--nuevo-halo); }
.tl-item.is-creacion .tl-dot { background: var(--alerta); }
.tl-item.is-ia .tl-dot { background: var(--accion); box-shadow: 0 0 0 3px var(--nuevo-halo); }

.tl-body { overflow-wrap: anywhere; }

.tl-meta {
  color: var(--tinta-3);
  font-size: var(--t-xs);
}

.quote {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--accion);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--bruma);
  overflow-wrap: anywhere;
}

/* Cifras en fila */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--s6) var(--s8);
}

.funnel-n {
  min-width: 2.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Tabla con campos dentro (etapas del embudo) */
.table-form td { padding-block: 0.375rem; }
.table-form .input { min-width: 8rem; }
.table-form .input-sm { width: 4.75rem; min-width: 0; }
.table-form .check { justify-content: center; }
.table-form .col-name { width: 24%; }
.table-form .col-wide { width: 48%; }
.table-form td .input:not(.input-sm) { width: 100%; }

/* Ayudas que solo sirven con ratón (arrastrar): en pantallas táctiles no se muestran */
@media (hover: none) {
  .only-mouse { display: none; }
}

/* Formulario que sigue a una lista dentro del mismo bloque */
.form-after { margin-top: var(--s5); }

/* Campo trampa de los formularios públicos: fuera de la vista y del teclado */
.trap {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

input[type="file"].input { padding-block: 0.5rem; height: auto; }

@media (max-width: 68rem) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha-side { position: static; }
}

@media (max-width: 47.9375rem) {
  .board { grid-auto-columns: min(82vw, 20rem); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closer-form { padding: var(--s4); }
}

/* ── 5.10 Conversaciones: lista · chat · ficha (Parte 3) ──
 * La bandeja ocupa la hoja entera. Tres paneles separados por un filete, sin cajas ni sombras:
 * la lista sobre el papel, el chat sobre un fondo tenue y la ficha otra vez sobre el papel.
 * Las burbujas son la única excepción a "nada de cajas": sin sombra y con el radio de los bloques. */

.sheet-chat {
  position: relative;
  overflow: hidden;
}

.page-chat {
  max-width: none;
  padding: 0;
}

.page-chat .page-body > * + * { margin-top: 0; }

/* En la bandeja los avisos flotan arriba a la derecha: no empujan los paneles. */
.page-chat > .flashes {
  position: fixed;
  top: var(--s5);
  right: var(--s5);
  z-index: 90;
  width: min(26rem, calc(100vw - 2rem));
  margin: 0;
}

.page-chat > .flashes .flash { box-shadow: var(--sombra-flotante); }

.inbox {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  height: calc(100vh - var(--borde-hoja) * 2);
  height: calc(100dvh - var(--borde-hoja) * 2);
  min-height: 28rem;
}

.inbox.has-thread { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr) minmax(16rem, 19rem); }

/* ── Lista ── */

.inbox-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--filete);
}

.inbox-list-head {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6) var(--s5) var(--s3);
}

.inbox-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.inbox-title {
  font-size: var(--t-xl);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.inbox-tools {
  display: flex;
  gap: var(--s1);
  margin-right: calc(var(--s2) * -1);
}

.inbox-available .check { min-height: 0; }
.inbox-available .check-label { font-size: var(--t-sm); font-weight: 600; }
.inbox-available .check-hint { font-size: var(--t-xs); }

/* Vistas: el mismo lenguaje de las pestañas, más compacto. */
.chat-views {
  display: flex;
  gap: var(--s3) var(--s4);
  padding-bottom: 0.3125rem;
  background: linear-gradient(var(--filete), var(--filete)) left 0 bottom 0.25rem / 100% 1px no-repeat;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-views::-webkit-scrollbar { display: none; }

.chat-view {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0 0.75rem;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.chat-view:hover { color: var(--tinta); }
.chat-view:focus-visible { outline-offset: -2px; }

.chat-view.is-active {
  color: var(--tinta);
  font-weight: 650;
}

.chat-view.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: -0.21875rem;
  border-radius: 50%;
  background: var(--accion);
  box-shadow: 0 0 0 0.1875rem var(--papel);
}

.chat-view-n {
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.chat-view.is-urgent .chat-view-n {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--urgente-tinta);
  font-weight: 650;
}

.chat-view.is-urgent .chat-view-n::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--urgente);
}

.inbox-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.inbox-search-field {
  position: relative;
  flex: 1 1 100%;
}

.inbox-search-field > .ic {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  color: var(--tinta-3);
  pointer-events: none;
}

.inbox-search .input {
  min-height: 2.5rem;
  height: 2.5rem;
  font-size: var(--t-sm);
}

.inbox-search-field .input { padding-left: 2.25rem; }
.inbox-search .input-select { flex: 1 1 8rem; width: auto; }

[data-alerts]:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s3);
}

[data-alerts] .note { font-size: var(--t-sm); }

.inbox-list-body {
  flex: 1;
  min-height: 0;
  padding: 0 var(--s2) var(--s4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inbox-list-body .empty { padding: var(--s10) var(--s4); }

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  padding: 0.75rem 0.75rem 0.75rem 0.875rem;
  border-radius: var(--r-bloque);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--rapido);
}

.chat-row:hover { background: var(--velo); }
.chat-row:focus-visible { outline-offset: -2px; }

/* El chat abierto: fondo tenue y el punto a la izquierda, como en el riel. */
.chat-row.is-current { background: var(--bruma); }

.chat-row.is-current::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-top: -0.15625rem;
  border-radius: 50%;
  background: var(--accion);
}

.chat-row.is-closed { opacity: 0.78; }

.chat-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-row-top {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.chat-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-row-time {
  flex: none;
  color: var(--tinta-3);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.chat-row-preview {
  overflow: hidden;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-row-you { color: var(--tinta-3); }

.chat-row.is-unread .chat-row-name { font-weight: 700; }
.chat-row.is-unread .chat-row-preview { color: var(--tinta); }
.chat-row.is-unread .chat-row-time { color: var(--accion); font-weight: 650; }

.chat-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--s3);
  margin-top: 0.3125rem;
  color: var(--tinta-3);
  font-size: var(--t-xs);
}

.chat-row-meta .status { font-size: var(--t-xs); }
.chat-row-ref { font-variant-numeric: tabular-nums; }

/* No leídos: punto + cifra, como el número del riel. */
.chat-row-unread {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: auto;
  color: var(--accion);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chat-row-unread::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--nuevo);
  box-shadow: 0 0 0 3px var(--nuevo-halo);
}

.chat-row-owner { display: inline-flex; }

.chat-list-more {
  padding: var(--s4) var(--s3) 0;
  text-align: center;
}

.avatar-xs {
  --lado: 1.25rem;
  font-size: 0.5625rem;
}

/* ── Chat ── */

.inbox-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--fondo-chat);
}

.inbox-thread-empty {
  display: grid;
  place-items: center;
  padding: var(--s8);
}

.thread-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 4.5rem;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--filete);
  background: var(--papel);
}

.thread-back {
  display: none;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: calc(var(--s2) * -1);
  border-radius: 50%;
  color: var(--tinta);
}

.thread-back:hover { background: var(--velo); }
.thread-back .ic { width: 1.25rem; height: 1.25rem; }

.thread-who {
  display: flex;
  flex: 1 1 12rem;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.thread-who-text { min-width: 0; }

.thread-name {
  overflow: hidden;
  font-size: var(--t-md);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.375rem;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.thread-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
}

.thread-owner {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--tinta-2);
  font-size: var(--t-sm);
  white-space: nowrap;
}

.thread-side-toggle { display: none; }

.menu-form {
  min-width: 17rem;
  padding: var(--s4);
}

.menu-form .form { gap: var(--s3); }
.menu-form .form-actions { margin-top: 0; }

.thread-body {
  flex: 1;
  min-height: 0;
  padding: var(--s5) clamp(1rem, 3vw, 2.5rem) var(--s3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.thread-more {
  margin-bottom: var(--s3);
  text-align: center;
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.thread-hello {
  margin-top: var(--s10);
  text-align: center;
}

/* Separador de días: el texto entre dos puntos. */
.msg-day {
  display: flex;
  align-items: center;
  align-self: center;
  gap: var(--s2);
  margin: var(--s4) 0 var(--s2);
  color: var(--tinta-2);
  font-size: var(--t-xs);
  font-weight: 600;
}

.msg-day::before,
.msg-day::after {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--punto-vacio);
}

.msg {
  display: flex;
  flex-direction: column;
  max-width: min(36rem, 80%);
}

.msg-in { align-self: flex-start; }

.msg-out,
.msg-nota {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-in + .msg-out,
.msg-in + .msg-nota,
.msg-out + .msg-in,
.msg-nota + .msg-in { margin-top: var(--s2); }

.msg-bubble {
  min-width: 5rem;
  padding: 0.5rem 0.75rem 0.375rem;
  border: 1px solid var(--filete);
  border-radius: 1rem;
  background: var(--burbuja);
  overflow-wrap: anywhere;
}

.msg-in .msg-bubble { border-bottom-left-radius: 0.375rem; }

.msg-out .msg-bubble {
  border-color: transparent;
  border-bottom-right-radius: 0.375rem;
  background: var(--burbuja-propia);
}

.msg-nota .msg-bubble {
  border: 1px dashed var(--alerta);
  border-bottom-right-radius: 0.375rem;
  background: var(--alerta-fondo);
}

.msg.is-failed .msg-bubble { border: 1px solid var(--urgente); }

.msg-text {
  line-height: 1.45;
  white-space: normal;
}

.msg-text a { word-break: break-all; }

.msg-label,
.msg-ad,
.msg-missing {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
  font-size: var(--t-xs);
  line-height: 1.35;
}

.msg-label {
  color: var(--alerta-tinta);
  font-weight: 650;
}

.msg-ad,
.msg-missing { color: var(--tinta-2); }

.msg-label .ic,
.msg-ad .ic,
.msg-missing .ic {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.0625rem;
}

.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.125rem;
  color: var(--tinta-3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.msg-who {
  color: var(--tinta-2);
  font-weight: 600;
}

/* Estado del envío en puntos: uno enviado, dos entregado, tres leído (en el color de acción). */
.msg-ticks .dots { gap: 0.1875rem; }
.msg-ticks .dots .dot { width: 0.3125rem; height: 0.3125rem; background: var(--borde); opacity: 0.35; }
.msg-ticks .dots .dot.is-on { opacity: 1; background: var(--tinta-2); }
.msg-ticks .dots.tone-ok .dot.is-on { background: var(--accion); }

.msg-media {
  display: block;
  margin: -0.125rem -0.375rem 0.375rem;
}

.msg-img {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  border-radius: 0.75rem;
}

.msg-sticker .msg-bubble {
  border-color: transparent;
  background: transparent;
}

.msg-sticker .msg-img { max-height: 9rem; }

.msg-audio {
  display: block;
  width: min(18rem, 64vw);
  height: 2.5rem;
  margin-bottom: 0.25rem;
}

.msg-video {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  margin-bottom: 0.25rem;
  border-radius: 0.75rem;
}

.msg-file {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.75rem;
  background: var(--velo);
  color: inherit;
  text-decoration: none;
}

.msg-file:hover { background: var(--velo-fuerte); }
.msg-file > .ic { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accion); }
.msg-file-text { display: flex; flex-direction: column; min-width: 0; }
.msg-file-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.msg-file-size { color: var(--tinta-2); font-size: var(--t-xs); }

/* Avisos del sistema: una línea centrada con su punto. */
.msg-sis {
  align-self: center;
  max-width: 90%;
  margin-block: 0.25rem;
  color: var(--tinta-2);
  font-size: var(--t-xs);
  text-align: center;
}

.msg-sis p::before {
  content: "";
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--punto-vacio);
  vertical-align: middle;
}

.msg-sis time {
  margin-left: 0.25rem;
  color: var(--tinta-3);
  white-space: nowrap;
}

.msg-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s1) var(--s2);
  margin-top: 0.25rem;
  font-size: var(--t-xs);
}

.msg.is-new { animation: entra var(--suave) var(--curva); }

.thread-typing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s2);
  color: var(--tinta-2);
  font-size: var(--t-sm);
}

.thread-typing[hidden] { display: none; }
.thread-typing .dot { background: var(--nuevo); animation: respira 1.2s ease-in-out infinite; }

@keyframes respira {
  50% { opacity: 0.35; }
}

.thread-notes {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2) var(--s5) 0;
}

.thread-notes .note { font-size: var(--t-sm); }

/* ── Dónde se escribe ── */

.form.composer {
  gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s4);
  border-top: 1px solid var(--filete);
  background: var(--papel);
}

[data-notice]:not(:empty) + .composer { border-top: 0; }

.composer-mode {
  display: flex;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  border: 0;
}

.composer-mode-option { position: relative; }

.composer-mode-option > input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.composer-mode-option > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
}

.composer-mode-option > span .ic { width: 0.875rem; height: 0.875rem; }
.composer-mode-option > input:hover + span { color: var(--tinta); }
.composer-mode-option > input:checked + span { background: var(--velo-fuerte); color: var(--tinta); font-weight: 650; }
.composer-mode-option > input[value="nota"]:checked + span { background: var(--alerta-fondo); color: var(--alerta-tinta); }
.composer-mode-option > input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }

.composer-box {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: var(--r-bloque);
  background: var(--campo);
  transition: border-color var(--rapido), box-shadow var(--rapido), background-color var(--rapido);
}

.composer-box:focus-within {
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--foco-halo);
}

.composer.is-note .composer-box {
  border-style: dashed;
  border-color: var(--alerta);
  background: var(--alerta-fondo);
}

.composer-input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  max-height: 12rem;
  padding: 0.75rem 0.875rem 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.45;
  resize: none;
  outline: none;
}

.composer-input::placeholder { color: var(--tinta-3); }

.composer-file {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0.25rem 0.5rem 0;
  padding: 0.125rem 0.125rem 0.125rem 0.625rem;
  border-radius: 0.625rem;
  background: var(--velo);
  font-size: var(--t-sm);
}

.composer-file[hidden] { display: none; }
.composer-file > .ic { flex: none; width: 1rem; height: 1rem; color: var(--tinta-2); }
.composer-file > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.composer-bar {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: 0.25rem 0.375rem 0.375rem;
}

.composer-bar > .btn-primary { margin-left: auto; }
.composer-hint { margin-left: var(--s2); }

.composer-attach { position: relative; }
.composer-attach:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }

.replies-list {
  right: auto;
  width: min(26rem, calc(100vw - 2rem));
  max-height: 20rem;
  overflow-y: auto;
}

.reply-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.reply-item.is-active { background: var(--velo); }
.reply-title { font-weight: 600; }
.reply-shortcut { color: var(--tinta-3); font-weight: 500; }

.reply-text {
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 400;
}

.reply-manage { margin-top: 0.25rem; border-top: 1px solid var(--filete); border-radius: 0 0 0.5625rem 0.5625rem; color: var(--tinta-2); }

/* Las respuestas que aparecen al escribir "/": flotan sobre el campo. */
.replies-pop {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: min(26rem, 100%);
  max-height: 16rem;
  padding: 0.375rem;
  overflow-y: auto;
  border-radius: var(--r-bloque);
  background: var(--flotante);
  box-shadow: var(--sombra-flotante);
  animation: abre var(--rapido) var(--curva);
}

.replies-pop[hidden] { display: none; }

/* ── Ficha de la persona ── */

.inbox-side {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-width: 0;
  min-height: 0;
  padding: var(--s6) var(--s5);
  overflow-y: auto;
  border-left: 1px solid var(--filete);
  background: var(--papel);
}

.side-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.side-head-text { min-width: 0; }
.side-head-text .strong { overflow-wrap: anywhere; }
.side-close { display: none; margin-left: auto; }

.side-section {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--filete);
}

.side-section .kv-tight { grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr); }
.side-form .field-label { font-size: var(--t-xs); color: var(--tinta-2); }
.side-tasks .row { padding-block: var(--s2); }
.side-closer .closer-form { padding: var(--s4); }

/* ── Vincular un número ── */

.link-device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s6) var(--s8);
  align-items: center;
}

.link-qr .qr { width: 15rem; }

.link-wait {
  display: grid;
  place-items: center;
  width: 15rem;
  aspect-ratio: 1;
  border: 2px dotted var(--borde);
  border-radius: var(--r-bloque);
}

.link-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-left: 1.25rem;
  list-style: decimal;
}

.link-steps li::marker {
  color: var(--accion);
  font-weight: 700;
}

/* Barra inferior del teléfono: un punto rojo si hay chats esperando. */
.tabbar-badge {
  position: absolute;
  top: 0.375rem;
  left: calc(50% + 0.5rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--urgente);
  box-shadow: 0 0 0 2px var(--mesa);
}

/* Pantallas medianas: la ficha sale de lado, como una hoja encima, al tocar su botón. */
@media (max-width: 80em) {
  .inbox.has-thread { grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr); }

  .inbox-side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(22rem, 92%);
    border-left: 0;
    box-shadow: var(--sombra-flotante);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform var(--suave) var(--curva), visibility 0s linear var(--suave);
  }

  .inbox.is-side-open .inbox-side {
    transform: none;
    visibility: visible;
    transition: transform var(--suave) var(--curva);
  }

  .thread-side-toggle,
  .side-close { display: inline-flex; }

  .inbox-list-head { padding-inline: var(--s4); }
  .chat-views { gap: var(--s3); }
  .chat-view { font-size: var(--t-xs); }
}

/* Pantallas estrechas: una cosa a la vez, la lista o el chat. */
@media (max-width: 52em) {
  .inbox,
  .inbox.has-thread { grid-template-columns: minmax(0, 1fr); }

  .inbox.has-thread .inbox-list,
  .inbox:not(.has-thread) .inbox-thread { display: none; }

  .inbox-list { border-right: 0; }
  .chat-view { font-size: var(--t-sm); }
  .thread-back { display: inline-grid; }
  .thread-actions { flex-wrap: nowrap; gap: var(--s1); }
  /* En el teléfono los botones de la cabecera quedan en icono; el texto sigue ahí para los lectores de pantalla. */
  .thread-owner .status > span,
  .thread-actions > .inline-form .btn > span,
  .thread-actions > .menu > .btn-sm > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .thread-actions > .inline-form .btn,
  .thread-actions > .menu > .btn-sm { width: 2.5rem; padding: 0; }
  .composer-hint { display: none; }
  .thread-head { gap: var(--s2); padding: var(--s2) var(--s3); min-height: 3.75rem; }
  .thread-actions .thread-owner > span:not(.status) { display: none; }
  /* Un punto suelto no dice nada: en el teléfono «Lo atiendes tú» se lee en la ficha (Atiende). */
  .thread-owner.is-mine,
  .thread-owner.is-ai { display: none; }
  .thread-body { padding-inline: var(--s3); }
  .thread-notes { padding-inline: var(--s3); }
  .form.composer { padding: var(--s2) var(--s3) var(--s3); }
  .msg { max-width: 88%; }
  .link-device { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 45em) {
  .inbox {
    height: calc(100vh - var(--borde-hoja) - var(--barra));
    height: calc(100dvh - var(--borde-hoja) - var(--barra) - env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }

  .inbox-list-head { padding: var(--s5) var(--s4) var(--s3); }
  .page-chat > .flashes { top: var(--s3); right: var(--s3); }
  .composer-input { font-size: 1rem; }
}

/* ── Agente IA (Parte 4) ── */

/* Respuesta de la IA: la misma burbuja nuestra, firmada con el destello. */
.msg-who .ic {
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.25rem;
  vertical-align: -0.0625rem;
}

.msg-ia .msg-who { color: var(--accion); }

.thread-owner.is-ai { color: var(--accion); font-weight: 600; }
.thread-owner.is-ai .ic { width: 1rem; height: 1rem; }

/* Traspaso: el resumen que deja la IA para el asesor, centrado como los avisos del sistema. */
.msg-handoff {
  align-self: stretch;
  max-width: none;
  margin-block: var(--s2);
  text-align: left;
}

.msg-handoff p::before { display: none; }

.msg-handoff-body {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--accion);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--bruma);
  color: var(--tinta);
  font-size: var(--t-sm);
}

.msg-handoff .msg-label { color: var(--accion); }
.msg-handoff time { margin-left: auto; font-weight: 400; }

/* Agente IA → Probar: un chat dentro de la hoja. */
.chat-sandbox {
  max-height: 32rem;
  min-height: 12rem;
  padding: var(--s4);
  border-radius: var(--r-bloque);
  background: var(--fondo-chat);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-sandbox .thread-hello { margin-top: var(--s6); }
.msg-actions { max-width: 100%; }

.prompt-preview {
  max-height: 28rem;
  margin-top: var(--s3);
  overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   6. PANTALLAS
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tableta: el riel se reduce a iconos; el nombre aparece al pasar o enfocar ── */
@media (max-width: 68.75em) {
  :root { --riel: 4.5rem; }

  .rail {
    align-items: center;
    padding: var(--s4) var(--s2) var(--s3);
  }

  .rail-brand {
    justify-content: center;
    width: 2.75rem;
    margin-bottom: var(--s4);
    padding: 0;
  }

  .rail-brand .brand-logo { display: none !important; }
  .rail-brand .brand-mark { display: block; }

  .rail-nav { align-items: center; }

  .rail-link {
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }

  .rail-link .ic { width: 1.375rem; height: 1.375rem; }

  .rail-link.is-active::before {
    left: -0.3125rem;
  }

  .rail-text {
    position: absolute;
    left: calc(100% + 0.625rem);
    top: 50%;
    z-index: 60;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--tostada);
    color: var(--sobre-tostada);
    font-size: var(--t-sm);
    font-weight: 500;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transform: translate(-0.25rem, -50%);
    transition: opacity var(--rapido), transform var(--rapido);
  }

  .rail-link:hover .rail-text,
  .rail-link:focus-visible .rail-text {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .rail-badge {
    position: absolute;
    top: 0.4375rem;
    right: 0.4375rem;
    margin: 0;
    font-size: 0;
    gap: 0;
  }

  .rail-badge::before {
    width: 0.5rem;
    height: 0.5rem;
    box-shadow: 0 0 0 2px var(--mesa);
  }

  .rail-me-button {
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-radius: 50%;
  }

  .rail-me-text,
  .rail-me-button > .ic { display: none; }

  .rail-me .menu-up {
    left: 0;
    right: auto;
    min-width: 14rem;
    transform-origin: bottom left;
  }
}

/* Dos columnas pasan a una cuando la hoja se estrecha */
@media (max-width: 60em) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ingreso en pantallas estrechas: el orbe arriba, pequeño; la hoja debajo, encima del escritorio */
@media (max-width: 56.25em) {
  body.auth,
  body.auth.auth-wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .auth-stage {
    position: relative;
    height: clamp(11rem, 30vh, 16rem);
    padding: var(--s4) var(--s4) var(--s8);
  }

  .auth-stage::before {
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 45%, transparent 40%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 90% at 50% 45%, transparent 40%, #000 62%, transparent 100%);
  }

  .orb {
    width: auto;
    height: 100%;
    max-width: 100%;
  }

  .auth-aside { display: none; }

  .auth-sheet {
    align-items: start;
    min-height: 0;
    margin: calc(var(--s5) * -1) 0 0;
    padding: var(--s8) var(--margen) calc(var(--s10) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-hoja) var(--r-hoja) 0 0;
  }

  .auth-wide .auth-stage { height: clamp(7rem, 16vh, 9rem); }
}

/* ── Móvil: el riel desaparece; abajo, la barra de secciones. La hoja ocupa todo el ancho ── */
@media (max-width: 45em) {
  :root {
    --barra: 3.75rem;
    --borde-hoja: 0.5rem;
  }

  body.app {
    display: block;
    padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
  }

  .rail { display: none; }

  .sheet {
    min-height: calc(100dvh - var(--borde-hoja) - var(--barra) - env(safe-area-inset-bottom, 0px));
    margin: var(--borde-hoja) 0 0;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.125rem;
    padding: 0.375rem max(0.5rem, env(safe-area-inset-left, 0px)) calc(0.375rem + env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-right, 0px));
    border-top: 1px solid var(--filete);
    background: var(--mesa);
  }

  .tabbar-link {
    --sup: var(--mesa);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    min-width: 0;
    min-height: 3rem;
    padding: 0.25rem 0.125rem 0;
    border-radius: var(--r-control);
    color: var(--tinta-2);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
  }

  .tabbar-link .ic {
    width: 1.375rem;
    height: 1.375rem;
  }

  .tabbar-link .avatar {
    --lado: 1.375rem;
  }

  .tabbar-link > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabbar-link:focus-visible { outline-offset: -2px; }

  .tabbar-link.is-active {
    color: var(--tinta);
    font-weight: 650;
  }

  .tabbar-link.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.3125rem;
    height: 0.3125rem;
    margin-left: -0.15625rem;
    border-radius: 50%;
    background: var(--accion);
  }

  .page-head { margin-bottom: var(--s8); }

  .page-actions { width: 100%; }
  .page-actions > .btn,
  .page-actions > .inline-form,
  .page-actions > .inline-form > .btn { flex: 1 1 auto; }

  .grid-2,
  .grid-3 { grid-template-columns: minmax(0, 1fr); }

  .form-row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .form-actions > .btn,
  .form-actions > .inline-form,
  .form-actions > .inline-form > .btn { flex: 1 1 100%; }

  .filters .field,
  .filters .field:first-child {
    flex: 1 1 100%;
    max-width: none;
  }

  .row { flex-wrap: wrap; }

  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt {
    padding: 0.625rem 0 0;
    font-size: var(--t-sm);
  }
  .kv dd {
    padding: 0.125rem 0 0.625rem;
    border-top: 0;
  }
  .kv dt:first-of-type + dd { padding-top: 0.125rem; }

  .table-wrap {
    margin-inline: calc(var(--margen) * -1);
    padding-inline: calc(var(--margen) - var(--s3));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table th,
  .table td { white-space: nowrap; }

  .tabs {
    gap: var(--s6);
    margin-inline: calc(var(--margen) * -1);
    padding-inline: var(--margen);
  }

  .step:not(.is-current) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .step + .step::before {
    width: 1.25rem;
    margin-inline: 0.625rem;
  }

  .step.is-current .dot { margin-right: 0.125rem; }

  /* Los campos a 16 px: así el teléfono no amplía la página al escribir. */
  .input { font-size: 1rem; }
  .input-code { font-size: 1.75rem; }

  .btn-sm { --btn-alto: 2.5rem; }
  .btn-icon { --btn-alto: 2.75rem; }

  /* El menú de acciones sube desde abajo, como hoja de opciones. Tocar fuera lo cierra. */
  .menu:not(.rail-me)[open] > summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--telon);
    cursor: default;
    animation: aparece var(--suave) ease-out;
  }

  .menu:not(.rail-me) > .menu-list {
    position: fixed;
    inset: auto 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
    z-index: 111;
    max-width: none;
    padding: 0.5rem;
    border-radius: 1.125rem;
    transform-origin: bottom center;
    animation: sube var(--suave) var(--curva);
  }

  .menu-item { min-height: 3rem; }

  dialog.dialog {
    max-width: 100%;
    margin: auto 0 0;
    border-radius: var(--r-hoja) var(--r-hoja) 0 0;
  }

  .dialog-box { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }

  .dialog-actions {
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }

  .dialog-actions .btn { width: 100%; }

  .secret-list {
    gap: var(--s3) var(--s4);
    padding: var(--s4);
    font-size: var(--t-base);
    letter-spacing: 0.06em;
  }
}

/* La barra inferior solo existe en móvil. */
@media (min-width: 45.0625em) {
  .tabbar { display: none; }
}

/* Riel en pantallas muy bajas (tableta apaisada pequeña) */
@media (max-height: 34em) and (min-width: 45.0625em) {
  .rail { padding-block: var(--s2); }
  .rail-brand { margin-bottom: var(--s1); }
  .rail-link,
  .rail-me-button { min-height: 2.125rem; }
  .rail-foot { padding-top: var(--s1); }
}

/* Dedo en vez de cursor: objetivos de 44 px */
@media (pointer: coarse) {
  .btn-sm { --btn-alto: 2.75rem; }
  .btn-icon { --btn-alto: 2.75rem; }
  .menu-item { min-height: 2.75rem; }
  .input-peek { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; }
  .check { min-height: 2.75rem; align-items: center; }
  .check-switch { align-items: center; }
}

/* Contraste forzado (Windows): se respeta la paleta del sistema */
@media (forced-colors: active) {
  .error-code {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .dot,
  .avatar-dot,
  .rail-link.is-active::before,
  .tab.is-active::after { forced-color-adjust: none; }

  .btn { border-color: ButtonText; }
}

/* ════════════════════════════════════════════════════════════════════════
   7. IMPRESIÓN Y MOVIMIENTO REDUCIDO
   ════════════════════════════════════════════════════════════════════════ */

@media print {
  :root {
    --mesa: #FFFFFF;
    --papel: #FFFFFF;
    --bruma: #FFFFFF;
    --tinta: #000000;
    --tinta-2: #333333;
    --tinta-3: #555555;
    --filete: #BBBBBB;
    --filete-fuerte: #888888;
    --sombra-hoja: none;
  }

  html { color-scheme: light; }

  body,
  body.app,
  body.auth { display: block; background: #FFFFFF; padding: 0; }

  .rail,
  .tabbar,
  .skip-link,
  .page-actions,
  .page-back,
  .flashes,
  .auth-stage,
  .menu,
  .pager,
  .toast,
  .form-actions,
  .composer,
  .inbox-list,
  .thread-actions,
  dialog { display: none !important; }

  .sheet,
  .auth-sheet {
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .block,
  .row,
  .table tr { break-inside: avoid; }

  a { color: inherit; text-decoration: none; }

  .table-wrap { overflow: visible; margin: 0; padding: 0; }
}

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

  .status.is-pulse .dot::after { display: none; }
  .btn:active { transform: none; }
}