/* Sistema de diseño de Prospección · Ambar Cargo.
   Lenguaje shadcn/ui (el de los componentes de 21st.dev) traducido a CSS propio: base neutra, superficies blancas,
   bordes de 1px en vez de sombras, acción principal casi negra y el ámbar de la marca solo como acento.
   Pensado primero para el celular de un vendedor en la calle; en escritorio la navegación pasa a una barra lateral
   y las empresas a renglones de tabla, sobre el mismo marcado.
   Orden: fuente, tokens, base, navegación, componentes, renglón de empresa, pantallas, estados, anchos, movimiento.
   Todo color vive en la raíz; el resto del archivo solo usa variables. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("InterVariable.woff2") format("woff2");
}

/* Tema claro (el de siempre). Cada tema redefine estas mismas variables y nada más: los componentes no saben de temas. */
:root {
  color-scheme: light;
  /* Barra de navegación (oscura en ambos temas) y ámbar de la marca. */
  --c-navy: #18181B;
  --c-navy-suave: #27272A;
  --c-navy-borde: #3F3F46;
  --c-barra-borde: transparent;
  --c-sobre-navy: #FAFAFA;
  --c-sobre-navy-suave: #A1A1AA;
  --c-primario: #F59E0B;
  --c-primario-osc: #B45309;
  --c-sobre-primario: #3D2C05;
  /* Acción principal y foco: casi negros sobre claro; en el tema oscuro se invierten. */
  --c-accion: #18181B;
  --c-accion-suave: #27272A;
  --c-sobre-accion: #FAFAFA;
  --c-foco: #18181B;
  /* Superficies y bordes. El borde fuerte es el de los controles: 3:1 o más sobre blanco. */
  --c-fondo: #F8FAFC;
  --c-sup: #FFFFFF;
  --c-campo: #FFFFFF;
  --c-tenue: #F4F4F5;
  --c-realce: #F8FAFC;
  --c-borde: #E4E4E7;
  --c-borde-fuerte: #85858F;
  /* Texto. */
  --c-txt: #09090B;
  --c-txt-medio: #3F3F46;
  --c-txt-suave: #52525B;
  /* Tonos con significado: texto, fondo teñido y borde del mismo tono. */
  --c-exito: #047857;
  --c-exito-fondo: #ECFDF5;
  --c-exito-borde: #A7F3D0;
  --c-alerta: #B45309;
  --c-alerta-txt: #92400E;
  --c-alerta-fondo: #FEF3C7;
  --c-alerta-borde: #FCD34D;
  --c-error: #DC2626;
  --c-error-txt: #B91C1C;
  --c-error-fondo: #FEF2F2;
  --c-error-borde: #FECACA;
  /* Embudo: el carril de cada columna, el velo tras un diálogo y un color por etapa (3:1 o más sobre carril y tarjeta). */
  --c-carril: #F4F4F5;
  --c-velo: rgb(9 9 11 / .5);
  --c-etapa-sin: #71717A;
  --c-etapa-contactado: #2563EB;
  --c-etapa-interesado: #B45309;
  --c-etapa-cotizacion: #7C3AED;
  --c-etapa-negociacion: #BE185D;
  --c-etapa-ganado: #047857;
  --c-etapa-perdidos: #DC2626;
  /* Sombras mínimas y anillos de foco. */
  --sombra: 0 1px 2px rgb(0 0 0 / .05);
  --sombra-alta: 0 4px 12px rgb(0 0 0 / .08);
  --sombra-barra: 0 -1px 2px rgb(0 0 0 / .04);
  --anillo: 0 0 0 3px rgb(24 24 27 / .16);
  --anillo-error: 0 0 0 3px rgb(220 38 38 / .2);
  /* Forma, medidas y ritmo. */
  --r: 12px;
  --r-sm: 8px;
  --r-xs: 6px;
  --r-pastilla: 999px;
  --toque: 44px;
  --alto-secciones: 60px;
  --ancho: 1120px;
  --ancho-lateral: 232px;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ritmo: cubic-bezier(.4, 0, .2, 1);
  --t: 160ms;
}

/* Tema oscuro, al modo de shadcn/ui: página casi negra, superficies un tono arriba, bordes sutiles, texto claro,
   tonos desaturados sobre fondos teñidos oscuros y el botón principal invertido (claro sobre oscuro).
   Va dos veces con los mismos valores, porque CSS no deja compartir un bloque entre un selector y una consulta:
   aquí cuando el usuario lo eligió con el control de tema (tema.js pone data-tema en <html>)... */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --c-navy: #09090B;
  --c-navy-suave: #27272A;
  --c-navy-borde: #3F3F46;
  --c-barra-borde: #27272A;
  --c-sobre-navy: #FAFAFA;
  --c-sobre-navy-suave: #A1A1AA;
  --c-primario: #F59E0B;
  --c-primario-osc: #FBBF24;
  --c-sobre-primario: #3D2C05;
  --c-accion: #FAFAFA;
  --c-accion-suave: #D4D4D8;
  --c-sobre-accion: #18181B;
  --c-foco: #FAFAFA;
  --c-fondo: #09090B;
  --c-sup: #18181B;
  --c-campo: #1F1F23;
  --c-tenue: #27272A;
  --c-realce: #1F1F23;
  --c-borde: #303036;
  --c-borde-fuerte: #7C7C87;
  --c-txt: #FAFAFA;
  --c-txt-medio: #D4D4D8;
  --c-txt-suave: #A1A1AA;
  --c-exito: #34D399;
  --c-exito-fondo: #06281F;
  --c-exito-borde: #065F46;
  --c-alerta: #F59E0B;
  --c-alerta-txt: #FCD34D;
  --c-alerta-fondo: #3B2A08;
  --c-alerta-borde: #78350F;
  --c-error: #F87171;
  --c-error-txt: #FCA5A5;
  --c-error-fondo: #3F1113;
  --c-error-borde: #7F1D1D;
  --c-carril: #111113;
  --c-velo: rgb(0 0 0 / .7);
  --c-etapa-sin: #A1A1AA;
  --c-etapa-contactado: #60A5FA;
  --c-etapa-interesado: #F59E0B;
  --c-etapa-cotizacion: #A78BFA;
  --c-etapa-negociacion: #F472B6;
  --c-etapa-ganado: #34D399;
  --c-etapa-perdidos: #F87171;
  --sombra: 0 1px 2px rgb(0 0 0 / .4);
  --sombra-alta: 0 6px 16px rgb(0 0 0 / .5);
  --sombra-barra: 0 -1px 2px rgb(0 0 0 / .3);
  --anillo: 0 0 0 3px rgb(250 250 250 / .22);
  --anillo-error: 0 0 0 3px rgb(248 113 113 / .3);
}
/* ...y aquí cuando no eligió nada y su sistema está en oscuro. Elegir «claro» lo desactiva. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --c-navy: #09090B;
    --c-navy-suave: #27272A;
    --c-navy-borde: #3F3F46;
    --c-barra-borde: #27272A;
    --c-sobre-navy: #FAFAFA;
    --c-sobre-navy-suave: #A1A1AA;
    --c-primario: #F59E0B;
    --c-primario-osc: #FBBF24;
    --c-sobre-primario: #3D2C05;
    --c-accion: #FAFAFA;
    --c-accion-suave: #D4D4D8;
    --c-sobre-accion: #18181B;
    --c-foco: #FAFAFA;
    --c-fondo: #09090B;
    --c-sup: #18181B;
    --c-campo: #1F1F23;
    --c-tenue: #27272A;
    --c-realce: #1F1F23;
    --c-borde: #303036;
    --c-borde-fuerte: #7C7C87;
    --c-txt: #FAFAFA;
    --c-txt-medio: #D4D4D8;
    --c-txt-suave: #A1A1AA;
    --c-exito: #34D399;
    --c-exito-fondo: #06281F;
    --c-exito-borde: #065F46;
    --c-alerta: #F59E0B;
    --c-alerta-txt: #FCD34D;
    --c-alerta-fondo: #3B2A08;
    --c-alerta-borde: #78350F;
    --c-error: #F87171;
    --c-error-txt: #FCA5A5;
    --c-error-fondo: #3F1113;
    --c-error-borde: #7F1D1D;
    --c-carril: #111113;
    --c-velo: rgb(0 0 0 / .7);
    --c-etapa-sin: #A1A1AA;
    --c-etapa-contactado: #60A5FA;
    --c-etapa-interesado: #F59E0B;
    --c-etapa-cotizacion: #A78BFA;
    --c-etapa-negociacion: #F472B6;
    --c-etapa-ganado: #34D399;
    --c-etapa-perdidos: #F87171;
    --sombra: 0 1px 2px rgb(0 0 0 / .4);
    --sombra-alta: 0 6px 16px rgb(0 0 0 / .5);
    --sombra-barra: 0 -1px 2px rgb(0 0 0 / .3);
    --anillo: 0 0 0 3px rgb(250 250 250 / .22);
    --anillo-error: 0 0 0 3px rgb(248 113 113 / .3);
  }
}

/* ---------- Base y tipografía ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.5 var(--fuente);
  font-feature-settings: "cv11", "calt";
  color: var(--c-txt);
  background: var(--c-fondo);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

main { max-width: var(--ancho); margin: 0 auto; padding: 20px 16px; }
/* La lista de secciones va fija abajo en celular: el contenido termina antes de ella. */
.con-sesion main { padding-bottom: calc(var(--alto-secciones) + 32px + env(safe-area-inset-bottom, 0px)); }

h1, h2, h3, p { margin: 0; }
h1 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; }
h2 { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
/* Título de grupo (un municipio, una situación): pequeño, en mayúsculas, con una línea que lo separa. */
h3 {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 8px;
  font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-txt-suave);
}
h3::after { content: ""; flex: 1; height: 1px; background: var(--c-borde); }
p + p { margin-top: 8px; }

a { color: var(--c-primario-osc); text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong, b { font-weight: 600; }
code { padding: 1px 6px; font-size: .875em; border-radius: var(--r-xs); background: var(--c-tenue); border: 1px solid var(--c-borde); }
.menor { color: var(--c-txt-suave); font-size: 14px; line-height: 1.45; }
.cifras, table, .cifra b, .conteo strong, .contador, .paginacion-donde, .meta-ola { font-variant-numeric: tabular-nums; }

.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -80px; z-index: 40; padding: 12px 16px; border-radius: var(--r-sm); background: var(--c-primario); color: var(--c-sobre-primario); font-weight: 600; }
.saltar:focus { top: 8px; }

/* ---------- Navegación ---------- */

/* En celular: una barra superior delgada con la marca y, fija abajo, la lista de secciones. */
.barra { background: var(--c-navy); color: var(--c-sobre-navy); box-shadow: 0 1px 0 var(--c-barra-borde); }
.barra-interior { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; }

.marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--c-sobre-navy); white-space: nowrap; }
.marca-sello { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--c-primario); color: var(--c-sobre-primario); font-weight: 700; }
.marca-area { font-weight: 500; color: var(--c-primario); }
.marca-area::before { content: "· "; }
/* En pantallas angostas la marca cede sitio a los botones de la barra en vez de encimarse con ellos. */
.marca-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.barra-pie { display: flex; align-items: center; gap: 12px; flex: none; }
.quien { display: none; }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--c-txt-medio); background: var(--c-tenue); border: 1px solid var(--c-borde); }

.salir { margin: 0; flex: none; }
.barra .salir button { padding: 8px 12px; font-size: 14px; color: var(--c-sobre-navy); }
.salir .icono { width: 18px; height: 18px; }

/* Control de tema: un botón que recorre claro → oscuro → el del sistema. Solo se muestra si tema.js pudo correr
   (es quien pone data-eleccion en la raíz); de sus tres íconos y tres nombres se ve el del tema elegido. */
.tema { display: none; flex: none; width: var(--toque); padding: 0; }
[data-eleccion] .tema { display: inline-flex; }
.tema .icono, .tema-rotulo span { display: none; }
[data-eleccion="claro"] .tema .tema-claro, [data-eleccion="oscuro"] .tema .tema-oscuro, [data-eleccion="sistema"] .tema .tema-sistema { display: inline; }
/* En celular solo se ve el ícono; el nombre sigue ahí para los lectores de pantalla. */
.tema-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.barra .tema { color: var(--c-sobre-navy); }
.barra-pie { gap: 4px; }
.tema-suelto { position: fixed; top: 12px; right: 12px; z-index: 20; }
.tema-suelto .tema { color: var(--c-txt-medio); background: var(--c-sup); border-color: var(--c-borde); box-shadow: var(--sombra); }

.secciones {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-sup);
  border-top: 1px solid var(--c-borde);
  box-shadow: var(--sombra-barra);
}
.secciones a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--alto-secciones); min-width: 0; padding: 8px 2px 6px;
  font-size: 11px; line-height: 1.2; font-weight: 500; text-decoration: none;
  color: var(--c-txt-suave);
  transition: color var(--t) var(--ritmo);
}
.secciones .icono { position: relative; z-index: 1; width: 20px; height: 20px; }
/* La sección actual se distingue por la píldora ámbar tras el ícono, por el peso y por el color del texto. */
.secciones a::before { content: ""; position: absolute; top: 7px; left: 50%; width: 52px; height: 28px; margin-left: -26px; border-radius: var(--r-pastilla); background: transparent; transition: background-color var(--t) var(--ritmo); }
.secciones a[aria-current="page"] { color: var(--c-txt); font-weight: 600; }
.secciones a[aria-current="page"]::before { background: var(--c-primario); }
.secciones a[aria-current="page"] .icono { color: var(--c-sobre-primario); }

/* ---------- Componentes ---------- */

/* Todo lo que se toca mide al menos el alto de toque. */
button, .boton, input, select, textarea, summary, .enlace-accion { min-height: var(--toque); }

/* Botón. El casi negro es la acción principal de la pantalla; lo demás va con borde o en fantasma. */
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
  color: var(--c-sobre-accion); background: var(--c-accion);
  border: 1px solid transparent; border-radius: var(--r-sm);
  box-shadow: var(--sombra);
  cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background-color var(--t) var(--ritmo), border-color var(--t) var(--ritmo), color var(--t) var(--ritmo), opacity var(--t) var(--ritmo);
}
button .icono, .boton .icono { width: 18px; height: 18px; }
button:active, .boton:active { opacity: .85; }
button.secundario, .boton.secundario { color: var(--c-txt); background: var(--c-sup); border-color: var(--c-borde-fuerte); }
button.fantasma, .boton.fantasma { color: var(--c-txt-medio); background: transparent; box-shadow: none; }
button.peligro { color: var(--c-error-txt); border-color: var(--c-error); }
button[disabled], .boton.inactivo { opacity: .45; cursor: default; pointer-events: none; box-shadow: none; }

.enlace-accion { display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; }

/* Tarjeta: superficie blanca con borde de 1px y una sombra apenas visible. */
.tarjeta { margin: 0 0 12px; padding: 16px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra); }

.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.acciones form { margin: 0; }

/* Pastilla de estatus: fondo teñido suave, borde del mismo tono, punto de color y siempre su texto. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 9px;
  font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap;
  color: var(--c-txt-medio); background: var(--c-sup);
  border: 1px solid var(--c-borde); border-radius: var(--r-pastilla);
}
.etiqueta::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-borde-fuerte); }
.etiqueta:has(.icono)::before { display: none; }
.etiqueta .icono { width: 12px; height: 12px; stroke-width: 2.25; }
.estatus-alerta { color: var(--c-alerta-txt); background: var(--c-alerta-fondo); border-color: var(--c-alerta-borde); }
.estatus-alerta::before { background: var(--c-primario); }
.estatus-exito { color: var(--c-exito); background: var(--c-exito-fondo); border-color: var(--c-exito-borde); }
.estatus-exito::before { background: var(--c-exito); }
.estatus-error { color: var(--c-error-txt); background: var(--c-error-fondo); border-color: var(--c-error-borde); }
.estatus-error::before { background: var(--c-error); }

/* Aviso de una sola vez (confirma lo que se acaba de hacer) y sus variantes de alerta y de error. */
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 16px; padding: 12px 14px;
  font-size: 15px; line-height: 1.4; font-weight: 500;
  color: var(--c-txt); background: var(--c-sup);
  border: 1px solid var(--c-borde); border-radius: var(--r);
  box-shadow: var(--sombra);
  animation: aparecer var(--t) var(--ritmo);
}
.aviso > .icono { margin-top: 1px; color: var(--c-primario-osc); }
.aviso.error { color: var(--c-error-txt); background: var(--c-error-fondo); border-color: var(--c-error-borde); }
.aviso-alerta { color: var(--c-alerta-txt); background: var(--c-alerta-fondo); border-color: var(--c-alerta-borde); text-align: left; }
/* Si se cae la conexión, el aviso se queda pegado arriba: el vendedor está a media ficha y debe verlo. */
#sin-conexion { position: sticky; top: 8px; z-index: 10; box-shadow: var(--sombra-alta); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Campos de formulario: etiqueta arriba, borde de 1px y anillo de foco. Nunca menos de 16px: con menos, iOS hace zoom al tocarlos. */
label { display: block; margin: 0 0 6px; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--c-txt); }
input, select, textarea {
  display: block; width: 100%; padding: 9px 12px;
  font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--c-txt); background-color: var(--c-campo);
  border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-sm);
  box-shadow: var(--sombra);
  transition: border-color var(--t) var(--ritmo), box-shadow var(--t) var(--ritmo);
}
/* La flecha del menú se dibuja con degradados para que su color salga de los tokens. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-txt-suave) 50%), linear-gradient(135deg, var(--c-txt-suave) 50%, transparent 50%);
  background-position: right 17px top 50%, right 12px top 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
textarea { min-height: 104px; resize: vertical; }
select[disabled] { color: var(--c-txt-suave); background-color: var(--c-tenue); border-color: var(--c-borde); box-shadow: none; }
.campo { margin: 0 0 16px; min-width: 0; }
.rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
/* Campo con ícono al inicio (la búsqueda). */
.con-icono { position: relative; }
.con-icono .icono { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--c-txt-suave); pointer-events: none; }
.con-icono .icono + * { padding-left: 38px; }

/* Error junto a su campo: borde, etiqueta y mensaje con signo. Color y texto, nunca solo color. */
.error { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--c-error-txt); }
.error::before, .aviso-alerta::before { content: "!"; display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; color: var(--c-sup); background: var(--c-error); }
.aviso-alerta::before { background: var(--c-alerta); }
/* El aviso de error comparte el signo; aquí recupera su caja y acomoda el botón de quitar el bloqueo debajo del texto. */
.aviso.error { gap: 8px 10px; margin: 0 0 16px; font-size: 15px; }
.aviso-bloqueo { flex-wrap: wrap; }
.aviso-bloqueo p { flex: 1 1 0; min-width: 0; }
.aviso-bloqueo form { flex: 1 1 100%; margin: 4px 0 0; padding-left: 28px; }
.con-error > label, .con-error .campo > label { color: var(--c-error-txt); }
.con-error input, .con-error select, .con-error textarea { border-color: var(--c-error); box-shadow: var(--anillo-error); }

/* Campos que se responden juntos (próximo paso y su fecha). */
.grupo { margin: 0 0 16px; padding: 12px; background: var(--c-tenue); border: 1px solid var(--c-borde); border-radius: var(--r-sm); }
.grupo .campo { margin-bottom: 12px; }
.grupo.con-error { background: var(--c-error-fondo); border-color: var(--c-error-borde); }

/* Bloques plegables. */
summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--c-txt); list-style: none; user-select: none; border-radius: var(--r-xs); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 4px auto; border-right: 1.5px solid var(--c-txt-suave); border-bottom: 1.5px solid var(--c-txt-suave); transform: rotate(45deg); transition: transform var(--t) var(--ritmo); }
details[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
details[open] > summary { margin-bottom: 8px; }
details.tarjeta { padding-top: 4px; padding-bottom: 4px; }
details.tarjeta > summary { font-weight: 600; }
details.tarjeta[open] { padding-bottom: 16px; }
.tarjeta details { margin-top: 12px; border-top: 1px solid var(--c-borde); }
form details { margin: 0 0 16px; border-bottom: 1px solid var(--c-borde); }
details > .menor { margin-bottom: 16px; }

/* Estado vacío: ícono en su recuadro, título y una frase, dentro de una caja punteada. */
.vacio { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 16px; border: 1px dashed var(--c-borde-fuerte); border-radius: var(--r); }
.vacio-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--c-txt-medio); background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: 10px; box-shadow: var(--sombra); }
.vacio-texto { min-width: 0; }
.vacio-texto strong { display: block; font-size: 15px; line-height: 1.35; }
.vacio-texto p { margin: 2px 0 0; }
.vacio-texto .boton { margin-top: 16px; }
.vacio-exito { background: var(--c-exito-fondo); border: 1px solid var(--c-exito-borde); }
.vacio-exito .vacio-icono { color: var(--c-exito); border-color: var(--c-exito-borde); }
.vacio-exito strong { color: var(--c-exito); }
/* Variante de página completa: centrada y con aire. */
.vacio-amplio { flex-direction: column; padding: 48px 24px; text-align: center; background: var(--c-sup); }
.vacio-amplio .vacio-icono { width: 48px; height: 48px; }

/* Tabla: se desliza dentro de su caja; encabezados discretos; cifras a la derecha. */
.tarjeta.tabla-caja { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
th { padding: 10px 16px; font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; color: var(--c-txt-suave); background: var(--c-realce); }
td { padding: 12px 16px; text-align: left; white-space: nowrap; border-top: 1px solid var(--c-borde); }
.tabla-cifras th:nth-child(n+3), .tabla-cifras td:nth-child(n+3) { text-align: right; }
.tabla-cifras td:nth-child(3) { font-weight: 600; }

/* Línea de tiempo: un punto por contacto, del más reciente al más antiguo. */
.linea-tiempo { position: relative; margin: 0; padding: 0 0 0 24px; list-style: none; }
.linea-tiempo::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: 20px; width: 1px; background: var(--c-borde-fuerte); opacity: .5; }
.suceso { position: relative; }
.suceso::before { content: ""; position: absolute; left: -24px; top: 20px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-borde-fuerte); border: 2px solid var(--c-fondo); box-shadow: 0 0 0 1px var(--c-borde-fuerte); }
.suceso-alerta::before { background: var(--c-primario); box-shadow: 0 0 0 1px var(--c-alerta); }
.suceso-exito::before { background: var(--c-exito); box-shadow: 0 0 0 1px var(--c-exito); }
.suceso-error::before { background: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.suceso .tarjeta { display: grid; gap: 6px; font-size: 15px; }
.suceso-persona { font-weight: 500; }

/* ---------- Renglón de empresa ---------- */

/* En celular es una tarjeta: nombre, datos suaves, pastillas, nota y los dos botones de contacto. */
.empresa { position: relative; display: grid; gap: 12px; padding: 14px 16px 16px; transition: background-color var(--t) var(--ritmo), border-color var(--t) var(--ritmo); }
.empresa-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
/* El nombre y las pastillas comparten renglón en el marcado; aquí se reordenan: nombre, datos suaves, pastillas, nota. */
.empresa .fila { display: contents; }
.empresa-nombre { order: 1; flex: 1 1 100%; display: flex; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.35; letter-spacing: -.01em; color: var(--c-txt); text-decoration: none; }
/* Toda la tarjeta lleva a la ficha: el dedo no tiene que atinarle al nombre. */
.empresa-nombre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.empresa-nombre::before { content: ""; order: 2; flex: none; width: 7px; height: 7px; margin: 7px 4px 0 0; border-top: 1.5px solid var(--c-borde-fuerte); border-right: 1.5px solid var(--c-borde-fuerte); transform: rotate(45deg); }
/* Los datos suaves se separan con un punto medio. Cada dato reserva a su izquierda el hueco del punto y el renglón
   recorta ese hueco: así el punto nunca queda colgando al inicio de una línea. */
.empresa-meta { order: 2; flex: 1 1 100%; display: flex; flex-wrap: wrap; margin-left: -16px; clip-path: inset(0 0 0 16px); }
.empresa-meta span { position: relative; padding-left: 16px; }
.empresa-meta span:empty { display: none; }
.empresa-meta span::before { content: "·"; position: absolute; left: 0; width: 16px; text-align: center; }
.empresa-pastillas { order: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.empresa-nota { order: 4; flex: 1 1 100%; margin-top: 2px; padding: 8px 10px; border-radius: var(--r-xs); color: var(--c-txt-medio); background: var(--c-tenue); }
/* Llamar y WhatsApp: dos botones del mismo ancho, por encima del enlace que cubre la tarjeta. */
.empresa .acciones { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; margin: 0; }

/* Vencido: franja roja a la izquierda y la nota en rojo, además del título del bloque que lo dice. */
.empresa.vencido { box-shadow: inset 3px 0 0 var(--c-error), var(--sombra); }
.empresa.vencido .empresa-nota { font-weight: 500; color: var(--c-error-txt); background: var(--c-error-fondo); }

/* El encabezado de columnas solo existe cuando las empresas son renglones de tabla. */
.lista-encabezado { display: none; }

/* ---------- Pantallas ---------- */

/* Hoy. */
.saludo { margin-bottom: 16px; }
.saludo h1 { margin-bottom: 2px; }

/* Tarjetas de cifra: rótulo pequeño, número grande con cifras tabulares y una línea de contexto.
   En celular las tres comparten una sola tarjeta con divisiones; en pantallas anchas se separan. */
.resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 24px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.cifra { display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 12px; text-decoration: none; color: var(--c-txt); transition: background-color var(--t) var(--ritmo), border-color var(--t) var(--ritmo); }
.cifra + .cifra { border-left: 1px solid var(--c-borde); }
.cifra-rotulo { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--c-txt-suave); }
.cifra-rotulo .icono { display: none; width: 16px; height: 16px; }
.cifra b { font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.cifra-contexto { font-size: 12px; line-height: 1.3; color: var(--c-txt-suave); }
.cifra-error b { color: var(--c-error-txt); }
.cifra-error .icono { color: var(--c-error); }
.cifra-alerta b { color: var(--c-alerta-txt); }
.cifra-alerta .icono { color: var(--c-primario-osc); }
.cifra-en-cero b { color: var(--c-txt-suave); }

.bloque { margin: 0 0 28px; scroll-margin-top: 16px; }
.bloque h2 { display: flex; align-items: center; gap: 10px; }
.bloque h2 .icono { width: 28px; height: 28px; padding: 5px; border-radius: var(--r-sm); color: var(--c-txt-medio); background: var(--c-sup); border: 1px solid var(--c-borde); }
.bloque-vencidos h2 .icono { color: var(--c-error-txt); background: var(--c-error-fondo); border-color: var(--c-error-borde); }
.bloque-de-hoy h2 .icono { color: var(--c-alerta-txt); background: var(--c-alerta-fondo); border-color: var(--c-alerta-borde); }
/* Sin pendientes, el título del bloque no tiene por qué alarmar. */
.bloque:has(> .vacio) h2 .icono { color: var(--c-txt-medio); background: var(--c-sup); border-color: var(--c-borde); }
.bloque-de-hoy .empresa { box-shadow: inset 3px 0 0 var(--c-primario), var(--sombra); }
.bloque-de-hoy .empresa-nota { font-weight: 500; color: var(--c-alerta-txt); background: var(--c-alerta-fondo); }
.bloque h2 + h3 { margin-top: 4px; }
.ver-todas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ver-todas a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 500; }

/* Lista de empresas. */
.filtros .campo-buscar { margin-bottom: 8px; }
.plegable-filtros { border-top: 1px solid var(--c-borde); }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; font-size: 12px; font-weight: 600; color: var(--c-sobre-accion); background: var(--c-accion); border-radius: var(--r-pastilla); }
.contador-en-cero { display: none; }
.filtros .acciones { margin-top: 12px; }
.filtros .acciones button { flex: 1 1 0; }

.resultados { position: relative; transition: opacity var(--t) var(--ritmo); }
.conteo { margin: 20px 0 12px; font-size: 14px; color: var(--c-txt-suave); }
.conteo strong { margin-right: 2px; font-size: 20px; letter-spacing: -.02em; color: var(--c-txt); }

.asignar label { margin-bottom: 8px; }
.asignar .acciones { margin-top: 0; }
.asignar .acciones select { flex: 1 1 200px; width: auto; }
.asignar .menor { margin-top: 12px; }

.paginacion { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.paginacion .boton { min-height: 48px; }
.paginacion-donde { font-weight: 500; }

/* Ficha. */
.ficha-cabecera h1 { margin-bottom: 8px; }
.tarjeta.proximo { margin: 16px 0 0; padding: 10px 12px; font-size: 15px; box-shadow: none; background: var(--c-tenue); border-radius: var(--r-sm); }
.proximo .etiqueta { margin-right: 4px; background: var(--c-sup); }
.proximo-vencido { color: var(--c-error-txt); background: var(--c-error-fondo); border-color: var(--c-error-borde); }
.proximo-hoy { color: var(--c-alerta-txt); background: var(--c-alerta-fondo); border-color: var(--c-alerta-borde); }
/* Antes de llamar, llamar es la acción principal; registrar el contacto ocupa el renglón completo, igual de a la mano. */
.contacto-rapido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 16px; }
.contacto-rapido .boton { min-height: 48px; }
.contacto-rapido .registrar-salto { grid-column: 1 / -1; }
.contacto-rapido .llamar, .contacto-rapido .registrar-salto:only-child { color: var(--c-sobre-accion); background: var(--c-accion); border-color: transparent; }

.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.ficha-columna { min-width: 0; }

.datos { display: grid; gap: 12px; margin: 0; }
.datos > div { display: grid; gap: 2px; }
dt { font-size: 13px; line-height: 1.4; color: var(--c-txt-suave); }
dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.datos + .menor, .redes + .menor { margin-top: 12px; }
.redes { margin: 8px 0 0 -12px; }
.redes:not(:has(a)) { display: none; }
.lista-simple { margin: 4px 0 8px; padding-left: 20px; font-size: 15px; }

.razones p { font-size: 15px; }
.razones p + p { margin-top: 12px; }

.campo-principal select { min-height: 48px; font-weight: 500; }
.registrar .acciones { margin-top: 20px; }
.registrar .acciones button { width: 100%; min-height: 48px; font-size: 16px; }
/* Mientras se guarda, el botón queda apagado: un doble toque no registra dos contactos. */
.htmx-request button { opacity: .6; cursor: progress; }

pre.guion { margin: 0 0 16px; padding: 12px 14px; font: inherit; font-size: 15px; white-space: pre-wrap; background: var(--c-tenue); border: 1px solid var(--c-borde); border-radius: var(--r-sm); }
details h2 { margin: 16px 0 8px; font-size: 14px; }

.historial { margin-top: 24px; }

/* Usuarios. */
.entrada { margin: -8px 0 20px; }
.alta .acciones { margin-top: 4px; }
.alta .acciones button { width: 100%; }
.alta + h2 { margin-top: 28px; }
.persona-correo { flex: 1 1 100%; }
.persona-de-baja { background: var(--c-realce); box-shadow: none; }
.persona-de-baja strong { color: var(--c-txt-suave); }
.persona-de-baja .avatar { opacity: .6; }
.cambio-rol { flex: 1 1 100%; flex-wrap: nowrap; margin: 0; }
.cambio-rol select { flex: 1 1 0; min-width: 0; }

/* Bienvenida y avisos de página completa: la marca, un mensaje y un solo botón, sobre una trama de puntos. */
.centrada main { display: grid; align-content: center; justify-items: center; min-height: 70vh; }
.sin-sesion.centrada { background-image: radial-gradient(var(--c-borde) 1px, transparent 1px); background-size: 20px 20px; }
.sin-sesion.centrada main { min-height: 100vh; min-height: 100dvh; }
.tarjeta.portada { width: 100%; max-width: 400px; margin: 0; padding: 32px 24px; text-align: center; box-shadow: var(--sombra-alta); }
.portada .marca { flex-direction: column; gap: 12px; margin-bottom: 24px; font-size: 14px; font-weight: 500; color: var(--c-txt-suave); }
.portada .marca-sello { width: 44px; height: 44px; font-size: 20px; border-radius: var(--r); }
.portada .marca-area { color: var(--c-primario-osc); }
.portada h1 { margin-bottom: 8px; font-size: 22px; }
.portada > p:not([class]) { font-size: 15px; color: var(--c-txt-suave); }
.portada .aviso { margin-top: 16px; }
.portada form { margin-top: 20px; text-align: left; }
.portada .acciones { margin-top: 24px; }
.portada .acciones + .acciones { margin-top: 8px; }
.portada form .acciones { margin-top: 0; }
.portada .acciones > * { width: 100%; min-height: 48px; }

/* ---------- Estados ---------- */

/* Foco visible: contorno casi negro sobre claro, ámbar sobre la barra oscura; en los campos, borde y anillo de 3px. */
:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.barra :focus-visible { outline-color: var(--c-primario); }
.secciones :focus-visible { outline-color: var(--c-foco); outline-offset: -4px; border-radius: var(--r-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid transparent; outline-offset: 0; border-color: var(--c-foco); box-shadow: var(--anillo); }
.con-error input:focus-visible, .con-error select:focus-visible, .con-error textarea:focus-visible { border-color: var(--c-error); box-shadow: var(--anillo-error); }
.empresa-nombre:focus-visible { outline: none; }
.empresa-nombre:focus-visible::after { outline: 2px solid var(--c-foco); outline-offset: -2px; }

/* Mientras HTMX pide resultados, la lista se atenúa y una barra recorre su borde superior. */
.resultados.htmx-request { opacity: .5; pointer-events: none; }
.resultados.htmx-request::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 40%; height: 2px; border-radius: 2px; background: var(--c-primario); animation: cargando 1s var(--ritmo) infinite; }
@keyframes cargando { from { transform: translateX(0); } to { transform: translateX(150%); } }

@media (hover: hover) {
  button:hover, .boton:hover { background: var(--c-accion-suave); }
  button.secundario:hover, .boton.secundario:hover { background: var(--c-tenue); border-color: var(--c-txt-suave); }
  button.fantasma:hover, .boton.fantasma:hover { color: var(--c-txt); background: var(--c-tenue); }
  button.peligro:hover { background: var(--c-error-fondo); border-color: var(--c-error); }
  .contacto-rapido .llamar:hover, .contacto-rapido .registrar-salto:only-child:hover { background: var(--c-accion-suave); border-color: transparent; }
  .barra .salir button:hover, .barra .tema:hover { color: var(--c-sobre-navy); background: var(--c-navy-suave); }
  .secciones a:hover { color: var(--c-txt); }
  .enlace-accion:hover { background: var(--c-tenue); }
  .empresa:hover { border-color: var(--c-borde-fuerte); }
  .cifra:hover { background: var(--c-tenue); }
  tbody tr { transition: background-color var(--t) var(--ritmo); }
  tbody tr:hover { background: var(--c-realce); }
  input:hover, select:hover, textarea:hover { border-color: var(--c-txt-suave); }
}

/* ---------- Pantallas anchas ---------- */

@media (min-width: 480px) {
  .cifra { padding: 16px; }
  .cifra-rotulo { font-size: 13px; }
  .cifra-rotulo .icono { display: block; }
}

@media (min-width: 600px) {
  .rejilla { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .datos > div { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .alta .acciones button, .filtros .acciones button { flex: none; width: auto; }
  .persona { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
  .persona > .fila { flex: 1 1 260px; }
  .persona > .acciones { margin: 0; }
  .persona-correo { flex: none; }
  .cambio-rol { flex: none; }
  .cambio-rol select { flex: none; width: 168px; }
  .vacio-amplio { padding: 64px 24px; }
}

@media (min-width: 768px) {
  main { padding: 28px 24px; }
  h1 { font-size: 24px; }
  .tarjeta { padding: 20px; }
  details.tarjeta { padding-top: 6px; padding-bottom: 6px; }
  details.tarjeta[open] { padding-bottom: 20px; }
  .suceso .tarjeta { padding: 16px; }

  /* Las cifras se separan en tres tarjetas. */
  .resumen { gap: 16px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .cifra, .cifra + .cifra { min-height: 124px; padding: 20px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra); }
  .cifra b { font-size: 36px; }
  .cifra-contexto { font-size: 13px; }

  .empresa { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 16px 20px; }
  .empresa .acciones { grid-template-columns: 124px 124px; }
  .empresa-nombre::before { display: none; }

  /* Con espacio de sobra los filtros quedan a la vista: app.js abre el bloque y aquí se oculta su encabezado. */
  .filtros .abierto-fijo { margin: 0; border: 0; }
  .abierto-fijo > summary { display: none; }
  .filtros .campo-buscar { margin-bottom: 16px; }
  .filtros .acciones { margin-top: 0; }
  .asignar .acciones select { flex: 0 1 360px; }

  .paginacion { grid-template-columns: 140px auto 140px; justify-content: space-between; }
  .paginacion .boton { min-height: var(--toque); }

  /* Con ancho de sobra los tres botones de la ficha caben en un renglón, cada uno a su medida. */
  .contacto-rapido { display: flex; }
  .contacto-rapido .boton { min-height: var(--toque); }

  /* Quién puede entrar: las personas se juntan en una sola lista con divisiones. */
  .persona { margin: 0; padding: 14px 20px; border-radius: 0; box-shadow: none; }
  .persona + .persona { border-top: 0; }
  .persona:not(.persona + .persona) { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
  .persona:not(:has(+ .persona)) { margin-bottom: 12px; border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
}

@media (min-width: 1024px) {
  /* La barra se vuelve lateral y fija: marca arriba, secciones con ícono, y abajo quién entró y cómo salir. */
  .con-sesion { padding-left: var(--ancho-lateral); }
  .con-sesion main { padding: 32px 32px 56px; }
  .barra { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: var(--ancho-lateral); overflow-y: auto; box-shadow: 1px 0 0 var(--c-barra-borde); }
  .barra-interior { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; min-height: 100%; padding: 16px 12px; }
  .barra .marca { padding: 4px 8px 20px; }
  .barra .marca-sello { width: 32px; height: 32px; }
  .barra .marca-nombre { display: grid; }
  .barra .marca-area { font-size: 12px; color: var(--c-sobre-navy-suave); }
  .barra .marca-area::before { content: none; }

  .secciones { position: static; display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
  .secciones a { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: var(--toque); padding: 0 12px; font-size: 14px; color: var(--c-sobre-navy-suave); border-radius: var(--r-sm); transition: color var(--t) var(--ritmo), background-color var(--t) var(--ritmo); }
  .secciones .icono { width: 18px; height: 18px; }
  /* La sección actual: fondo más claro, texto blanco y la marca ámbar a la izquierda. */
  .secciones a::before { top: 50%; left: 0; width: 3px; height: 20px; margin: -10px 0 0; border-radius: 0 3px 3px 0; }
  .secciones a[aria-current="page"] { color: var(--c-sobre-navy); font-weight: 500; background: var(--c-navy-suave); }
  .secciones a[aria-current="page"] .icono { color: var(--c-primario); }
  .secciones :focus-visible { outline-color: var(--c-primario); outline-offset: 2px; }

  .barra-pie { flex-direction: column; align-items: stretch; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-navy-suave); }
  .quien { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 6px; padding: 4px 8px; }
  .quien .avatar { color: var(--c-sobre-navy); background: var(--c-navy-suave); border-color: var(--c-navy-borde); }
  .quien-datos { display: grid; min-width: 0; line-height: 1.3; }
  .quien-nombre { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  .quien-rol { font-size: 12px; color: var(--c-sobre-navy-suave); }
  .barra .salir button, .barra .tema { justify-content: flex-start; width: 100%; padding: 0 12px; font-size: 14px; color: var(--c-sobre-navy-suave); }
  .barra .tema .icono { width: 18px; height: 18px; }
  .barra .tema-rotulo { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .bloque { scroll-margin-top: 24px; }
  #sin-conexion { top: 16px; }

  /* Ficha en dos columnas: a la izquierda lo que se consulta, a la derecha lo que se registra. */
  .ficha-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .historial { margin-top: 28px; }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* Con ratón los controles pueden ser más compactos que con el dedo. */
  .secciones a { min-height: 40px; }
  .salir button, .barra .tema { min-height: 40px; }
  .secciones a:hover { color: var(--c-sobre-navy); background: var(--c-navy-suave); }
}

@media (min-width: 1280px) {
  /* Cabecera de la ficha: a la izquierda quién es, a la derecha cómo contactarla. */
  .ficha-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 24px; }
  .ficha-cabecera > * { grid-column: 1; }
  .ficha-cabecera .proximo { grid-column: 1 / -1; }
  .ficha-cabecera .contacto-rapido { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; margin: 0; }

  /* Las empresas pasan de tarjetas a renglones de tabla dentro de una sola tarjeta, sobre el mismo marcado:
     cada pieza del renglón toma su columna. Las columnas tienen ancho fijo o proporcional (nunca según su contenido)
     para que todos los renglones, que son rejillas independientes, queden alineados entre sí y con el encabezado. */
  .resultados, .bloque {
    --columnas: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 96px 156px 96px;
    --areas: "nombre segmento lugar ola pastillas acciones";
  }
  .resultados:has(.empresa-nota), .bloque:has(.empresa-nota) {
    --columnas: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.1fr) 92px 148px minmax(0, 1.3fr) 96px;
    --areas: "nombre segmento lugar ola pastillas nota acciones";
  }
  /* En «Hoy» la nota es el próximo paso prometido: merece más ancho que el segmento. */
  .bloque:has(.empresa-nota) { --columnas: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr) 92px 148px minmax(0, 1.9fr) 96px; }
  .lista-encabezado, .empresa { display: grid; grid-template-columns: var(--columnas); column-gap: 16px; align-items: center; }
  .lista-encabezado { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--c-txt-suave); background: var(--c-realce); border: 1px solid var(--c-borde); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
  .enc-acciones { text-align: right; }

  .empresa { grid-template-areas: var(--areas); row-gap: 0; min-height: 60px; margin: 0; padding: 8px 16px; font-size: 14px; border-radius: 0; box-shadow: none; }
  .empresa + .empresa { border-top: 0; }
  .empresa:not(.empresa + .empresa) { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
  .lista-encabezado + .empresa { border-top-left-radius: 0; border-top-right-radius: 0; }
  .empresa:not(:has(+ .empresa)) { margin-bottom: 12px; border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
  .empresa-datos, .empresa-meta { display: contents; }
  .empresa-nombre { grid-area: nombre; display: block; font-size: 14px; }
  .empresa-meta span { padding-left: 0; font-size: 13px; line-height: 1.35; }
  .empresa-meta span::before { content: none; }
  .empresa-meta span:empty { display: block; }
  .meta-segmento { grid-area: segmento; color: var(--c-txt-medio); }
  .meta-lugar { grid-area: lugar; }
  .meta-ola { grid-area: ola; white-space: nowrap; }
  .meta-ola:empty::before { content: "—"; }
  .empresa-pastillas { grid-area: pastillas; }
  .empresa-nota { grid-area: nota; margin: 0; padding: 0; font-size: 13px; background: none; }
  .empresa.vencido .empresa-nota, .bloque-de-hoy .empresa-nota { background: none; }
  .empresa .acciones { grid-area: acciones; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; }
  /* En el renglón los dos botones se reducen a su ícono; el texto sigue en el marcado para los lectores de pantalla. */
  .empresa .acciones .boton { flex: none; width: var(--toque); padding: 0; font-size: 0; color: var(--c-txt-medio); border-color: var(--c-borde); }
  .empresa.vencido { box-shadow: inset 3px 0 0 var(--c-error); }
  .bloque-de-hoy .empresa { box-shadow: inset 3px 0 0 var(--c-primario); }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  /* Renglones de tabla más compactos con ratón. */
  .empresa { min-height: 52px; }
  .empresa .acciones .boton { width: 36px; min-height: 36px; }
  .empresa:hover { background: var(--c-realce); border-color: var(--c-borde); }
}

/* ---------- Embudo de ventas ---------- */

/* Las pantallas de tablero usan todo el ancho; su título comparte renglón con su control (vendedor o periodo). */
.pagina-ancha main { max-width: none; }
.encabezado-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.encabezado-pagina h1 { margin: 0; }
.filtro-en-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.filtro-en-linea label { flex: 1 1 100%; margin: 0; color: var(--c-txt-suave); }
.filtro-en-linea select { flex: 1 1 180px; width: auto; }

/* Cifras del embudo: las mismas tarjetas de cifra, en rejilla de dos columnas en celular. Aquí informan, no enlazan. */
.resumen-amplio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.resumen-amplio .cifra, .resumen-amplio .cifra + .cifra { min-height: 0; padding: 12px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra); }
.resumen-amplio .cifra-rotulo .icono { display: block; }
.resumen-amplio .cifra b { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cifra-exito b { color: var(--c-exito); }
.cifra-exito .icono { color: var(--c-exito); }

/* Cada etapa tiene su color: la línea superior de su columna y su punto. El nombre siempre lo acompaña. */
.etapa-sin_contactar, [data-etapa="sin_contactar"] { --etapa: var(--c-etapa-sin); }
.etapa-contactado, [data-etapa="contactado"] { --etapa: var(--c-etapa-contactado); }
.etapa-interesado, [data-etapa="interesado"] { --etapa: var(--c-etapa-interesado); }
.etapa-cotizacion, [data-etapa="cotizacion"] { --etapa: var(--c-etapa-cotizacion); }
.etapa-negociacion, [data-etapa="negociacion"] { --etapa: var(--c-etapa-negociacion); }
.etapa-ganado, [data-etapa="ganado"] { --etapa: var(--c-etapa-ganado); }
.etapa-perdidos, [data-etapa="perdidos"] { --etapa: var(--c-etapa-perdidos); }
.etapa-punto { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--etapa, var(--c-borde-fuerte)); }

/* Franja de etapas, deslizable y pegada arriba. En celular elige la columna que se ve; sin JavaScript salta a ella. */
.etapas { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; margin: 0 -16px 12px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; background: var(--c-fondo); }
.etapas::-webkit-scrollbar { display: none; }
.etapa { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: var(--toque); padding: 0 14px; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--c-txt-medio); background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r-pastilla); transition: background-color var(--t) var(--ritmo), color var(--t) var(--ritmo); }
.etapa-conteo { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--c-txt-suave); }
.etapa[aria-current] { font-weight: 600; color: var(--c-sobre-accion); background: var(--c-accion); border-color: transparent; }
.etapa[aria-current] .etapa-conteo { color: inherit; }
.etapa[aria-current] .etapa-punto { background: currentColor; }

/* Columnas. En celular van una bajo otra (o una sola a la vez, la elegida en la franja). */
.embudo { display: grid; gap: 12px; }
.columna { position: relative; min-width: 0; margin: 0; background: var(--c-carril); border: 1px solid var(--c-borde); border-top: 3px solid var(--etapa); border-radius: var(--r); scroll-margin-top: 72px; transition: background-color var(--t) var(--ritmo), box-shadow var(--t) var(--ritmo); }
.columna-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; padding: 10px 12px 8px; }
.columna-titulo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--c-txt); }
.columna-conteo { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-txt-medio); background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r-pastilla); }
.columna-suma { margin: 0; font-size: 13px; }
.columna-suma abbr { font-size: 11px; text-decoration: none; }
.columna-lista { display: grid; align-content: start; gap: 8px; padding: 0 8px 8px; }
.columna-lista > .menor { margin: 0; padding: 2px 4px; font-size: 13px; }
.columna-lista > .columna-vacia { padding: 20px 12px; text-align: center; border: 1px dashed var(--c-borde-fuerte); border-radius: var(--r-sm); }
/* La invitación a soltar solo se muestra donde se puede arrastrar (embudo.js lo marca en el tablero). */
.columna-suelta { display: none; }
[data-arrastre] span.columna-suelta { display: inline; }
[data-arrastre] p.columna-suelta { display: block; margin: 0 8px 8px; padding: 14px 12px; text-align: center; font-size: 13px; border: 1px dashed var(--c-borde-fuerte); border-radius: var(--r-sm); }
.columna > details > summary { margin: 0; }

/* Tarjeta del embudo: compacta. Nombre (lleva a la ficha), municipio, monto, próximo paso y el control para moverla. */
.columna .tarjeta { display: grid; gap: 6px; margin: 0; padding: 12px; font-size: 14px; border-radius: 10px; transition: box-shadow var(--t) var(--ritmo), opacity var(--t) var(--ritmo), border-color var(--t) var(--ritmo); }
.columna .tarjeta h3 { display: block; margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--c-txt); }
.columna .tarjeta h3::after { content: none; }
/* El enlace gana alto de toque con relleno que no ocupa lugar. */
.columna .tarjeta h3 a { display: block; margin: -13px 0; padding: 13px 0; color: inherit; text-decoration: none; }
.tarjeta-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.tarjeta-monto { font-size: 15px; }
.tarjeta-paso, .tarjeta-bloqueo { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; }
.tarjeta-paso > .icono, .tarjeta-bloqueo > .icono { width: 14px; height: 14px; margin-top: 2px; }
.tarjeta-paso .etiqueta { margin-right: 4px; }
.paso-atrasado { color: var(--c-error-txt); }
.paso-de-hoy { color: var(--c-alerta-txt); }
.columna .tarjeta:has(.paso-atrasado) { box-shadow: inset 3px 0 0 var(--c-error), var(--sombra); }

/* «Mover a…»: un menú; al elegir destino aparece el botón, y el motivo solo si el destino es Perdidos.
   Donde el navegador no entiende :has() se ven los tres controles, que es como funciona sin estilos. */
.mover { display: grid; gap: 6px; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--c-borde); }
.mover:has([name="destino"]:invalid) button { display: none; }
.mover:not(:has(option[value="perdidos"]:checked)) [name="motivo"] { display: none; }

/* Arrastre: la tarjeta se levanta, su hueco queda punteado y las columnas que la reciben se marcan. */
.columna .tarjeta[draggable="true"] { cursor: grab; }
.columna .tarjeta.levantada { box-shadow: var(--sombra-alta); transform: rotate(1.5deg); }
.columna .tarjeta.arrastrando { opacity: .45; border-style: dashed; border-color: var(--c-borde-fuerte); box-shadow: none; }
.columna.recibe { outline: 1px dashed var(--c-borde-fuerte); outline-offset: 2px; }
.columna.sobre { background: var(--c-sup); outline: 2px solid var(--etapa); outline-offset: 2px; box-shadow: var(--sombra-alta); }
.columna .tarjeta.recien { animation: recien 1.4s var(--ritmo); }
@keyframes recien { from { box-shadow: var(--anillo); border-color: var(--c-foco); } to { box-shadow: var(--sombra); border-color: var(--c-borde); } }

/* Mientras el servidor responde, el tablero se atenúa y no acepta otro movimiento. */
#tablero { position: relative; }
#tablero[aria-busy="true"] .embudo { opacity: .55; pointer-events: none; }
#tablero[aria-busy="true"]::before { content: ""; position: absolute; top: 0; left: 0; z-index: 6; width: 40%; height: 2px; border-radius: 2px; background: var(--c-primario); animation: cargando 1s var(--ritmo) infinite; }

/* Avisos del embudo: flotan en su contenedor fijo, fuera del flujo, sobre la barra inferior del celular. Que uno
   aparezca o se retire no mueve el tablero: quien arrastra tiene el puntero sobre una tarjeta. */
.avisos-flotantes { position: fixed; z-index: 30; right: 16px; bottom: calc(var(--alto-secciones) + 12px + env(safe-area-inset-bottom, 0px)); left: 16px; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.avisos-flotantes .aviso { flex-wrap: wrap; width: 100%; max-width: 440px; margin: 0; pointer-events: auto; box-shadow: var(--sombra-alta); }
.avisos-flotantes .aviso > span { flex: 1 1 180px; min-width: 0; }
.avisos-flotantes .aviso > button { margin-left: auto; }

/* Diálogo del motivo de pérdida. */
.dialogo { width: min(420px, calc(100vw - 32px)); padding: 0; color: var(--c-txt); background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: 16px; box-shadow: var(--sombra-alta); }
.dialogo[open] { animation: aparecer var(--t) var(--ritmo); }
.dialogo::backdrop { background: var(--c-velo); }
.dialogo form { display: grid; gap: 12px; padding: 24px; }
.dialogo h2 { margin: 0; font-size: 18px; }
.dialogo .acciones { justify-content: flex-end; margin-top: 4px; }
.opciones { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: var(--toque); margin: 0; padding: 0 12px; font-size: 15px; border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--t) var(--ritmo), background-color var(--t) var(--ritmo); }
.opcion:has(:checked) { background: var(--c-tenue); border-color: var(--c-foco); box-shadow: var(--anillo); }
.opcion [type="radio"] { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; box-shadow: none; accent-color: var(--c-accion); }

@media (max-width: 1023px) {
  /* Con embudo.js, en celular se ve una columna a la vez: deslizar de lado queda para la franja, no para la página. */
  #tablero[data-listo] .columna:not(.activa) { display: none; }

  /* «Más»: quinto destino de la barra inferior; abre hacia arriba las secciones de administración. */
  .mas { position: relative; min-width: 0; }
  .mas > summary { position: relative; flex-direction: column; justify-content: center; gap: 6px; min-height: var(--alto-secciones); margin: 0; padding: 8px 2px 6px; font-size: 11px; line-height: 1.2; color: var(--c-txt-suave); }
  .mas > summary::after { content: none; }
  .mas > summary::before { content: ""; position: absolute; top: 7px; left: 50%; width: 52px; height: 28px; margin-left: -26px; border-radius: var(--r-pastilla); background: transparent; transition: background-color var(--t) var(--ritmo); }
  .mas[open] > summary { margin-bottom: 0; }
  .mas[open] > summary, .mas-actual > summary { font-weight: 600; color: var(--c-txt); }
  .mas[open] > summary::before { background: var(--c-tenue); }
  .mas-actual > summary::before, .mas-actual[open] > summary::before { background: var(--c-primario); }
  .mas-actual > summary .icono { color: var(--c-sobre-primario); }
  .mas-lista { position: absolute; right: 8px; bottom: calc(100% + 8px); display: grid; gap: 2px; min-width: 208px; padding: 6px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra-alta); }
  .secciones .mas-lista a { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: var(--toque); padding: 0 12px; font-size: 15px; color: var(--c-txt-medio); border-radius: var(--r-sm); }
  .secciones .mas-lista a::before { content: none; }
  .secciones .mas-lista a[aria-current="page"] { color: var(--c-txt); background: var(--c-tenue); }
  .secciones .mas-lista a[aria-current="page"] .icono { color: var(--c-primario-osc); }
}

@media (min-width: 768px) {
  .encabezado-pagina { margin-bottom: 20px; }
  .filtro-en-linea label { flex: none; }
  .filtro-en-linea select { flex: none; width: 220px; }
  .etapas { margin: 0 -24px 12px; padding: 8px 24px; }
  .resumen-amplio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
  .resumen-amplio .cifra, .resumen-amplio .cifra + .cifra { min-height: 0; padding: 16px; }
  .resumen-amplio .cifra b { font-size: 22px; }
}

@media (min-width: 1024px) {
  /* Tablero: columnas lado a lado. Si no caben, se desliza el tablero, nunca la página; cada columna desliza su lista
     y deja fijo su encabezado. */
  .etapas { display: none; }
  .avisos-flotantes { right: 24px; bottom: 24px; left: auto; width: min(440px, calc(100vw - 48px)); justify-items: end; }
  .embudo { display: flex; align-items: stretch; gap: 12px; margin-right: -32px; padding: 4px 32px 12px 4px; margin-left: -4px; overflow-x: auto; }
  .columna { display: flex; flex: 1 0 256px; flex-direction: column; max-width: 360px; min-height: 320px; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
  .columna-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* «Perdidos» es un bloque plegable: desliza entero y su encabezado se queda pegado arriba. */
  .columna[data-etapa="perdidos"] { display: block; overflow-y: auto; scrollbar-width: thin; }
  .columna[data-etapa="perdidos"] summary { position: sticky; top: 0; z-index: 1; background: inherit; border-radius: var(--r); }
  .columna[data-etapa="perdidos"] .columna-lista { overflow: visible; }

  /* En la barra lateral «Más» deja de ser un menú: app.js lo abre y sus secciones se ven como las demás. */
  .mas > summary { gap: 10px; min-height: var(--toque); padding: 0 12px; font-size: 14px; color: var(--c-sobre-navy-suave); border-radius: var(--r-sm); }
  .mas[open] > summary { margin-bottom: 2px; }
  .mas-lista { display: grid; gap: 2px; }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mas > summary { min-height: 40px; }
  .mas > summary:hover { color: var(--c-sobre-navy); background: var(--c-navy-suave); }
  .columna .tarjeta h3 a:hover { text-decoration: underline; }
  .mover [name], .mover button { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  .segmento { min-height: 34px; }
}

@media (min-width: 1280px) {
  .resumen-amplio .cifra b { font-size: 24px; }
}

@media (min-width: 1600px) {
  .resumen-amplio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .resumen-amplio .cifra b { font-size: 20px; }
}

@media (hover: hover) {
  .resumen-amplio .cifra:hover { background: var(--c-sup); }
  .etapa:hover { color: var(--c-txt); border-color: var(--c-borde-fuerte); }
  .etapa[aria-current]:hover { color: var(--c-sobre-accion); border-color: transparent; }
  .segmento:hover { color: var(--c-txt); }
  .tabla-indicadores tbody tr:hover th { background: var(--c-realce); }
}

/* ---------- Indicadores por vendedor ---------- */

/* Periodo: control segmentado. El elegido se ve como una pieza levantada, y además lleva aria-current. */
.segmentos { display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; background: var(--c-tenue); border: 1px solid var(--c-borde); border-radius: 10px; }
.segmento { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: var(--toque); padding: 0 14px; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--c-txt-suave); border-radius: 7px; transition: background-color var(--t) var(--ritmo), color var(--t) var(--ritmo); }
.segmento[aria-current] { font-weight: 600; color: var(--c-txt); background: var(--c-sup); box-shadow: var(--sombra); }

/* Tabla densa: encabezado fijo arriba, vendedor fijo a la izquierda y total fijo abajo, todo dentro de su caja. */
.tabla-fija { max-height: min(72vh, 640px); overflow: auto; }
.tabla-indicadores th, .tabla-indicadores td { padding: 9px 14px; text-align: right; }
.tabla-indicadores th:first-child { text-align: left; }
.tabla-indicadores thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--c-borde); }
.tabla-indicadores th[scope="row"] { position: sticky; left: 0; z-index: 1; max-width: 200px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: var(--c-txt); background: var(--c-sup); border-top: 1px solid var(--c-borde); box-shadow: inset -1px 0 0 var(--c-borde); }
.tabla-indicadores thead th:first-child { left: 0; z-index: 3; box-shadow: inset -1px -1px 0 var(--c-borde); }
.tabla-indicadores tbody tr:first-child > * { border-top: 0; }
.tabla-indicadores th .etapa-punto { margin-right: 6px; }
/* El nombre del vendedor lleva a su embudo: gana alto de toque con relleno que no agranda el renglón. */
.tabla-indicadores th a { display: inline-block; margin: -14px 0; padding: 14px 0; }
.tabla-indicadores tfoot th, .tabla-indicadores tfoot td { position: sticky; bottom: 0; z-index: 2; font-weight: 600; color: var(--c-txt); background: var(--c-realce); border-top: 0; box-shadow: inset 0 1px 0 var(--c-borde-fuerte); }
.tabla-indicadores tfoot th[scope="row"] { z-index: 3; background: var(--c-realce); box-shadow: inset -1px 1px 0 var(--c-borde-fuerte); }
.tabla-indicadores .etiqueta { justify-content: center; min-width: 30px; }
.sin-dato, .en-cero { color: var(--c-txt-suave); }
/* Porcentaje con barra fina debajo: el número manda, la barra solo deja comparar de un vistazo. */
.celda-tasa { min-width: 132px; }
.tasa { display: block; }
.barra-fina { display: block; width: 96px; height: 4px; margin: 5px 0 0 auto; overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--c-tenue); border: 0; border-radius: var(--r-pastilla); }
.barra-fina::-webkit-progress-bar { background: var(--c-tenue); }
.barra-fina::-webkit-progress-value { background: var(--c-txt-suave); border-radius: var(--r-pastilla); }
.barra-fina::-moz-progress-bar { background: var(--c-txt-suave); border-radius: var(--r-pastilla); }
tfoot .barra-fina::-webkit-progress-value { background: var(--c-txt); }
tfoot .barra-fina::-moz-progress-bar { background: var(--c-txt); }

/* En celular, una tarjeta por vendedor con lo que más se consulta; las tablas completas quedan debajo. */
.vendedor h3 { display: block; margin: 0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--c-txt); }
.vendedor h3::after { content: none; }
.vendedor h3 a { display: inline-flex; align-items: center; min-height: var(--toque); margin: -12px 0; }
.vendedor-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 12px; }
.vendedor-cifras div { display: grid; gap: 1px; }
.vendedor-cifras dd { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vendedor-pendientes { margin: 0; }
@media (min-width: 768px) {
  .vendedores { display: none; }
}

/* ---------- Contador de pendientes en el menú ---------- */

/* Casillas y radios a su tamaño natural: el estilo general de los campos los estiraría a todo el ancho. */
[type="checkbox"], [type="radio"] { display: inline-block; flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; box-shadow: none; accent-color: var(--c-accion); }

/* En la barra inferior del celular es un globo ámbar sobre el ícono, con un cerco del color de la barra para que
   se distinga también cuando la sección está activa. El número siempre va acompañado de su texto para lectores. */
.secciones .contador { position: absolute; top: 4px; left: 50%; z-index: 2; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px; font-size: 11px; line-height: 1; color: var(--c-sobre-primario); background: var(--c-primario); box-shadow: 0 0 0 2px var(--c-sup); }
/* Dentro del menú «Más» y en la barra lateral va al final del renglón. */
.secciones .mas-lista .contador { position: static; margin-left: auto; box-shadow: none; }

/* ---------- Avisos de novedad ---------- */

/* «Hay N por revisar», «Te asignaron N» y el rótulo de la lista recién asignada: ícono en su recuadro ámbar,
   la frase, y la acción como botón a la derecha (o debajo, si no cabe). */
.aviso-novedad { flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.aviso-novedad > .icono { width: 32px; height: 32px; margin: 0; padding: 6px; color: var(--c-alerta-txt); background: var(--c-alerta-fondo); border: 1px solid var(--c-alerta-borde); border-radius: var(--r-sm); }
.aviso-novedad > span { flex: 1 1 180px; min-width: 0; }
.aviso-novedad > .boton { flex: none; margin-left: auto; }
.aviso-vista > .icono { color: var(--c-txt-medio); background: var(--c-tenue); border-color: var(--c-borde); }

/* ---------- Bandeja «Por revisar» ---------- */

/* Acciones sobre toda la lista: una sola barra, con Aceptar como acción principal. */
.en-bloque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.en-bloque-texto { flex: 1 1 280px; min-width: 0; }
.en-bloque-texto strong { display: block; font-size: 15px; }
.en-bloque-texto p { margin-top: 2px; }
.en-bloque-acciones { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.en-bloque-acciones > form { margin: 0; }

/* Descartar: un botón discreto que despliega el motivo. Solo el botón final lleva el tono de peligro. */
.descartar, .tarjeta .descartar { position: relative; min-width: 0; margin-top: 0; border-top: 0; }
.descartar > summary { margin: 0; }
.descartar > summary::after { content: none; }
.descartar[open] { flex: 1 1 100%; }
.descartar[open] > summary { margin: 0; background: var(--c-tenue); }
.descartar-forma { display: grid; margin: 8px 0 0; padding: 12px; text-align: left; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra-alta); }
.descartar-titulo { margin: 0 0 12px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.descartar-forma .campo { margin-bottom: 12px; }
.descartar-forma label .menor { font-size: 13px; font-weight: 400; }

/* Prioridad: de más a menos énfasis, sin colores de estado (no es ni éxito ni alerta). */
.prioridad::before { content: none; }
.prioridad-muy-alta { color: var(--c-sobre-accion); background: var(--c-accion); border-color: transparent; }
.prioridad-alta { color: var(--c-txt); border-color: var(--c-borde-fuerte); }
.prioridad-baja { color: var(--c-txt-suave); }

/* Cada empresa por revisar. En celular es una tarjeta con sus datos rotulados; todo lo necesario para decidir. */
.revisables-encabezado { display: none; }
.revisable { position: relative; display: grid; gap: 12px; padding: 16px; }
.rev-empresa { order: -2; min-width: 0; }
.rev-empresa h2 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.rev-razon { margin-top: 2px; overflow-wrap: anywhere; }
.rev-baja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rev-prioridad { display: flex; align-items: center; gap: 8px; order: -1; margin: 0; font-size: 14px; }
.rev-porcentaje { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--c-txt-suave); }
.rev-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.rev-datos > div { display: grid; gap: 1px; min-width: 0; }
.rev-datos dd { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.rev-contacto, .rev-notas { grid-template-columns: minmax(0, 1fr); }
.rev-notas { align-self: start; padding: 10px 12px; background: var(--c-tenue); border-radius: var(--r-sm); }
.rev-motivo dd { font-weight: 500; }
.rev-acciones { align-items: flex-start; margin: 0; padding-top: 12px; border-top: 1px solid var(--c-borde); }
.rev-acciones > form, .rev-acciones > .descartar { flex: 1 1 0; }
.rev-acciones > form > button, .rev-acciones > .descartar > summary { width: 100%; }
.rev-acciones > .descartar[open] { flex: 1 1 100%; }

/* ---------- Búsquedas ---------- */

/* La que está en curso: anillo que gira (quieto con «menos movimiento»), el paso actual y desde cuándo. */
.busqueda-en-curso { display: flex; align-items: center; gap: 16px; box-shadow: inset 3px 0 0 var(--c-primario), var(--sombra); }
.busqueda-en-curso-texto { min-width: 0; }
.busqueda-en-curso h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--c-txt-suave); }
.busqueda-paso { margin: 2px 0 4px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.actividad { flex: none; width: 28px; height: 28px; border: 3px solid var(--c-borde); border-top-color: var(--c-primario); border-radius: 50%; animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Formulario de fuentes: cada fuente es un renglón entero que se toca. Apagado se ve apagado, no roto. */
.lanzar-busqueda h2 { margin-bottom: 12px; }
.fuentes { min-width: 0; margin: 0; padding: 0; border: 0; }
.fuentes legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 500; }
.fuentes-opciones { display: grid; gap: 8px; margin-bottom: 12px; }
.fuentes .acciones { margin-top: 16px; }
.fuentes[disabled] .opcion { color: var(--c-txt-suave); background: var(--c-tenue); border-color: var(--c-borde); cursor: not-allowed; }
.fuentes[disabled] legend, .fuentes[disabled] > .menor { color: var(--c-txt-suave); }
/* Nota al pie del formulario, y su versión destacada para decir por qué está apagado. */
.nota { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--c-txt-suave); }
.nota > .icono { width: 16px; height: 16px; margin-top: 2px; }
.nota-destacada { margin: 0 0 16px; padding: 12px 14px; color: var(--c-txt-medio); background: var(--c-tenue); border: 1px solid var(--c-borde); border-radius: var(--r-sm); }

/* Historial: una tarjeta por búsqueda, con su estado en pastilla, quién, qué fuentes y cómo terminó. */
.titulo-seccion { margin: 28px 0 12px; }
.historial-busquedas { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.busqueda { display: grid; gap: 10px; min-width: 0; margin: 0; }
.busqueda-cuando { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.busqueda-fecha { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--c-txt-medio); }
.busqueda-datos { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.busqueda-datos > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.busqueda-datos dd { font-size: 14px; }
.busqueda-resultado { min-width: 0; }
.busqueda-resultado p { font-size: 15px; overflow-wrap: anywhere; }
.salida > summary { font-size: 14px; color: var(--c-txt-medio); }
/* La salida del motor: monoespaciada, sin partir renglones, con su propio desplazamiento en ambos sentidos. */
.salida-motor { max-height: 280px; margin: 0 0 4px; padding: 12px; overflow: auto; font: 12.5px/1.55 var(--fuente-mono); white-space: pre; tab-size: 4; color: var(--c-txt-medio); background: var(--c-carril); border: 1px solid var(--c-borde); border-radius: var(--r-sm); }

/* ---------- Publicaciones: el correo de aviso ---------- */

.tabla-cifras th, .tabla-cifras td { padding-right: 12px; padding-left: 12px; }
.tabla-cifras th:first-child, .tabla-cifras td:first-child { padding-left: 16px; }
.tabla-cifras th.celda-aviso, .tabla-cifras td.celda-aviso { min-width: 168px; max-width: 240px; text-align: left; white-space: normal; }
.celda-aviso .menor { display: block; margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }

@media (min-width: 600px) {
  .fuentes-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  /* Tarjeta a dos columnas: giro junto a ubicación, contacto junto a la verificación. */
  .revisable { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 20px; }
  .rev-empresa, .rev-prioridad, .rev-acciones { grid-column: 1 / -1; }
  .rev-acciones > form, .rev-acciones > .descartar { flex: none; }
  .rev-acciones > .descartar[open] { flex: 1 1 100%; }
  .rev-acciones > .descartar[open] > summary { width: auto; }
  .rev-acciones .descartar-forma { max-width: 360px; }
}

@media (min-width: 1024px) {
  .secciones .contador { position: static; margin-left: auto; box-shadow: none; }
  /* Historial en renglones: cuándo y estado, quién y fuentes, resultado. */
  .historial-busquedas { gap: 0; }
  .busqueda { grid-template-columns: 190px 230px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 20px; border-radius: 0; box-shadow: none; }
  .busqueda + .busqueda { border-top: 0; }
  .busqueda:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
  .busqueda:last-child { border-bottom-right-radius: var(--r); border-bottom-left-radius: var(--r); }
  .busqueda-datos { display: grid; gap: 4px; }
}

@media (min-width: 1280px) {
  /* Bandeja como tabla densa sobre el mismo marcado: cada grupo de datos toma su columna y el encabezado se queda
     pegado arriba al bajar. Columnas fijas o proporcionales para que todos los renglones queden alineados. */
  .resultados { --rev-columnas: minmax(0, 1.6fr) minmax(0, 1.15fr) minmax(0, 1.1fr) 84px minmax(0, 1.5fr) minmax(0, 1.6fr) 116px; }
  .revisables-encabezado, .revisable { display: grid; grid-template-columns: var(--rev-columnas); column-gap: 14px; }
  .revisables-encabezado { position: sticky; top: 0; z-index: 4; align-items: center; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--c-txt-suave); background: var(--c-realce); border: 1px solid var(--c-borde); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
  .revisable { align-items: start; row-gap: 0; margin: 0; padding: 12px 16px; border-radius: 0; box-shadow: none; }
  .revisable + .revisable { border-top: 0; }
  .revisable:not(:has(+ .revisable)) { margin-bottom: 12px; border-bottom-right-radius: var(--r); border-bottom-left-radius: var(--r); }
  .rev-empresa, .rev-prioridad, .rev-acciones { grid-column: auto; order: 0; }
  .rev-empresa h2 { font-size: 14px; }
  .rev-razon, .rev-baja { font-size: 13px; }
  /* Los rótulos ya están en el encabezado: aquí quedan solo para lectores de pantalla. */
  .revisable dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rev-datos, .rev-contacto, .rev-notas { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rev-datos dd { font-size: 13px; line-height: 1.4; }
  .rev-suave { color: var(--c-txt-suave); }
  .rev-prioridad { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rev-notas { padding: 0; background: none; border-radius: 0; }
  .rev-motivo dd { margin-top: 4px; }
  .rev-motivo dd::before { content: "Motivo: "; font-weight: 400; color: var(--c-txt-suave); }
  .rev-acciones { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; }
  .rev-acciones > form > button, .rev-acciones > .descartar > summary { width: 100%; padding-right: 10px; padding-left: 10px; font-size: 14px; }
  .rev-acciones > .descartar[open] { flex: none; }
  .rev-acciones > .descartar[open] > summary { width: 100%; }
  /* En la tabla, y en la barra de toda la lista, el motivo se abre como un panel flotante bajo su botón. */
  .descartar[open] { flex: none; }
  .descartar-forma, .rev-acciones .descartar-forma { position: absolute; top: calc(100% + 6px); right: 0; z-index: 15; width: 320px; max-width: none; margin: 0; }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .revisable:hover { background: var(--c-realce); }
  .rev-acciones > form > button, .rev-acciones > .descartar > summary { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .aviso-novedad > .boton { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- Menos movimiento ---------- */

/* ---------- Inventario: existencias y escalas de precio ---------- */

/* Cabecera: título con el total y la fecha; el administrador tiene su barra fina al lado (debajo en celular). */
.inv-cabecera { display: grid; gap: 12px; align-items: end; margin-bottom: 4px; }
.inv-titulo h1 { margin-bottom: 2px; }
.inventario-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.inv-total strong { font-size: 18px; letter-spacing: -.02em; color: var(--c-txt); }
.inv-fecha { display: inline-flex; align-items: center; gap: 6px; }
.inventario-fecha .icono { width: 16px; height: 16px; }
.actualizacion-inventario { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 8px 12px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); }
.actualizacion-inventario .acciones { margin: 0; }
.inv-ultima, .inv-aviso { display: flex; flex: 1 1 220px; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--c-txt-suave); }
.inv-aviso .icono { flex: none; width: 16px; height: 16px; }
.inv-ultima .etiqueta { flex: none; }
.inv-ultima-texto { min-width: 0; }
.inv-ultima-fecha { flex: none; font-size: 13px; }
.actualizacion-inventario .salida { flex: 1 1 100%; margin: 0; }
/* La actualización en curso, en la misma barra: el anillo existente y una sola línea de texto. */
.actualizacion-inventario .tarjeta.busqueda-en-curso { flex: 1 1 auto; gap: 10px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.actualizacion-inventario .actividad { width: 20px; height: 20px; border-width: 2px; }
.actualizacion-inventario .busqueda-en-curso-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.actualizacion-inventario .busqueda-en-curso h2 { font-size: 14px; font-weight: 600; color: var(--c-txt); }
.actualizacion-inventario .busqueda-paso { margin: 0; font-size: 14px; font-weight: 500; }
.actualizacion-inventario .busqueda-en-curso-texto > .menor { margin: 0; font-size: 13px; }

/* Filtros: búsqueda, orden y los cinco filtros; «Quitar filtros» solo existe con filtros activos. */
.inv-barra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
.inv-barra .campo { margin-bottom: 8px; }
.inv-quitar:empty { display: none; }
.inv-quitar .boton { width: 100%; margin-bottom: 8px; }
.rejilla-inventario .campo:last-child { align-self: end; }

/* Lista: por omisión (celular y tableta) cada artículo es una tarjeta; desde 900 px, una tabla con el encabezado pegado. */
.inv-tabla { width: 100%; min-width: 0; font-size: 14px; }
.inv-tabla .num { font-variant-numeric: tabular-nums; }
.art-codigo { font-size: 16px; color: var(--c-txt); overflow-wrap: break-word; }
.art-nombre { font-size: 15px; font-weight: 500; color: var(--c-txt-medio); overflow-wrap: break-word; }
.art-clasificacion { font-size: 13px; color: var(--c-txt-suave); overflow-wrap: break-word; }
.art-rotulo { font-size: 12px; font-weight: 500; color: var(--c-txt-suave); }
.art-cifra b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.art-ubicaciones > summary { color: var(--c-txt-medio); font-size: 14px; }
.art-ubicaciones table { min-width: 0; margin: 0 0 4px; font-size: 13px; }
.art-ubicaciones th, .art-ubicaciones td { padding: 6px 8px; white-space: normal; }
.art-ubicaciones th { font-size: 12px; }
.art-ubicaciones .num { text-align: right; }

@media (max-width: 899.98px) {
  .inv-tabla, .inv-tabla tbody { display: block; }
  .inv-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .inv-tabla tr.articulo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin: 0 0 10px; padding: 14px 14px 10px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra); }
  .inv-tabla th.art-id, .inv-tabla td.art-existencia { grid-column: 1 / -1; padding: 0; text-align: left; white-space: normal; background: none; border: 0; }
  .inv-tabla th.art-id { display: flex; flex-direction: column; gap: 2px; }
  .inv-tabla td.art-existencia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin: 10px 0 2px; padding: 10px 0; border-top: 1px solid var(--c-borde); border-bottom: 1px solid var(--c-borde); }
  .art-cifra { display: flex; flex-direction: column; }
  .art-disponible b { font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--c-txt); }
  .art-fisico b { font-size: 18px; line-height: 1.3; font-weight: 500; color: var(--c-txt-medio); }
  .art-existencia .etiqueta { margin-left: auto; }
  .art-existencia .art-ubicaciones { flex: 1 1 100%; margin: 0; }
  .art-ubicaciones > summary { min-height: var(--toque); }
  .inv-tabla td.art-precio { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 0 0; border: 0; text-align: left; font-size: 15px; font-weight: 500; white-space: nowrap; }
  .art-precio::before { content: attr(data-rotulo); font-size: 12px; font-weight: 600; color: var(--c-txt-suave); }
  .art-precio.sin-dato { font-weight: 400; }
}

@media (min-width: 640px) and (max-width: 899.98px) {
  .inv-tabla tr.articulo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .inv-cabecera { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .actualizacion-inventario { max-width: 640px; }
  .inv-ultima-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inv-barra { grid-template-columns: minmax(0, 1fr) 220px auto; align-items: end; }
  .inv-quitar .boton { width: auto; }

  .inv-tabla { table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--r); box-shadow: var(--sombra); }
  .inv-tabla th:first-child { width: 31%; }
  .inv-tabla th:nth-child(2) { width: 176px; }
  .inv-tabla thead th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; font-size: 13px; white-space: nowrap; background: var(--c-realce); border: 0; box-shadow: inset 0 -1px 0 var(--c-borde-fuerte); }
  .inv-tabla thead th:first-child { border-top-left-radius: calc(var(--r) - 1px); }
  .inv-tabla thead th:last-child { border-top-right-radius: calc(var(--r) - 1px); }
  .inv-tabla thead th.num, .inv-tabla td.art-precio, .inv-tabla td.art-existencia { text-align: right; }
  .inv-tabla tbody th, .inv-tabla tbody td { padding: 12px; vertical-align: top; white-space: normal; background: none; border-top: 1px solid var(--c-borde); }
  .inv-tabla tbody tr:first-child > * { border-top: 0; }
  .inv-tabla tbody tr:nth-child(even) { background: var(--c-realce); }
  .inv-tabla tbody tr:last-child > :first-child { border-bottom-left-radius: calc(var(--r) - 1px); }
  .inv-tabla tbody tr:last-child > :last-child { border-bottom-right-radius: calc(var(--r) - 1px); }
  .inv-tabla tbody th.art-id { font-weight: 400; text-align: left; color: var(--c-txt); }
  .art-id > * { display: block; }
  .art-codigo { font-size: 14px; }
  .art-nombre { font-size: 13px; font-weight: 400; }
  .art-clasificacion { margin-top: 2px; font-size: 12px; }
  .inv-tabla td.art-precio { font-size: 14px; font-weight: 500; white-space: nowrap; }
  .inv-tabla td.art-precio.sin-dato { font-weight: 400; }
  .art-cifra { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .art-disponible b { font-size: 17px; font-weight: 700; color: var(--c-txt); }
  .art-fisico b { font-size: 14px; font-weight: 500; color: var(--c-txt-medio); }
  .art-existencia .etiqueta { display: flex; width: fit-content; margin: 6px 0 0 auto; }
  .art-existencia .art-ubicaciones { margin: 6px 0 0; }
  .art-ubicaciones > summary { min-height: var(--toque); }
}

@media (min-width: 900px) and (pointer: fine) {
  .art-ubicaciones > summary { min-height: 32px; }
}

@media (min-width: 900px) and (hover: hover) {
  .inv-tabla tbody tr:hover { background: var(--c-tenue); }
}

@media (min-width: 1280px) {
  .rejilla-inventario { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.atajo { margin: 4px 0 0; }
.atajo a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); font-size: 14px; font-weight: 500; }
.atajo .icono { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}