/* =======================================================================
   CRM — hoja de estilos única. Sin frameworks ni compilación.

   La idea: esto es una herramienta que ocho personas miran ocho horas al
   día, así que busca calma y confianza, no espectáculo. La jerarquía la
   hacen el espacio, el tamaño y el peso; el color queda reservado para lo
   que de verdad necesita atención (un lead parado, una pieza sin stock, un
   mensaje que no salió). Si todo está al día, la pantalla no grita.

   Ningún valor es al azar: espaciado, tamaños de letra y tiempos salen de
   las escalas de abajo.

   REPARTO DE COLORES (Desguaces Gil). Dos territorios que no se mezclan:

   · La MARCA vive en el MARCO: franja superior, barra lateral, cabecera y
     barra inferior del móvil, banda y placa de la pantalla de entrar e
     iconos.
       rojo Gil      firma y «estás aquí» (logo, franja, sección activa)
       azul letrero  indicadores sin texto (foco, pestaña activa, barras)
       bronce        material de la barra lateral y la gente (avatares)
   · El ESTADO vive en el CONTENIDO: tablero, fichas, chats, formularios.
       rojo = va mal · ámbar = parado · naranja = en espera · verde = bien
       (la tarjeta del formulario de entrar también es contenido)
   · Común a los dos: el azul de acción (--acento) es el único color de
     «pulsa aquí», esté donde esté el botón. No es un estado.

   Ningún --marca-* entra en fichas, filas, chats ni avisos, y ningún color
   de estado sale al marco: así un rojo dentro del tablero siempre significa
   «problema». Un solo .boton.principal por vista. Los contrastes están
   medidos (WCAG AA); antes de retocar un valor, vuelve a medirlo.
   ===================================================================== */

/* --- 1. Fichas de color y medidas ------------------------------------ */
:root {
  /* Superficies, de más al fondo a más cerca */
  --fondo: #f4f6f9;
  --estructura: #f2e9df;      /* barra lateral: crema de bronce, el material de la marca */
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --columna: #e3e8ef;

  /* Líneas: --borde para divisiones internas, --borde-fuerte para el
     contorno de tarjetas y fichas (tiene que verse). */
  --borde: #e5e8ed;
  --borde-fuerte: #c2cad4;

  /* Texto */
  --texto: #101828;
  --texto-medio: #475467;
  --texto-suave: #5a6578;
  --borde-campo: #7b8493;      /* 3,8:1 sobre la superficie: el campo se ve */
  --borde-columna: transparent;

  /* Velos de las barras translúcidas y del menú, en rgba fijo */
  --velo-menu: rgba(255, 255, 255, .6);
  --velo-cabecera: rgba(255, 255, 255, .78);
  --velo-barra: rgba(255, 255, 255, .8);
  --borde-velo: rgba(229, 232, 237, .7);
  --pastilla: rgba(16, 24, 40, .07);
  --sombra-principal: 0 1px 2px rgba(0, 114, 185, .3);

  /* Acción: el azul del letrero, oscurecido lo justo para que el texto
     blanco encima se lea (5,1:1). Es el único color de «pulsa aquí». */
  --acento: #0072b9;
  --acento-fuerte: #005d9c;
  --acento-suave: #ecf6ff;

  /* Semánticos: solo para estados, nunca de adorno */
  --verde: #0a7c48;      --verde-suave: #e4f4ec;
  --ambar: #9b5d00;      --ambar-suave: #fdf4e6;
  --rojo: #b02a2a;       --rojo-suave: #fbeae8;   /* ladrillo: lejos del rojo Gil */
  --naranja: #a74300;    --naranja-suave: #fdeee0;
  --violeta: #6340c0;    --violeta-suave: #efeafb;

  /* Marca: medidos en el logo. Solo en el marco (ver la cabecera). */
  --marca-rojo: #e10714;
  --marca-rojo-indicador: #e10714;
  --marca-azul: #0188d1;          /* sin texto encima: con blanco da 3,9:1 */
  --marca-bronce: #bc8534;
  --marca-bronce-linea: #dcc6ae;
  --marca-sobre-bronce: #1a1207;
  --marca-placa: #ffffff;
  --marca-banda: #e10714;
  --marca-franja: linear-gradient(90deg,
      var(--marca-rojo) 0 33.34%, var(--marca-azul) 0 66.67%, var(--marca-bronce) 0);

  /* Sombras por capas: cuanto más grande la superficie, más peso */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --sombra-2: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 8px 16px -6px rgba(16, 24, 40, .1);
  --sombra-3: 0 4px 8px -3px rgba(16, 24, 40, .08), 0 16px 32px -8px rgba(16, 24, 40, .14);

  /* Espacio, en rem para que crezca si el usuario agranda la letra */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem;

  /* Curvas y tiempos: las de serie son demasiado flojas */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --rapido: 140ms;
  --medio: 200ms;

  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-full: 999px;
  --barra: 64px;               /* alto de la barra inferior del móvil */
  --lateral: 13.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1318;
    --estructura: #16120d;
    --superficie: #1d252e;
    --superficie-2: #252e38;
    --columna: #0b0f13;
    --borde: #2e3741;
    --borde-fuerte: #414b57;
    --texto: #e7ecf1;
    --texto-medio: #b3bfcb;
    --texto-suave: #8a99a7;
    --borde-campo: #74828f;
    --borde-columna: var(--borde);    /* la columna casi no se separa del fondo */
    --velo-menu: rgba(29, 37, 46, .6);
    --velo-cabecera: rgba(29, 37, 46, .78);
    --velo-barra: rgba(29, 37, 46, .8);
    --borde-velo: rgba(46, 55, 65, .7);
    --pastilla: rgba(231, 236, 241, .07);
    --sombra-principal: 0 1px 2px rgba(76, 166, 233, .3);
    --acento: #4ca6e9;
    --acento-fuerte: #8accff;
    --acento-suave: #09293f;
    --verde: #4cc38a;      --verde-suave: #10291d;
    --ambar: #ecbd3a;      --ambar-suave: #2c230b;
    --rojo: #f0736a;       --rojo-suave: #331d1b;
    --naranja: #ef8f45;    --naranja-suave: #2f2113;
    --violeta: #a78bfa;    --violeta-suave: #221c39;
    --marca-rojo-indicador: #f22a36;   /* el mismo rojo, aclarado para leerse sobre oscuro */
    --marca-bronce-linea: #463826;
    --marca-placa: #ebebeb;            /* la placa del logo no deslumbra de noche */
    --marca-banda: #a8070f;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 4px 12px -4px rgba(0, 0, 0, .45);
    --sombra-3: 0 8px 28px -6px rgba(0, 0, 0, .55);
  }
}

/* --- 2. Base ---------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .9375rem;              /* 15px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* La firma: una línea roja Gil de 3 px arriba del todo, en cada pantalla.
   Siempre igual y siempre en el mismo sitio, así que se lee como marco y no
   como aviso. En la pantalla de entrar ya está la banda roja entera. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 3px;
  background: var(--marca-rojo); z-index: 60; pointer-events: none;
}
body:has(.entrar)::before { display: none; }
.entrar { position: relative; z-index: 61; }   /* por si no hay :has() */

/* El tracking va con el tamaño: los títulos grandes piden apretar las
   letras; el texto pequeño, separarlas un poco. Un solo valor para todo
   siempre está mal en alguna parte. */
h1 {
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -.021em;
  font-weight: 640; margin: 0 0 var(--e1);
}
h2 {
  font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em;
  font-weight: 640; margin: 0 0 var(--e3);
}
h3 {
  font-size: .75rem; line-height: 1.3; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 680; color: var(--texto-suave);
  margin: 0 0 var(--e2);
}

.subtitulo { color: var(--texto-suave); font-size: .8125rem; line-height: 1.5; }
.apagado { color: var(--texto-suave); font-size: .8125rem; }
.vacio {
  color: var(--texto-suave); font-size: .875rem;
  padding: var(--e5) var(--e2); text-align: center;
}

/* --- 3. Estructura ---------------------------------------------------- */
.disposicion { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--estructura);
  border-right: 1px solid var(--marca-bronce-linea);
  padding: calc(var(--e4) + 3px) var(--e3) var(--e4);   /* +3 px: la franja de arriba */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca {
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em;
  padding: var(--e1) var(--e2) var(--e5);
  display: block; color: var(--texto);
}
.marca:hover { text-decoration: none; }
.marca .marca-punto { color: var(--marca-rojo); }

/* La misma marca en escritorio y en el móvil: el cuadrado rojo «GIL» y el
   nombre escrito al lado. El logo entero, con las bielas, se queda para la
   pantalla de entrar, que es donde tiene sitio. */
.lateral .marca, .cabecera-movil .marca {
  display: flex; align-items: center; gap: var(--e2);
  font-size: .9375rem; font-weight: 650; letter-spacing: -.01em; color: var(--texto);
}
.lateral .marca { padding: var(--e1) var(--e2) var(--e4); }
.lateral .marca img, .cabecera-movil .marca img {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  /* El blanco del letrero baja al tono de la placa: sin esto, de noche el
     logo sería el punto más brillante de la pantalla. */
  .entrar-placa img { filter: brightness(.93); }
}

.buscador-global { margin: 0 0 var(--e3); }
.lateral .buscador-global input {
  font-size: .8125rem; padding: .4375rem .625rem;
  background: var(--superficie);
}
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  position: relative;
  display: flex; align-items: center; gap: var(--e3);
  padding: .5rem var(--e3);
  border-radius: var(--r-s);
  color: var(--texto-medio);
  font-weight: 550;
  font-size: .875rem;
  transition: background var(--rapido) ease, color var(--rapido) ease;
}
/* Sección activa: placa blanca, texto en negro y el rojo Gil solo en el
   icono y en el marcador del borde. En la barra lateral nunca hay estados,
   así que ese rojo solo puede significar «estás aquí». */
.menu a.activo {
  background: var(--superficie); color: var(--texto);
  font-weight: 640; box-shadow: var(--sombra-1);
}
.menu a.activo .icono { color: var(--marca-rojo-indicador); opacity: 1; }
.menu a.activo::before {
  content: ""; position: absolute; left: -.75rem;
  top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.25rem; border-radius: 0 4px 4px 0;
  background: var(--marca-rojo-indicador);
}
.menu .icono { width: 1.125rem; text-align: center; opacity: .8; font-size: .9375rem; }
.menu .separador { height: 1px; background: var(--marca-bronce-linea); margin: var(--e3) var(--e1); }
.menu form { margin-top: var(--e2); }
.lateral .salir { width: 100%; margin-top: var(--e2); }

/* La gente de Gil lleva el bronce: el avatar propio en el marco. Los
   avatares de dentro (fichas, chats) siguen en azul. */
.lateral .avatar, .cabecera-movil .avatar {
  background: var(--marca-bronce); color: var(--marca-sobre-bronce);
}

.contenido { flex: 1; min-width: 0; padding: var(--e5) var(--e6) var(--e6); }
.cabecera-pagina {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e5);
}

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

/* --- 4. Piezas sueltas ------------------------------------------------ */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l);
  padding: var(--e5);
  box-shadow: var(--sombra-1);
}
.tarjeta + .tarjeta { margin-top: var(--e4); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: .5rem var(--e4);
  min-height: 2.375rem;
  border-radius: var(--r-s);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: transform var(--rapido) var(--ease-out),
              background var(--rapido) ease,
              border-color var(--rapido) ease,
              box-shadow var(--rapido) ease;
}
/* Responder al pulsar y no al soltar: es lo que hace que la interfaz
   parezca que te escucha. */
.boton:active { transform: scale(.97); }
.boton.principal {
  background: var(--acento); border-color: var(--acento); color: var(--superficie);
  box-shadow: var(--sombra-principal);
}
.boton.verde { background: var(--verde); border-color: var(--verde); color: var(--superficie); }
.boton.peligro { color: var(--rojo); border-color: var(--borde); }
.boton.pequeno {
  padding: .25rem .625rem; min-height: 2rem; font-size: .8125rem; border-radius: 6px;
}
.boton:disabled { opacity: .5; cursor: not-allowed; }

.etiqueta {
  display: inline-block;
  padding: .0625rem .5rem;
  border-radius: var(--r-full);
  font-size: .6875rem;
  line-height: 1.5;
  font-weight: 640;
  letter-spacing: .01em;
  background: var(--superficie-2);
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  white-space: nowrap;
}
.etiqueta.azul { background: var(--acento-suave); color: var(--acento); border-color: transparent; }
.etiqueta.verde { background: var(--verde-suave); color: var(--verde); border-color: transparent; }
.etiqueta.ambar { background: var(--ambar-suave); color: var(--ambar); border-color: transparent; }
.etiqueta.rojo { background: var(--rojo-suave); color: var(--rojo); border-color: transparent; }
.etiqueta.violeta { background: var(--violeta-suave); color: var(--violeta); border-color: transparent; }
.etiqueta.naranja { background: var(--naranja-suave); color: var(--naranja); border-color: transparent; }

/* Etapa del lead, en grande: es lo primero que se mira al abrirlo. Debajo,
   la barra del embudo dice por dónde va y, con el color del semáforo, si
   está al día (verde), parado (ámbar) o muy parado (rojo). */
.etapa-actual {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--e3); flex-wrap: wrap;
}
.etapa-rotulo {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-suave);
}
.etapa-nombre {
  font-size: 1.625rem; font-weight: 720; letter-spacing: -.025em; line-height: 1.2;
  color: var(--texto); margin-top: 2px;
}
.etapa-tiempo {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  font-size: .8125rem; color: var(--texto-medio); margin-top: var(--e1);
}
.etapa-valor { font-size: 1rem; }

.pasos-embudo {
  list-style: none; margin: var(--e4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e1);
}
.paso { --tono: var(--texto-suave); min-width: 0; }
.paso::before {
  content: ""; display: block; height: .5rem; border-radius: var(--r-full);
  background: var(--borde-fuerte);
}
.paso.verde { --tono: var(--verde); }
.paso.ambar { --tono: var(--ambar); }
.paso.rojo { --tono: var(--rojo); }
.paso.naranja { --tono: var(--naranja); }
.paso.hecho::before { background: var(--tono); opacity: .4; }
.paso.actual::before { background: var(--tono); }
.paso span {
  display: block; margin-top: var(--e1);
  font-size: .6875rem; font-weight: 600; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.paso.actual span { color: var(--texto); font-weight: 750; }
@media (max-width: 560px) {
  /* Seis nombres no caben: se queda el de la etapa actual. */
  .paso:not(.actual) span { visibility: hidden; }
  .paso.actual span { overflow: visible; }
}

.avatar {
  width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem;
  border-radius: 50%;
  background: var(--acento-suave); color: var(--acento);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
}
.avatar.mini { width: 1.375rem; height: 1.375rem; flex-basis: 1.375rem; font-size: .625rem; }

.globo {
  background: var(--verde); color: var(--superficie);
  border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 700;
  padding: .0625rem .4375rem;
  flex: 0 0 auto;
}

.aviso {
  padding: var(--e3) var(--e4);
  border-radius: var(--r-m);
  margin-bottom: var(--e3);
  font-size: .875rem;
  border: 1px solid transparent;
}
.aviso.exito { background: var(--verde-suave); color: var(--verde); }
.aviso.error { background: var(--rojo-suave); color: var(--rojo); }
.aviso.info { background: var(--acento-suave); color: var(--acento); }

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

/* --- 5. Formularios --------------------------------------------------- */
label {
  display: block;
  font-size: .8125rem; font-weight: 600;
  color: var(--texto-medio);
  margin-bottom: var(--e1);
}
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=file], select, textarea {
  width: 100%;
  padding: .5625rem .6875rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;            /* 16px: por debajo, el móvil hace zoom al enfocar */
  transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
}
input::placeholder, textarea::placeholder { color: var(--texto-suave); opacity: 1; }
/* El foco lo marca el anillo de :focus-visible (3,2-3,9:1 contra el fondo);
   el borde azul lo acompaña. Nunca `outline: none` aquí: el cambio de
   borde solo es de tono y, en un campo con error, ni eso. */
input:focus, select:focus, textarea:focus { border-color: var(--marca-azul); }
.campo.con-error :is(input, select, textarea) { border-color: var(--rojo); }
.campo { margin-bottom: var(--e4); }
.campo .ayuda { font-size: .75rem; color: var(--texto-suave); margin-top: var(--e1); font-weight: 400; }
.campo .errores { color: var(--rojo); font-size: .8125rem; margin-top: var(--e1); }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }

.filtros {
  display: flex; gap: var(--e3); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-1);
}
.filtros .campo { margin-bottom: 0; min-width: 9.5rem; }
.filtros label {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); font-weight: 680;
}
.filtros input, .filtros select { font-size: .875rem; padding: .4375rem .625rem; }

/* --- 6. Tablero ------------------------------------------------------- */
/* Todas las columnas a la vista, sin barra horizontal: se reparten el ancho.
   Hacia abajo no hay tope: la columna crece, baja la página entera y las
   fichas siguientes llegan solas al acercarse al final (scroll infinito). */
.tablero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: var(--e3);
  padding: 2px 2px var(--e3);
  align-items: stretch;
}
/* Si no caben las seis (por debajo de 1280 px, tableta), mejor desplazar
   que fichas ilegibles: barra lateral + seis columnas de 9,5rem. */
@media (max-width: 79.99em) {
  .tablero { overflow-x: auto; scrollbar-width: thin; }
}

.columna {
  min-width: 0;
  background: var(--columna);
  border: 1px solid var(--borde-columna);
  border-radius: var(--r-l);
  padding: var(--e3) .625rem .625rem;
  min-height: 10rem;
  display: flex; flex-direction: column;
  transition: background var(--rapido) ease, box-shadow var(--rapido) var(--ease-out);
}
.columna.destino { background: var(--acento-suave); box-shadow: inset 0 0 0 2px var(--marca-azul); }

/* La cabecera se queda arriba mientras se baja por la columna: con cien
   fichas hay que seguir sabiendo en qué etapa estás. Deja libres el canto
   de arriba (la línea naranja de En espera) y los laterales (el anillo de
   soltar). */
.columna-cabecera {
  position: sticky; top: 3px; z-index: 1;      /* 3px: la franja roja */
  margin-top: calc(var(--e2) * -1);
  padding: var(--e2) var(--e1) var(--e3);
  background-color: inherit;
  flex: 0 0 auto;
}
.columna-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-medio);
}
.columna-titulo .cuenta {
  background: var(--superficie); color: var(--texto-medio);
  border-radius: var(--r-full); padding: .0625rem .4375rem;
  font-size: .6875rem; letter-spacing: 0;
}
.columna-valor { font-size: .6875rem; color: var(--texto-suave); margin-top: 2px; letter-spacing: .01em; }
.columna-valor.urgente { color: var(--rojo); font-weight: 650; }
.columna-valor a { color: var(--acento-fuerte); }

/* En espera ya no se tiñe entera: un melocotón se confundía con el crema de
   la barra lateral. La marca una línea naranja arriba y el título. */
.columna.espera { background: var(--columna); box-shadow: inset 0 3px 0 var(--naranja); }
.columna.espera.destino { box-shadow: inset 0 3px 0 var(--naranja), inset 0 0 0 2px var(--marca-azul); }
.columna.espera .columna-titulo { color: var(--naranja); }
.columna.espera .cuenta { background: var(--superficie); }

.pila {
  display: block;                 /* a proposito: un bloque nunca encoge a sus
                                     hijos, y asi una ficha no puede comerse a
                                     la de abajo pase lo que pase */
  padding: 2px; margin: -2px;
  flex: 1 1 auto;
}
.pila > * + * { margin-top: var(--e3); }
.pila .vacio { font-size: .8125rem; }
/* Final de la columna: casi nunca se llega a ver, porque la tanda siguiente
   se pide antes de llegar. */
.pila-mas {
  display: block; text-align: center;
  padding: var(--e2); border-radius: var(--r-s);
  font-size: .75rem; font-weight: 600; color: var(--texto-suave);
}
.pila-mas.error { color: var(--rojo); }

.ficha {
  position: relative;
  display: block;
  background: var(--superficie);
  /* Borde marcado a proposito: dos fichas seguidas se tienen que leer como
     dos tarjetas, no como una caja grande con dos leads dentro. */
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  padding: .625rem .75rem .5625rem;
  color: var(--texto);
  cursor: grab;
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--rapido) var(--ease-out),
              transform var(--rapido) var(--ease-out),
              border-color var(--rapido) ease;
}
.ficha:active { cursor: grabbing; transform: scale(.985); }
.ficha.arrastrando { opacity: .4; transform: rotate(1.5deg); }

/* El color marca solo lo que va mal: si el lead está al día, no hay raya. */
.ficha::before {
  content: ""; position: absolute; left: 0; top: .625rem; bottom: .625rem;
  width: 3px; border-radius: 0 3px 3px 0; background: transparent;
}
.ficha.ambar::before { background: var(--ambar); }
.ficha.rojo::before { background: var(--rojo); width: 4px; }
.ficha.espera::before { background: var(--naranja); }
/* Cerrada: trazo discontinuo y sin sombra. Antes se apagaba con opacidad y
   el texto suave bajaba de 3:1; así cada texto conserva su contraste. */
.ficha.cerrado { box-shadow: none; border-style: dashed; }
.ficha.cerrado .ficha-titulo { color: var(--texto-medio); font-weight: 600; }

.ficha-titulo {
  font-size: .875rem; font-weight: 640; line-height: 1.35;
  letter-spacing: -.008em;
  margin-bottom: var(--e1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ficha-cliente, .ficha-coche {
  font-size: .78125rem; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha-cliente { color: var(--texto-medio); }
.ficha-coche { color: var(--texto-suave); }

.ficha-aviso {
  /* La próxima acción es lo que más importa de la ficha: si la columna es
     estrecha, sigue en otra línea (dos como mucho) en vez de cortarse. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: var(--e2);
  padding: .1875rem .4375rem;
  border-radius: 6px;
  font-size: .71875rem; line-height: 1.45;
  background: var(--superficie-2);
  color: var(--texto-suave);
}
.ficha-aviso b { font-weight: 680; color: var(--texto-medio); margin-right: var(--e1); }
.ficha-aviso.urgente { background: var(--rojo-suave); color: var(--rojo); }
.ficha-aviso.urgente b { color: var(--rojo); }
.ficha-aviso.espera { background: var(--naranja-suave); color: var(--naranja); }
.ficha-aviso.espera b { color: var(--naranja); }

.ficha-pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  margin-top: var(--e2); padding-top: var(--e2);
  border-top: 1px solid var(--borde);
  font-size: .75rem; color: var(--texto-suave);
}
.ficha-pie .derecha { display: flex; align-items: center; gap: var(--e2); }
.ficha-pie .importe { font-weight: 650; color: var(--texto); letter-spacing: -.01em; }
.ficha-pie .dias.ambar { color: var(--ambar); font-weight: 650; }
.ficha-pie .dias.rojo { color: var(--rojo); font-weight: 650; }

/* --- 7. Listados ------------------------------------------------------ */
.envoltorio-tabla { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla th {
  text-align: left;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 680; color: var(--texto-suave);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
}
.tabla td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }

/* --- 8. Ficha del lead ------------------------------------------------ */
.dos-columnas {
  display: grid; grid-template-columns: minmax(0, 1fr) 21rem;
  gap: var(--e4); align-items: start;
}

.datos { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--e2) var(--e3); font-size: .875rem; }
.datos dt { color: var(--texto-suave); font-size: .8125rem; }
.datos dd { margin: 0; }

.historial { list-style: none; margin: 0; padding: 0; }
.historial li {
  display: flex; gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borde);
  font-size: .875rem;
}
.historial li:last-child { border-bottom: none; }
.historial .marca-tiempo { color: var(--texto-suave); font-size: .75rem; white-space: nowrap; }
.historial .icono { width: 1.25rem; text-align: center; color: var(--texto-suave); flex: 0 0 auto; }

.piezas { list-style: none; margin: 0; padding: 0; }
.piezas li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e2);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borde);
  font-size: .875rem;
}
.piezas li:last-child { border-bottom: none; }

details.caja {
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: var(--e3);
  background: var(--superficie-2);
  margin-top: var(--e3);
}
details.caja summary {
  cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--texto-medio);
}
details.caja[open] summary { margin-bottom: var(--e3); color: var(--texto); }

/* --- 9. Bandeja de WhatsApp ------------------------------------------- */
.bandeja {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: var(--e3);
  height: calc(100vh - 11rem);
  min-height: 26rem;
}

.lista-chats, .hilo {
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}

.buscador-chats { padding: var(--e3); border-bottom: 1px solid var(--borde); }
.buscador-chats input { font-size: .875rem; padding: .4375rem .625rem; }

.pestanas { display: flex; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  flex: 1; text-align: center; white-space: nowrap;
  padding: .5625rem var(--e2);
  font-size: .78125rem; font-weight: 620;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color var(--rapido) ease, border-color var(--rapido) ease;
}
.pestanas a.activa { color: var(--acento); border-bottom-color: var(--marca-azul); }

.chats { overflow-y: auto; flex: 1; }
.chat {
  display: flex; gap: var(--e3);
  padding: var(--e3);
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  transition: background var(--rapido) ease;
}
.chat.activo { background: var(--acento-suave); }
.chat:active { background: var(--superficie-2); }
.chat-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-linea {
  display: flex; justify-content: space-between; gap: var(--e2);
  align-items: center; font-size: .8125rem;
}
.chat-linea strong { font-weight: 620; letter-spacing: -.005em; }
.chat-linea .ultimo, .chat-linea strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-linea .ultimo { color: var(--texto-suave); }
.chat-linea .cuando { color: var(--texto-suave); font-size: .6875rem; flex: 0 0 auto; }
.chat-linea.apagado { font-size: .6875rem; }

.hilo-cabecera {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.hilo-cabecera .acciones { gap: var(--e2); }
.hilo-cabecera select { font-size: .8125rem; padding: .375rem var(--e2); width: auto; }
.volver { display: none; font-size: 1.25rem; padding: 0 var(--e2); color: var(--texto-medio); }

.mensajes {
  flex: 1; overflow-y: auto;
  padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2);
  background: var(--fondo);
  /* El contenido se desvanece al meterse bajo la cabecera, en vez de
     cortarse contra una línea dura. */
  mask-image: linear-gradient(to bottom, transparent, #000 1.25rem);
}

.burbuja {
  max-width: min(78%, 34rem);
  padding: .5rem .6875rem;
  border-radius: var(--r-m);
  font-size: .9375rem; line-height: 1.5;
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
  word-wrap: break-word;
  transition: opacity var(--medio) var(--ease-out), transform var(--medio) var(--ease-out);
}
.burbuja.suya { align-self: flex-start; border-bottom-left-radius: var(--e1); }
.burbuja.nuestra {
  align-self: flex-end; border-bottom-right-radius: var(--e1);
  background: var(--acento-suave); border-color: transparent;
}
.burbuja .texto { white-space: pre-wrap; }
.burbuja .adjunto {
  max-width: 16rem; border-radius: var(--r-s);
  display: block; margin-bottom: var(--e1);
}
.burbuja .fichero { display: inline-block; margin-bottom: var(--e1); font-size: .84375rem; }
.burbuja .fichero.pendiente { color: var(--texto-suave); }
.pie-burbuja {
  font-size: .6875rem; color: var(--texto-suave);
  margin-top: 2px; text-align: right; letter-spacing: .01em;
}
.pie-burbuja .fallo { color: var(--rojo); font-weight: 650; }
.error-envio { font-size: .75rem; color: var(--rojo); margin-top: var(--e1); }

.escribir { border-top: 1px solid var(--borde); padding: var(--e3); background: var(--superficie); }
.caja-escribir { display: flex; gap: var(--e2); align-items: flex-end; }
.caja-escribir textarea { resize: none; max-height: 8.75rem; font-size: .9375rem; padding: .5rem .6875rem; }
.caja-escribir select, .caja-escribir input { font-size: .875rem; }

/* Adjuntar: el clip, lo elegido encima de la caja y la zona al arrastrar. */
.caja-escribir { flex-wrap: wrap; }
.caja-escribir textarea { flex: 1 1 12rem; }
.caja-escribir .adjuntar { flex: 0 0 auto; cursor: pointer; padding-inline: var(--e3); }
.adjuntos-elegidos { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--e2); }
.adjuntos-elegidos[hidden] { display: none; }
.adjunto-elegido {
  display: flex; align-items: center; gap: var(--e2); max-width: 15rem; min-width: 0;
  padding: var(--e1) var(--e1) var(--e1) var(--e2); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s); background: var(--superficie-2); font-size: .8125rem;
}
.adjunto-elegido img { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.adjunto-elegido .icono-archivo { font-size: 1.25rem; flex: 0 0 auto; }
.adjunto-elegido .adjunto-nombre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; flex-direction: column; line-height: 1.3;
}
.adjunto-elegido .adjunto-nombre small { color: var(--texto-suave); }
.caja-escribir.soltar { outline: 2px dashed var(--marca-azul); outline-offset: 4px; }
.adjunto-audio { width: 100%; max-width: 18rem; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.aviso-ventana { font-size: .6875rem; color: var(--texto-suave); margin-top: var(--e2); }
.vacio-hilo { align-items: center; justify-content: center; }

/* Enviar una plantilla: el desplegable, los huecos que tiene y cómo le
   llegará el mensaje al cliente antes de mandarlo. */
.formulario-plantilla { display: grid; gap: var(--e2); }
.formulario-plantilla .huecos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e2);
}
.formulario-plantilla .huecos:not(:has(input:not([hidden]))) { display: none; }
.formulario-plantilla [hidden] { display: none; }
.formulario-plantilla .boton { justify-self: start; }
.vista-plantilla {
  font-size: .8125rem; color: var(--texto-medio); white-space: pre-line;
  background: var(--superficie-2); border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-s); padding: var(--e2) var(--e3);
}

/* WhatsApp en la ficha del lead */
.whatsapp-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.whatsapp-aviso { margin: var(--e3) 0; }
.whatsapp-ficha { scroll-margin-top: var(--e4); }

/* --- 9b. Resumen ------------------------------------------------------ */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.metrica {
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l);
  padding: var(--e4);
  box-shadow: var(--sombra-1);
}
.metrica .cifra {
  font-size: 1.75rem; font-weight: 660; line-height: 1.1;
  letter-spacing: -.025em;             /* cifras grandes: letras más juntas */
  font-variant-numeric: tabular-nums;  /* los números no bailan al cambiar */
}
.metrica .rotulo {
  font-size: .6875rem; font-weight: 680; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-suave); margin-top: var(--e1);
}
.metrica .detalle { font-size: .78125rem; color: var(--texto-suave); margin-top: var(--e1); }

/* Barras de proporción: sin librería de gráficos, que aquí no hace falta. */
.dato { margin-bottom: var(--e3); }
.dato:last-child { margin-bottom: 0; }
.dato-fila {
  display: flex; justify-content: space-between; gap: var(--e2);
  font-size: .8125rem; margin-bottom: var(--e1);
}
.dato-cifra { font-weight: 640; font-variant-numeric: tabular-nums; }
.barra {
  height: .375rem; border-radius: var(--r-full);
  background: var(--superficie-2); overflow: hidden;
}
.barra .relleno {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--marca-azul);
  transition: width var(--medio) var(--ease-out);
}
.barra .relleno.naranja { background: var(--naranja); }
.barra .relleno.rojo { background: var(--rojo); }

/* Paginación */
.paginacion {
  display: flex; align-items: center; justify-content: center; gap: var(--e3);
  padding: var(--e3); font-size: .8125rem; color: var(--texto-suave);
}

/* Último mensaje de WhatsApp dentro de la ficha del tablero: se sabe de qué
   va el lead sin abrirlo. */
.ficha-wa {
  display: flex; gap: var(--e1); align-items: baseline;
  margin-top: var(--e2);
  font-size: .71875rem; line-height: 1.4;
  color: var(--texto-medio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha-wa .icono { color: var(--verde); flex: 0 0 auto; font-size: .75rem; }

/* Nota interna: se ve distinta a propósito, para que nadie crea que salió. */
.burbuja.interna {
  align-self: center;
  max-width: min(90%, 38rem);
  background: var(--ambar-suave);
  border: 1px dashed var(--ambar);
  color: var(--texto);
  box-shadow: none;
}
.burbuja.interna .pie-burbuja { color: var(--ambar); }

/* Respuestas rápidas sobre la caja de escribir. */
.respuestas {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.chip {
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2);
  color: var(--texto-medio);
  border-radius: var(--r-full);
  padding: .1875rem .625rem;
  font: inherit; font-size: .75rem; font-weight: 620;
  cursor: pointer;
  transition: transform var(--rapido) var(--ease-out), background var(--rapido) ease;
}
.chip:active { transform: scale(.95); }
details.caja.nota { margin-top: var(--e2); }
details.caja.nota summary { font-size: .8125rem; }

/* El hilo de WhatsApp dentro de la ficha del lead: alto limitado para que no
   empuje el resto de la ficha fuera de la pantalla. */
.hilo-embebido {
  display: flex; flex-direction: column; gap: var(--e2);
  max-height: 24rem; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e3);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
}
.hilo-embebido .burbuja { max-width: min(85%, 30rem); }

/* Un problema no se avisa solo con color (hay quien no distingue el rojo):
   lleva también un «!» en círculo, sin tocar las plantillas. */
.ficha-aviso.urgente::before, .aviso.error::before, .campo .errores::before {
  content: "!";
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.1em; height: 1.1em; margin-right: var(--e1); vertical-align: -.15em;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-size: .75em; font-weight: 800; line-height: 1;
}

/* --- 9c. Pantalla de entrar ------------------------------------------- */
/* El momento de más marca: se ve una vez al día y no tiene datos. */
.entrar {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e6) var(--e4);
  background: linear-gradient(to bottom, var(--marca-banda) 0 38vh, var(--fondo) 38vh 100%);
}
.entrar-tarjeta { width: 100%; max-width: 22.5rem; box-shadow: var(--sombra-3); }
.entrar-placa {
  position: relative; overflow: hidden;
  background: var(--marca-placa);
  border-radius: var(--r-m);
  padding: var(--e3) var(--e4) calc(var(--e3) + 4px);
  margin: calc(var(--e2) * -1) calc(var(--e2) * -1) var(--e5);
}
.entrar-placa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--marca-franja);
}
.logo-entrar { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto; }
.entrar-tarjeta h1 { font-size: 1.25rem; }
.entrar-tarjeta .subtitulo { margin: 0 0 var(--e5); }
.entrar-boton { width: 100%; }
.entrar-pie { text-align: center; font-size: .75rem; color: var(--texto-suave); margin-top: var(--e4); }

/* Equipo: el enlace para elegir contraseña, que se enseña una vez. */
.enlace-clave { margin-bottom: var(--e5); border-color: var(--acento); }
.enlace-clave h2 { margin-top: 0; }
.enlace-clave-fila { display: flex; gap: var(--e2); }
.enlace-clave-fila input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .8125rem; }
form.en-linea { display: inline-block; margin-left: var(--e1); }

/* --- 10. Interacción -------------------------------------------------- */
/* El hover solo donde hay ratón: en el móvil se queda pegado tras tocar. */
@media (hover: hover) and (pointer: fine) {
  .menu a:hover {
    background: var(--velo-menu);
    color: var(--texto); text-decoration: none;
  }
  .menu a.activo:hover { background: var(--superficie); color: var(--texto); }
  .boton:hover { background: var(--superficie-2); border-color: var(--texto-suave); text-decoration: none; }
  .boton.principal:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
  .boton.verde:hover { filter: brightness(1.06); }
  .ficha:hover {
    text-decoration: none;
    border-color: var(--borde-fuerte);
    box-shadow: var(--sombra-2);
  }
  .tabla tbody tr:hover td { background: var(--superficie-2); }
  .chat:hover { background: var(--superficie-2); text-decoration: none; }
  .chat.activo:hover { background: var(--acento-suave); }
  .pestanas a:hover { color: var(--texto); }
  .chip:hover { background: var(--acento-suave); color: var(--acento); border-color: transparent; }
}

/* Foco visible para quien va con teclado, sin molestar a quien usa ratón. */
:focus-visible {
  outline: 2px solid var(--marca-azul);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* Lo que llega nuevo entra; no aparece de golpe. Nunca desde scale(0):
   nada en el mundo real sale de la nada. */
@starting-style {
  .burbuja { opacity: 0; transform: translateY(6px) scale(.98); }
}
.aviso { transition: opacity var(--medio) var(--ease-out), transform var(--medio) var(--ease-out); }
@starting-style {
  .aviso { opacity: 0; transform: translateY(-4px); }
}

/* --- 11. Móvil -------------------------------------------------------- */
@media (max-width: 860px) {
  .lateral { display: none; }
  .contenido { padding: var(--e3) var(--e4) calc(var(--barra) + var(--e5)); }

  /* Barras translúcidas: el contenido pasa por debajo en lugar de chocar
     contra una franja opaca. */
  .cabecera-movil {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    position: sticky; top: 0; z-index: 20;
    padding: calc(var(--e3) + 3px) var(--e4) var(--e3);   /* + la franja */
    background: var(--velo-cabecera);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--borde-velo);
    margin: calc(var(--e3) * -1) calc(var(--e4) * -1) var(--e3);
  }
  .cabecera-movil .marca { padding: 0; }

  .barra-movil {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    padding: var(--e2) var(--e1) calc(var(--e2) + env(safe-area-inset-bottom));
    background: var(--velo-barra);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--borde-velo);
  }
  .barra-movil a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    text-align: center;
    font-size: .625rem; font-weight: 640; letter-spacing: .01em;
    color: var(--texto-suave);
    padding: var(--e1) 2px; border-radius: var(--r-s);
    text-decoration: none;
    transition: color var(--rapido) ease, background var(--rapido) ease,
                transform var(--rapido) var(--ease-out);
  }
  .barra-movil a.activo {
    color: var(--texto);
    background: var(--pastilla);
  }
  .barra-movil a.activo .icono { color: var(--marca-rojo-indicador); }
  .barra-movil .icono { font-size: 1.125rem; line-height: 1.2; }
  .barra-movil a:active { transform: scale(.94); }

  h1 { font-size: 1.3125rem; }
  .cabecera-pagina { margin-bottom: var(--e4); }
  /* El botón de crear ya está en la cabecera fija: no hace falta dos veces.
     Solo ese: el periodo activo del Resumen también es .principal. */
  .cabecera-pagina .solo-escritorio { display: none; }

  /* Por debajo de 16 px el iPhone hace zoom al tocar el campo. */
  .caja-escribir textarea, .caja-escribir select, .caja-escribir input,
  .filtros input, .filtros select, .buscador-chats input, .hilo-cabecera select {
    font-size: 1rem;
  }

  .dos-columnas, .rejilla-2 { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 6.25rem 1fr; }
  .tarjeta { padding: var(--e4); border-radius: var(--r-m); }

  /* Filtros en una fila que se desliza, no un bloque que come la pantalla. */
  .filtros {
    flex-wrap: nowrap; overflow-x: auto; gap: var(--e2);
    padding: var(--e3); scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros label { display: none; }
  .filtros .campo { min-width: 9.375rem; flex: 0 0 auto; }
  .filtros .boton { flex: 0 0 auto; }

  /* En el teléfono, una columna por pantalla deslizando de lado, y cada una
     con su propio desplazamiento vertical. */
  .tablero {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: .625rem;
  }
  .columna {
    flex: 0 0 86vw; scroll-snap-align: start;
    max-height: calc(100vh - 17rem); min-height: 8rem;
  }
  .columna-cabecera { position: static; margin-top: 0; padding-top: 0; }
  .pila { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .ficha { cursor: default; }
  .ficha-titulo { font-size: .9375rem; }

  .bandeja { grid-template-columns: 1fr; height: calc(100vh - 13rem); }
  .bandeja.con-hilo .lista-chats { display: none; }
  .bandeja:not(.con-hilo) .hilo { display: none; }
  .volver { display: block; }
}
@media (max-width: 374px) {
  .cabecera-movil .marca-texto { display: none; }   /* el alt del cuadrado lo nombra */
}

/* --- 12. Preferencias de la persona ----------------------------------- */
/* Menos movimiento: se quedan los cambios de color, se va lo que se desplaza. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .boton:active, .ficha:active, .barra-movil a:active { transform: none; }
}

/* Sin transparencias: las barras se vuelven sólidas. */
@media (prefers-reduced-transparency: reduce) {
  .cabecera-movil, .barra-movil {
    background: var(--superficie);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .mensajes { mask-image: none; }
}

/* Más contraste: bordes definidos en lugar de sombras suaves. */
@media (prefers-contrast: more) {
  :root { --borde: var(--borde-fuerte); }
  .tarjeta, .ficha, .boton, .lista-chats, .hilo { box-shadow: none; border-color: var(--texto-suave); }
  .subtitulo, .apagado, .columna-valor { color: var(--texto-medio); }
  .lateral { border-right-color: var(--texto-suave); }
  .menu .separador { background: var(--texto-suave); }
}

@media print {
  .lateral, .barra-movil, .cabecera-movil, .acciones, .filtros, body::before { display: none; }
  .tarjeta, .ficha { box-shadow: none; border: 1px solid #ccc; }
  body { background: #fff; }
}