/*
  Diseño "Libro Mayor" (18/07/2026, rediseño aprobado por el usuario a partir
  de una propuesta con el skill frontend-design): la mutual como registro de
  socios, no como dashboard de SaaS genérico — papel de libro contable, tinta,
  y un sello de trámite para la calificación crediticia en vez de la píldora
  de color de cualquier producto. Dos temas (pedido explícito del usuario
  original) — oscuro (oficina de noche, papel oscuro/tinta clara) y claro
  (papel real). El toggle vive en el header (sol/luna, sin texto) y guarda la
  elección en localStorage; no hay detección automática de prefers-color-
  scheme, es 100% elección manual del usuario.
  Todo el sitio se apoya en estas variables — nunca un color de marca suelto
  fuera de acá, para que cambiar de tema alcance con este bloque.

  La calificación (otorgable / a revisar / no otorgable) es la señal más
  importante de la pantalla, así que tiene su propio color + ícono + badge
  prominente (el sello — ver .calificacion-badge), separado de los demás
  acentos del sitio.
*/
@font-face {
  font-family: 'Roboto Slab MCC';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/roboto-slab-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono MCC';
  font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono MCC';
  font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/plex-mono-600.woff2') format('woff2');
}

:root {
  --bg: #1c1814;
  --surface: #241f19;
  --surface-2: #2c261e;
  --ink: #eae2cf;
  --ink-muted: #a99c82;
  --line: #3b3327;
  --accent: #e08e97;
  --accent-soft: #362521;
  --accent-contrast: #241814;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.3);
  --header-bg: rgba(28,24,20,.92);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-slab: "Roboto Slab MCC", Rockwell, Georgia, serif;
  --font-mono: "Plex Mono MCC", Consolas, "Courier New", monospace;

  /* Estado genérico (usado en flashes, tablas, etc.) */
  --good: #77c29b;
  --good-soft: #1c2c24;
  --warn: #d9a64e;
  --warn-soft: #2e2618;
  --bad: #de726a;
  --bad-soft: #2f2018;

  /* Calificación crediticia: la distinción MÁS importante del sitio —
     3 tonos de "tinta de sello", deliberadamente distintos del --accent
     institucional (bordó) para no confundir marca con calificación. */
  --otorgable: #77c29b;
  --otorgable-soft: rgba(119, 194, 155, .14);
  --otorgable-line: rgba(119, 194, 155, .4);
  --revisar: #d9a64e;
  --revisar-soft: rgba(217, 166, 78, .15);
  --revisar-line: rgba(217, 166, 78, .4);
  --no-otorgable: #de726a;
  --no-otorgable-soft: rgba(222, 114, 106, .14);
  --no-otorgable-line: rgba(222, 114, 106, .42);

  /* Dorado "préstamo otorgado" — el resultado ganador de la gestión */
  --won: #e3c15a;
  --won-soft: rgba(227, 193, 90, .15);
  --won-line: rgba(227, 193, 90, .42);
  --won-contrast: #241a05;
}

/* Modo claro (18/07/2026, retocado a pedido explícito del usuario: "no me
   gusta como queda el color medio marron en modo dia... me gustaria que sea
   mas claro" — antes era literalmente "papel real" con un fondo tostado; se
   evaluaron 3 direcciones con el skill de frontend-design y el usuario
   eligió "Papel blanco", la más minimalista: casi blanco, con el acento
   institucional y los 3 colores de calificación haciendo todo el trabajo de
   color en vez del fondo). */
:root[data-theme="light"] {
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f1efe8;
  --ink: #24211b;
  --ink-muted: #736c5e;
  --line: #e4e0d4;
  --accent: #7a1f2b;
  --accent-soft: rgba(122, 31, 43, .08);
  --accent-contrast: #f8f3ea;
  --shadow: 0 1px 2px rgba(36,33,27,.06), 0 4px 14px rgba(36,33,27,.08);
  --header-bg: rgba(255,255,255,.92);

  --good: #1f7a52;
  --good-soft: #e6f5ec;
  --warn: #b0790f;
  --warn-soft: #faf0dc;
  --bad: #b3372e;
  --bad-soft: #fbeae8;

  --otorgable: #1f7a52;
  --otorgable-soft: rgba(31, 122, 82, .12);
  --otorgable-line: rgba(31, 122, 82, .4);
  --revisar: #b0790f;
  --revisar-soft: rgba(176, 121, 15, .13);
  --revisar-line: rgba(176, 121, 15, .4);
  --no-otorgable: #b3372e;
  --no-otorgable-soft: rgba(179, 55, 46, .12);
  --no-otorgable-line: rgba(179, 55, 46, .42);

  --won: #8a6d0f;
  --won-soft: rgba(138, 109, 15, .12);
  --won-line: rgba(138, 109, 15, .4);
  --won-contrast: #fcf6e6;
}

/* Identidad visual del sector Cobranzas: mismo papel/tinta, pero con acento
   teal (tinta de sello verde-azulada) en vez del bordó de Ventas — otro
   personal, otra pantalla, se distingue de un vistazo en qué sector se está
   parado. */
body.sector-cobranzas {
  --accent: #6bb8b8;
  --accent-soft: #1c2c2c;
  --accent-contrast: #14211f;
}
:root[data-theme="light"] body.sector-cobranzas {
  --accent: #2b6b6b;
  --accent-soft: rgba(43, 107, 107, .10);
  --accent-contrast: #f8f3ea;
}
.mainnav a.nav-cobranzas.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* Riesgo Crediticio: acento violeta/ciruela — otro sector más, otro color
   propio, distinto del verde/ámbar/rojo de calificación (esos quedan
   reservados). */
body.sector-riesgo {
  --accent: #b99bc4;
  --accent-soft: #251f2b;
  --accent-contrast: #211a26;
}
:root[data-theme="light"] body.sector-riesgo {
  --accent: #5c3f66;
  --accent-soft: rgba(92, 63, 102, .10);
  --accent-contrast: #f8f3ea;
}
.mainnav a.nav-riesgo.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* Listado compacto (pedido explícito del usuario, primero para Riesgo y
   después extendido a Ventas y Cobranzas — la grilla de tarjetas obligaba a
   mucho scroll). Cada fila es un <details>: colapsada muestra solo lo básico
   con un color lateral según su calificación/nivel, y se expande al click
   para ver el detalle completo (razones, garantes, formulario de contacto). */
.compact-list { display: flex; flex-direction: column; gap: .5rem; }
.compact-row {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
/* Riesgo Crediticio */
.compact-row.nivel-alerta { border-left-color: var(--no-otorgable); }
.compact-row.nivel-precaucion { border-left-color: var(--revisar); }
/* Cobranzas (nivel de gestión) */
.compact-row.nivel-urgente { border-left-color: var(--no-otorgable); }
.compact-row.nivel-acelerar { border-left-color: var(--revisar); }
.compact-row.nivel-normal { border-left-color: var(--otorgable); }
/* Ventas (calificación) */
.compact-row.grupo-otorgable { border-left-color: var(--otorgable); }
.compact-row.grupo-revisar { border-left-color: var(--revisar); }
.compact-row.grupo-no_otorgable { border-left-color: var(--no-otorgable); }
.compact-row.grupo-sin_evaluar { border-left-color: var(--ink-muted); }
.compact-row.is-concluded { opacity: .72; }

.compact-row summary {
  cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .5rem .85rem;
  list-style: none; user-select: none; flex-wrap: wrap;
}
.compact-row summary::-webkit-details-marker { display: none; }
.compact-row summary::marker { content: ''; }
.compact-row-id { display: flex; flex-direction: column; gap: .1rem; min-width: 10rem; flex: 1 1 12rem; }
.compact-row-nombre-row { display: flex; align-items: center; gap: .5rem; }
.compact-row-nombre { font-weight: 700; font-size: .88rem; }
.compact-row-meta { font-size: .72rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.compact-row-value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; white-space: nowrap; font-family: var(--font-mono); }
.compact-row-call {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem;
  border-radius: 3px; border: 1px solid var(--line); color: var(--ink); flex-shrink: 0;
  font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.compact-row-call .ic { width: 1rem; height: 1rem; color: var(--accent); flex-shrink: 0; }
.compact-row .calificacion-badge { padding: .25rem .55rem; font-size: .62rem; }
.compact-row summary .chev { transition: transform .15s ease; flex-shrink: 0; color: var(--ink-muted); margin-left: auto; }
.compact-row[open] summary .chev { transform: rotate(180deg); }
.compact-row-body { padding: .6rem .85rem .8rem; display: flex; flex-direction: column; gap: .6rem; border-top: 1px dashed var(--line); }
.compact-row-body .facts { border: none; padding: 0; }

/* Chips de semáforo Credixsa (para las tablas de cambios de situación) */
.sem-chip {
  display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 3px;
  font-size: .74rem; font-weight: 700; border: 1px solid transparent;
}
.sem-verde { color: var(--otorgable); background: var(--otorgable-soft); border-color: var(--otorgable-line); }
.sem-amarillo { color: var(--revisar); background: var(--revisar-soft); border-color: var(--revisar-line); }
.sem-rojo { color: var(--no-otorgable); background: var(--no-otorgable-soft); border-color: var(--no-otorgable-line); }
.sem-flecha { color: var(--ink-muted); margin: 0 .3rem; font-weight: 700; }
.kpi-tile.kpi-deterioro { border-color: var(--no-otorgable-line); background: linear-gradient(180deg, var(--no-otorgable-soft), transparent 60%), var(--surface); }
.kpi-tile.kpi-deterioro .kpi-value { color: var(--no-otorgable); }
.gpanel-proximamente { border-style: dashed; }

/* Casos de mora: lavado y badge según nivel de gestión */
.card.caso-urgente { border-color: var(--no-otorgable-line); background: linear-gradient(180deg, var(--no-otorgable-soft), transparent 45%), var(--surface); }
.card.caso-acelerar { border-color: var(--revisar-line); background: linear-gradient(180deg, var(--revisar-soft), transparent 45%), var(--surface); }
.card.caso-normal { border-color: var(--otorgable-line); background: linear-gradient(180deg, var(--otorgable-soft), transparent 45%), var(--surface); }
.nivel-urgente { background: var(--no-otorgable-soft); color: var(--no-otorgable); border-color: var(--no-otorgable-line); }
.nivel-acelerar { background: var(--revisar-soft); color: var(--revisar); border-color: var(--revisar-line); }
.nivel-normal { background: var(--otorgable-soft); color: var(--otorgable); border-color: var(--otorgable-line); }
.tag-boletin { color: var(--accent); border-color: var(--accent); }

/* Riesgo Crediticio: mismos tokens de calificación, mismos nombres de nivel
   que el resto del sitio (alerta=rojo, precaucion=ámbar). */
.card.caso-alerta { border-color: var(--no-otorgable-line); background: linear-gradient(180deg, var(--no-otorgable-soft), transparent 45%), var(--surface); }
.card.caso-precaucion { border-color: var(--revisar-line); background: linear-gradient(180deg, var(--revisar-soft), transparent 45%), var(--surface); }
.nivel-alerta { background: var(--no-otorgable-soft); color: var(--no-otorgable); border-color: var(--no-otorgable-line); }
.nivel-precaucion { background: var(--revisar-soft); color: var(--revisar); border-color: var(--revisar-line); }

/* Circuito de cobranzas: Llamado -> Intimado -> Legales.
   Mismo lenguaje visual que .alert/.tag-*: fondo suave + borde + texto de
   color, en vez de una píldora sólida saturada — son acciones formales, no
   celebratorias (a diferencia de .btn-won). Los 3 botones de la fila (incluido
   "Historial", que no es un <form>) reparten el mismo ancho para que la fila
   quede pareja. */
.acciones-caso { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.acciones-caso > form, .acciones-caso > a { flex: 1; min-width: 0; }
.acciones-caso .btn-legales, .acciones-caso .btn-intimar, .acciones-caso > a.btn-ghost {
  width: 100%; justify-content: center; border-radius: 8px;
}
.btn-intimar {
  background: var(--revisar-soft); color: var(--revisar); font-weight: 700;
  border: 1.5px solid var(--revisar-line);
}
.btn-intimar:hover { background: var(--revisar-line); }
.tag-intimado { color: var(--revisar); border-color: var(--revisar-line); background: var(--revisar-soft); font-weight: 700; }
.tag-llamado { color: var(--otorgable); border-color: var(--otorgable-line); background: var(--otorgable-soft); font-weight: 700; }

/* Canal de gestión (teléfono / WhatsApp / email) */
.canal-radios { display: flex; gap: .4rem; flex-wrap: wrap; }
.canal-radio {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 3px; padding: .3rem .7rem;
  font-size: .78rem; font-weight: 600; color: var(--ink-muted); background: var(--surface-2);
}
.canal-radio:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.canal-radio input { accent-color: var(--accent); margin: 0; }

/* Garantes (préstamos): semáforo y teléfono de cada uno, a la vista */
.garantes-box { border: 1px dashed var(--line); border-radius: 8px; padding: .55rem .7rem; }
.garantes-box h4 { display: flex; align-items: center; gap: .35rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .4rem; color: var(--ink-muted); font-weight: 700; }
.garante-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .18rem 0; font-size: .82rem; }
.garante-nombre { font-weight: 600; }
.garante-tel { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.tag-garantia-otorgable { color: var(--otorgable); border-color: var(--otorgable-line); background: var(--otorgable-soft); font-weight: 700; }
.tag-garantia-revisar { color: var(--revisar); border-color: var(--revisar-line); background: var(--revisar-soft); font-weight: 700; }
.tag-garantia-no_otorgable { color: var(--no-otorgable); border-color: var(--no-otorgable-line); background: var(--no-otorgable-soft); font-weight: 700; }
.tag-garantia-neutro { color: var(--ink-muted); }
.tag-espera-atencion { color: var(--revisar); border-color: var(--revisar-line); background: var(--revisar-soft); font-weight: 700; }
.tag-espera-urgente { color: var(--no-otorgable); border-color: var(--no-otorgable-line); background: var(--no-otorgable-soft); font-weight: 700; }

/* Legales: mismo tratamiento sobrio que Intimar (fondo suave + borde), con la
   balanza de la justicia — panel propio diferenciado más abajo. */
.btn-legales {
  background: var(--no-otorgable-soft); color: var(--no-otorgable);
  font-weight: 700; border: 1.5px solid var(--no-otorgable-line);
}
.btn-legales:hover { background: var(--no-otorgable-line); }
.kpi-tile.kpi-legales { border-color: var(--no-otorgable-line); }
.kpi-tile.kpi-legales .kpi-value { color: var(--no-otorgable); display: flex; align-items: center; gap: .5rem; }
.kpi-tile.kpi-legales .kpi-value .ic { width: 1.6rem; height: 1.6rem; }
.gpanel-legales { border-color: var(--no-otorgable-line); }
.gpanel-legales h3 { color: var(--no-otorgable); display: flex; align-items: center; gap: .4rem; }

/* Se eligió modo oscuro como identidad fija del sitio (no auto/claro) */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.5;
}
h1, h2, h3, .brand {
  font-family: var(--font-slab);
  text-wrap: balance;
}
a { color: var(--accent); }

/* Toggle de tema (sol/luna, sin texto — pedido explícito del usuario), fijo
   arriba a la derecha en TODAS las páginas, incluida la de login (que no
   tiene header.top). Se muestra el sol en modo oscuro (invita a pasar a
   claro) y la luna en modo claro (invita a volver a oscuro) — convención
   estándar de este tipo de control. */
.theme-toggle {
  position: fixed; top: .85rem; right: 1.1rem; z-index: 50;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-muted);
  box-shadow: var(--shadow); cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }

/* --- Nav --- */
header.top { position: sticky; top: 0; z-index: 5; background: var(--header-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); padding: .9rem 1.5rem; }
.top-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-right: 2.6rem; }

/* --- Logo MCC (18/07/2026: logo real de la Mutual en 2 archivos —
   `logo_mcc_claro.png` para fondo claro (rojo/negro original) y
   `logo_mcc_oscuro.png` para fondo oscuro (mismo rojo, texto pasado a
   blanco) — reemplaza la reconstrucción en HTML/CSS que se usaba antes.
   El toggle entre ambos usa el mismo mecanismo que el sol/luna del theme-
   toggle: por defecto (sin data-theme, o data-theme="dark") se ve la
   versión oscura; con data-theme="light" se invierte. --- */
.brand-wrap { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.brand-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.logo-img { height: 2.1rem; width: auto; display: block; }
.logo-img-light { display: none; }
:root[data-theme="light"] .logo-img-light { display: block; }
:root[data-theme="light"] .logo-img-dark { display: none; }
.brand-app {
  border-left: 1px solid var(--line); padding-left: .9rem;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
}
nav.mainnav { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
nav.mainnav a {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: 3px; padding: .4rem .9rem;
  font-size: .82rem; font-weight: 600; color: var(--ink-muted);
}
nav.mainnav a.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.nav-badge {
  display: inline-flex; align-items: center; gap: .2rem; margin-left: .3rem; padding: .1rem .4rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--revisar-soft); color: var(--revisar); border: 1px solid var(--revisar-line);
}
.nav-badge .ic { width: .95em; height: .95em; }
.nav-badge-urgente { background: var(--no-otorgable-soft); color: var(--no-otorgable); border-color: var(--no-otorgable-line); animation: nav-badge-pulse 1.8s ease-in-out infinite; }
@keyframes nav-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.userbox { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--ink-muted); }
.userbox form { margin: 0; }

/* Botón flotante "Cargar solicitudes" del Portal de Concesionarios
   (18/07/2026, pedido explícito: reemplaza el link de texto "Nueva
   solicitud" del nav por un "+" redondo fijo en la esquina, con tooltip
   nativo vía `title`). Fijo en vez de dentro del nav para que quede visible
   sin importar en qué pantalla del portal esté la concesionaria. */
.fab-nueva-solicitud {
  position: fixed; top: 84px; right: 24px; z-index: 40;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-contrast); text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab-nueva-solicitud:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, .38); }
.fab-nueva-solicitud .ic { width: 22px; height: 22px; stroke-width: 2.2; }
@media (max-width: 640px) { .fab-nueva-solicitud { top: auto; bottom: 20px; right: 18px; } }

/* Buscador general del menú (17/07/2026, pedido explícito): busca por
   nombre/DNI/teléfono en toda la cartera de Ventas+Cobranzas, no solo en la
   cola filtrada de la pantalla actual — ver ruta /buscar en app.py. */
.nav-search {
  display: flex; align-items: center; gap: .4rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 3px; padding: .4rem .9rem;
}
.nav-search .ic { color: var(--ink-muted); flex-shrink: 0; width: 1rem; height: 1rem; }
.nav-search input[type="text"] {
  border: none; background: none; color: var(--ink); font-family: inherit;
  font-size: .82rem; width: 170px; outline: none;
}
.nav-search input[type="text"]::placeholder { color: var(--ink-muted); }

/* Ficha rápida del socio (17/07/2026, pedido explícito): dialog nativo
   (<dialog>), sin librería — consulta en vivo a la API de la Mutual al
   hacer clic en el número de socio. */
.ficha-socio-dialog {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; max-width: 420px; width: 90vw;
}
.ficha-socio-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.ficha-socio-lista { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.ficha-socio-lista dt { font-size: .74rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.ficha-socio-lista dd { margin: 0; font-size: .88rem; }
.btn-socio-num {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 3px;
  padding: .05rem .55rem; font-size: inherit; font-family: inherit; cursor: pointer; font-weight: 600;
}
.btn-socio-num:hover { border-color: var(--accent); color: var(--accent); }
button.tag { background: none; font-family: inherit; cursor: pointer; }
button.tag:hover { border-color: var(--accent); color: var(--accent); }

button, .btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-family: inherit;
  border-radius: 4px; padding: .5rem 1.05rem; font-size: .85rem; font-weight: 600; border: none;
  background: var(--accent); color: var(--accent-contrast);
  transition: filter 120ms var(--ease-out-quart), transform 120ms var(--ease-out-quart);
}
button:hover, .btn:hover { filter: brightness(1.12); }
button:active, .btn:active { transform: scale(.97); }
.btn-ghost { background: none; color: var(--accent); border: 1px solid var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); filter: none; }
.btn-danger { background: var(--no-otorgable); color: #1a0a0a; }
.btn-sm { padding: .3rem .7rem; font-size: .76rem; }

main.container { max-width: 1180px; margin: 1.3rem auto 3rem; padding: 0 1.5rem; }

/* Los flashes son la única confirmación visible de que una acción (guardar
   llamado, otorgar, editar) surtió efecto en esta app de recarga completa
   de página — pedido de la corrida `/impeccable animate`: es el momento de
   feedback de mayor valor real, no decoración. */
.flash { max-width: 1180px; margin: 1rem auto 0; padding: 0 1.5rem; }
.flash-msg {
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); border-radius: 8px;
  padding: .6rem .9rem; font-size: .85rem; margin-bottom: .5rem;
  animation: flash-in 280ms var(--ease-out-quart) both;
}
.flash-msg.error { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.flash-msg.success { background: var(--good-soft); color: var(--good); border-color: var(--good); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }

/* --- Login --- */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2rem 2.2rem; width: 100%; max-width: 360px;
}
.login-card .login-logo { justify-content: center; margin-bottom: 1.3rem; }
.login-card .login-logo .logo-img { height: 3.4rem; }
.login-card h1 { font-size: 1.4rem; margin: 0 0 .3rem; text-align: center; }
.login-card p.sub { text-align: center; }
.login-card p.sub { color: var(--ink-muted); font-size: .82rem; margin: 0 0 1.4rem; }
.login-signature {
  text-align: center; color: var(--accent); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .8rem;
}
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.field label { font-size: .78rem; font-weight: 600; color: var(--ink-muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .95rem; padding: .55rem .7rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.login-card button { width: 100%; justify-content: center; margin-top: .4rem; }

/* Formulario del Portal de Concesionarios (18/07/2026, pedido explícito: el
   formulario largo de "nueva solicitud" se sentía como una pared de campos
   apilados de a uno) — tarjetas por sección (mismo lenguaje que .gpanel/
   .card del resto del sitio) con una grilla de 2 columnas que colapsa a 1 en
   pantallas angostas, en vez de un único .login-card angosto de una columna. */
.form-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.form-section h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: .95rem; color: var(--accent); }
.form-section h3 .ic { flex-shrink: 0; color: var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* --- Chips / filtros --- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.chip {
  display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: var(--surface);
  border-radius: 3px; padding: .35rem .8rem .35rem .6rem; font-size: .82rem; font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: border-color 120ms var(--ease-out-quart), box-shadow 120ms var(--ease-out-quart);
}
.chip:hover { border-color: var(--accent); }
.chip b { font-variant-numeric: tabular-nums; font-weight: 700; font-family: var(--font-mono); }
.chip.is-active { box-shadow: 0 0 0 2px var(--accent) inset; }

/* --- Cards de solicitantes --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .5rem;
}
/* Lavado sutil de color según calificación — se ve de un vistazo en toda la grilla */
.card.grupo-otorgable { border-color: var(--otorgable-line); background: linear-gradient(180deg, var(--otorgable-soft), transparent 45%), var(--surface); }
.card.grupo-revisar { border-color: var(--revisar-line); background: linear-gradient(180deg, var(--revisar-soft), transparent 45%), var(--surface); }
.card.grupo-no_otorgable { border-color: var(--no-otorgable-line); background: linear-gradient(180deg, var(--no-otorgable-soft), transparent 45%), var(--surface); }

.card-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.card-head h3 { margin: 0 0 .2rem; font-size: 1rem; line-height: 1.2; }
.meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; color: var(--ink-muted); font-size: .74rem; }
.meta span { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.tag { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: 3px; padding: .05rem .5rem; font-size: .68rem; font-weight: 600; }
/* Origen de la cartera: los de "buen cumplimiento" se distinguen en dorado suave;
   los "afectados" (registro a re-evaluar) en rojo suave */
.tag-cat-buen_cumplimiento { color: var(--revisar); border-color: var(--revisar-line); background: var(--revisar-soft); }
.tag-cat-buen_cumplimiento_afectado { color: var(--no-otorgable); border-color: var(--no-otorgable-line); background: var(--no-otorgable-soft); }
/* Pedido activo de préstamo + historial de buen cumplimiento verificado: la
   señal más fuerte de toda la cartera — dorado destacado (mismo tono que
   "préstamo otorgado"), para que salte a la vista entre el resto de tags. */
.tag-cat-simulacion_buen_cumplimiento { color: var(--won); border-color: var(--won-line); background: var(--won-soft); font-weight: 700; }
.chips-categoria { margin-bottom: .5rem; }
.chips-categoria .chip.is-active { box-shadow: 0 0 0 2px var(--accent) inset; }
.chip-won { color: var(--won); border-color: var(--won-line); }
.chip-won.is-active { box-shadow: 0 0 0 2px var(--won) inset; }

/* Fila de estado (contactados/otorgados) separada de los chips de prioridad
   — antes vivían mezclados en el mismo grupo, dos criterios de filtro
   distintos compitiendo por el mismo espacio. */
.chips-estado { align-items: center; }
.chips-vista { margin-bottom: .75rem; }

/* Vista Kanban (21/07/2026, pedido explícito): columnas por estado de
   gestión, sin drag-and-drop — reusa la misma tarjeta <details> que la
   vista de lista, solo agrupada. Scroll horizontal si no entran las 5
   columnas, nunca la página entera se desborda de costado. */
.kanban-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.kanban-columna {
  flex: 0 0 300px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column; max-height: 80vh;
}
.kanban-columna-header {
  display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem;
  border-bottom: 1px solid var(--line); font-weight: 600; font-size: .85rem; color: var(--ink-muted);
  position: sticky; top: 0; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0;
}
.kanban-columna-header b { margin-left: auto; color: var(--ink); }
.kanban-columna-body { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; overflow-y: auto; }
.kanban-columna-body .compact-row { width: 100%; }
/* La fila de la lista (.compact-row summary) está pensada para el ancho
   completo de la página — en una columna de ~300px, intentar poner
   nombre/teléfono/monto/badge en una sola línea horizontal los aplasta
   (bug real, reportado con captura: texto ilegible, avatar cortado a la
   mitad). Se fuerza un layout apilado, solo dentro del kanban. */
.kanban-columna-body .compact-row summary {
  flex-direction: column; align-items: stretch; flex-wrap: nowrap;
  position: relative; padding-right: 1.8rem;
}
.kanban-columna-body .compact-row-id { min-width: 0; width: 100%; flex: none; }
.kanban-columna-body .compact-row-meta { white-space: normal; }
.kanban-columna-body .compact-row-call,
.kanban-columna-body .compact-row-value,
.kanban-columna-body .calificacion-badge { align-self: flex-start; }
.kanban-columna-body .compact-row summary .chev { position: absolute; top: .5rem; right: .5rem; margin-left: 0; }
.kanban-columna-mas { padding-top: .5rem; border-top: 1px dashed var(--line); text-align: center; }
@media (max-width: 640px) {
  .kanban-columna { flex-basis: 85vw; }
}

/* Leyenda de colores, colapsada por defecto (pedido explícito tras la
   crítica de diseño: la app asume conocimiento tribal del semáforo, sin
   ningún punto de entrada para aprenderlo en la propia UI). */
.legend { border: 1px solid var(--line); border-radius: 4px; padding: .35rem .8rem; background: var(--surface); }
.legend summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ink-muted); display: flex; align-items: center; gap: .4rem; list-style: none; }
.legend summary::-webkit-details-marker { display: none; }
.legend[open] { border-radius: 6px; }
.legend-body { margin-top: .5rem; font-size: .8rem; color: var(--ink); display: flex; flex-direction: column; gap: .35rem; }
.legend-body .semaforo { display: inline-flex; }

/* Barra de filtros (antes con estilos inline repetidos, rompía la
   disciplina de tokens que el propio sistema se impone). */
.filter-bar { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-bar input[type="text"] { padding: .5rem .7rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-family: inherit; }
.filter-bar label { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-muted); }

/* Paginación de listas largas (pedido explícito 17/07/2026: los logs
   acumulativos de Mi Gestión se van a poner largos con el tiempo). */
.paginacion { display: flex; align-items: center; gap: .8rem; margin: .7rem 0 1.2rem; }
.paginacion .is-disabled { pointer-events: none; opacity: .4; }

/* Deshacer un "otorgado" cargado por error — mismo lugar donde se ve el
   estado, para que la corrección esté a un click de donde se cometió. */
.cd-undo { margin: .5rem 0 0; }

/* Calificación: ícono grande en un círculo propio + badge de texto al lado */
.calificacion-wrap { display: flex; align-items: center; gap: .5rem; }
.calificacion-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid transparent;
}
.calificacion-avatar .ic { width: 1.55rem; height: 1.55rem; }
/* El "sello" — firma visual del rediseño Libro Mayor (18/07/2026): la
   calificación crediticia, la señal más importante de toda la app, se
   resuelve como un sello de tinta rotado con doble borde en vez de la
   píldora de color de cualquier producto. Es el ÚNICO elemento con esta
   rotación en todo el sitio — el resto de chips/tags quedan rectangulares
   y quietos a propósito, para no diluir la firma. */
.calificacion-badge {
  position: relative; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .35rem .75rem; border-radius: 999px; font-weight: 700; font-size: .68rem;
  letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid transparent;
  font-family: var(--font-mono); transform: rotate(-3deg);
}
.calificacion-badge::before {
  content: ''; position: absolute; inset: 2px; border-radius: 999px; border: 1px solid currentColor; opacity: .45;
}
.calificacion-otorgable { background: var(--otorgable-soft); color: var(--otorgable); border-color: var(--otorgable-line); }
.calificacion-revisar { background: var(--revisar-soft); color: var(--revisar); border-color: var(--revisar-line); }
.calificacion-no_otorgable { background: var(--no-otorgable-soft); color: var(--no-otorgable); border-color: var(--no-otorgable-line); }
.calificacion-sin_evaluar { background: var(--surface-2); color: var(--ink-muted); border-color: var(--line); transform: none; }
.calificacion-sin_evaluar::before { display: none; }
.calificacion-sub { font-size: .64rem; color: var(--ink-muted); text-align: right; margin-top: .15rem; text-transform: none; letter-spacing: 0; font-weight: 600; font-family: var(--font-mono); }

/* Atraso destacado para créditos en cuotas (línea J/V): pedido explícito del
   usuario — en un crédito en cuotas la gestión depende del atraso acumulado,
   así que va como franja propia a todo el ancho de la tarjeta (no compite por
   espacio con la calificación, que ya vive en el header — eso desbordaba). */
.atraso-destacado {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  background: var(--revisar-soft); border: 1.5px solid var(--revisar-line);
  border-radius: 8px; padding: .4rem .7rem; margin-bottom: .6rem;
}
.atraso-valor { font-size: 1.4rem; font-weight: 800; color: var(--revisar); line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--font-slab); }
.atraso-label { font-size: .72rem; color: var(--ink-muted); font-weight: 600; line-height: 1.2; }

.alert { display: flex; gap: .5rem; align-items: flex-start; border: 1.5px solid var(--no-otorgable); background: var(--no-otorgable-soft); color: var(--no-otorgable); border-radius: 8px; padding: .45rem .65rem; font-size: .8rem; font-weight: 700; }
.facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: .4rem 0; }
.fact { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
.fact .ic { color: var(--accent); }
.semaforo { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--ink-muted); }
.semaforo .dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.semaforo-good { color: var(--otorgable); } .semaforo-warn { color: var(--revisar); } .semaforo-bad { color: var(--no-otorgable); }

/* Desplegable: por defecto la tarjeta corta en el semáforo de Credixsa;
   el resto (por qué sí/no, comentario, contactar) se abre al tocar. */
.card-detail { border-top: 1px dashed var(--line); }
.card-detail summary {
  cursor: pointer; display: flex; align-items: center; gap: .4rem; padding: .5rem 0 .1rem;
  font-size: .76rem; font-weight: 700; color: var(--accent); list-style: none; user-select: none;
}
.card-detail summary::-webkit-details-marker { display: none; }
.card-detail summary::marker { content: ''; }
.card-detail summary .chev { transition: transform .15s ease; }
.card-detail[open] summary .chev { transform: rotate(180deg); }
.card-detail-body { padding-top: .5rem; display: flex; flex-direction: column; gap: .6rem; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.col h4 { display: flex; align-items: center; gap: .35rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .3rem; color: var(--ink-muted); font-weight: 700; }
.col-good h4 { color: var(--otorgable); } .col-bad h4 { color: var(--no-otorgable); }
.col ul { margin: 0; padding-left: 1.1rem; font-size: .78rem; display: flex; flex-direction: column; gap: .25rem; }
.col li.muted { color: var(--ink-muted); list-style: none; margin-left: -1.1rem; font-style: italic; }
.comentario { font-size: .82rem; color: var(--ink-muted); font-style: italic; margin: 0; border-left: 2px solid var(--line); padding-left: .6rem; }

.contact-zone { border-top: 1px dashed var(--line); padding-top: .7rem; }
.contact-form { display: flex; flex-direction: column; gap: .55rem; }
.contact-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .76rem; color: var(--ink-muted); font-weight: 600; }
.contact-form select, .contact-form textarea, .contact-form input[type="datetime-local"] { font-family: inherit; font-size: .85rem; padding: .45rem .55rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); resize: vertical; }
.cf-actions { display: flex; gap: .5rem; }

/* Contacto concluido (resultado definitivo) vs. a reintentar (no contestó / no se pudo contactar) */
.contact-done { background: var(--good-soft); border: 1px solid var(--good); border-radius: 8px; padding: .6rem .75rem; }
.cd-row { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; color: var(--good); font-weight: 700; font-size: .85rem; }
.cd-row .ic { flex-shrink: 0; }
.cd-fecha { font-weight: 500; color: var(--ink-muted); font-size: .72rem; white-space: nowrap; margin-left: auto; }
.cd-notas { margin: .4rem 0 0; color: var(--ink); font-size: .82rem; }

.retry-note { background: var(--revisar-soft); border: 1px solid var(--revisar-line); border-radius: 8px; padding: .6rem .75rem; }
.retry-note .cd-row { color: var(--revisar); }
.rn-hint { margin: .35rem 0 0; color: var(--revisar); font-size: .78rem; font-weight: 600; }

/* Hilo de "Consultar"/conversación entre la concesionaria y Ventas (18/07/2026,
   pedido explícito: mejorar el mismo tratamiento visual del resto del sitio) —
   pensado como correspondencia (notas de trámite), no como un chat de app: cada
   entrada lleva una pestaña de color según quién escribe. Mutual siempre a la
   izquierda con la pestaña bordó institucional, la concesionaria a la derecha
   con tinta neutra — la perspectiva es fija por AUTOR, no por quién mira la
   pantalla, para que se vea igual desde el Portal externo y desde /concesionarios. */
.hilo-mensajes { display: flex; flex-direction: column; gap: .5rem; max-height: 15rem; overflow-y: auto; padding: .1rem .1rem .1rem 0; }
.msg { max-width: 86%; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--ink-muted); border-radius: 4px; padding: .45rem .6rem; }
.msg-mutual { border-left-color: var(--accent); }
.msg-concesionaria { align-self: flex-end; }
.msg-autor { font-weight: 700; font-size: .76rem; color: var(--ink-muted); }
.msg-mutual .msg-autor { color: var(--accent); }
.msg-texto { margin: .2rem 0 0; color: var(--ink); font-size: .84rem; line-height: 1.42; }
.msg-fecha { display: block; margin-top: .3rem; font-family: var(--font-mono); font-size: .66rem; color: var(--ink-muted); }
.msg-vacio { margin: 0; color: var(--ink-muted); font-size: .82rem; font-style: italic; }

/* Popover del Portal: la tabla recorta (overflow:hidden, para los bordes
   redondeados) — :has() libera el clip SOLO mientras el detalle está abierto,
   mismo truco ya usado en .canal-radio:has(input:checked) más abajo. */
table.datatable:has(details[open]) { overflow: visible; }
.consulta-toggle { position: relative; }
.consulta-panel {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30;
  width: 21rem; max-width: min(21rem, 85vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .7rem;
}
.consulta-panel textarea { width: 100%; box-sizing: border-box; margin-top: .6rem; }

/* Préstamo otorgado: caja dorada + botón copa */
.contact-won { background: var(--won-soft); border: 1.5px solid var(--won-line); border-radius: 8px; padding: .65rem .8rem; }
.contact-won .cd-row { color: var(--won); font-size: .92rem; }

/* Administración: editar cualquier registro de gestión ya cargado (solo admin) */
.admin-historial { margin-top: .7rem; border-top: 1px dashed var(--line); padding-top: .6rem; }
.admin-historial summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--ink-muted); display: flex; align-items: center; gap: .4rem; }
.admin-historial-body { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.admin-historial-item { display: flex; flex-direction: column; gap: .35rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .65rem; }
.admin-historial-item .ahi-meta { font-size: .72rem; color: var(--ink-muted); }
.admin-historial-item label { display: flex; flex-direction: column; gap: .25rem; font-size: .76rem; color: var(--ink-muted); font-weight: 600; }
.admin-historial-item select, .admin-historial-item textarea, .admin-historial-item input[type="datetime-local"] { font-family: inherit; font-size: .82rem; padding: .4rem .5rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; }
.contact-won .ic { width: 1.4em; height: 1.4em; }
.won-form { margin-bottom: .6rem; }
.btn-won { background: var(--won); color: var(--won-contrast); width: 100%; justify-content: center; font-weight: 700; }
.btn-won:hover { filter: brightness(1.08); }

/* --- KPIs / gerencial --- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.kpi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .3rem; }
.kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); font-weight: 700; }
.kpi-value { font-size: 2.3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; font-family: var(--font-slab); }
.kpi-value-money { font-size: 1.6rem; }
.kpi-sub { font-size: .76rem; color: var(--ink-muted); }
.kpi-tile.kpi-accent { border-color: var(--accent); }
.kpi-tile.kpi-accent .kpi-value { color: var(--accent); }
.kpi-tile.kpi-won { border-color: var(--won-line); background: linear-gradient(180deg, var(--won-soft), transparent 60%), var(--surface); }
.kpi-tile.kpi-won .kpi-value { color: var(--won); display: flex; align-items: center; gap: .5rem; }
.kpi-tile.kpi-won .kpi-value .ic { width: 1.6rem; height: 1.6rem; }
.gerencial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.gpanel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.gpanel h3 { margin: 0 0 1rem; font-size: 1rem; }
.hbar-row { display: grid; grid-template-columns: 11rem 1fr auto; gap: .6rem; align-items: center; margin-bottom: .6rem; font-size: .82rem; }
.hbar-track { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 5px; }
.hbar-good { background: var(--otorgable); } .hbar-warn { background: var(--revisar); } .hbar-bad { background: var(--no-otorgable); } .hbar-accent { background: var(--accent); } .hbar-won { background: var(--won); }
.hbar-value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; font-family: var(--font-mono); }
.muted-note { color: var(--ink-muted); font-style: italic; font-size: .84rem; }

/* --- Ranking de vendedores (22/07/2026) --- */
.ranking-row { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.ranking-pos { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--surface-2); color: var(--ink-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; }
.ranking-pos.ranking-top { background: var(--won-soft); color: var(--won); border: 1px solid var(--won-line); }
.ranking-info { display: flex; flex-direction: column; gap: .3rem; }
.ranking-nombre { font-size: .82rem; font-weight: 600; }
.ranking-metric { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82rem; white-space: nowrap; font-family: var(--font-mono); }
.ranking-metric small { font-weight: 500; color: var(--ink-muted); font-family: var(--font-body); }

/* Avatar circular con iniciales (idea adaptada de una plantilla de
   referencia, 17/07/2026) — color determinístico por nombre, tomado de la
   paleta ya existente del sitio (acento, sectores, estados), nunca un color
   nuevo suelto. */
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
  color: #fff; font-variant-numeric: tabular-nums;
}
/* Logo de la concesionaria (18/07/2026) — fondo blanco fijo + borde +
   padding SIEMPRE, sin importar el tema oscuro/claro de la app ni los
   colores propios del logo (muchos logos reales tienen fondo transparente
   y detalle fino que desaparece si se lo achica demasiado o se lo deja
   flotando sobre un fondo oscuro). Pedido explícito del usuario (dos
   veces: "no se ve ni sabes quién es, es muy chico" y después "sigue
   siendo muy pequeño, debemos ver a primera vista o tener una idea") —
   tiene que reconocerse de un vistazo, no ser un ícono más chico que el
   propio avatar-initials (1.9rem) que reemplaza.
   `.concesionaria-logo-fila-body`: variante para dentro de la tarjeta
   expandida (junto a texto en una fila de "facts"), más chica que la
   principal pero igual bien por encima de un ícono común. */
.concesionaria-logo {
  height: 4.2rem; width: 4.2rem; object-fit: contain; flex-shrink: 0;
  background: #ffffff; border: 1px solid var(--line); border-radius: 10px;
  padding: .35rem; box-sizing: border-box;
}
.concesionaria-logo-fila-body {
  height: 2.8rem; width: 2.8rem; vertical-align: middle; margin-right: .35rem;
}

.avatar-0 { background: var(--accent); }
.avatar-1 { background: #7d5a87; }
.avatar-2 { background: #3f7a7a; }
.avatar-3 { background: var(--won); color: #3d2e00; }
.avatar-4 { background: var(--revisar); color: #3d2e00; }
.avatar-5 { background: var(--otorgable); color: #06210f; }

/* Feed de actividad reciente / recordatorios en el panel lateral de Mi
   Gestión (idea adaptada de una plantilla de referencia, 17/07/2026). */
.activity-feed { display: flex; flex-direction: column; gap: .5rem; }
.activity-item { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .65rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.activity-dot { width: .5rem; height: .5rem; border-radius: 999px; margin-top: .4rem; flex-shrink: 0; }
.activity-success { background: var(--otorgable); }
.activity-info { background: var(--accent); }
.activity-warn { background: var(--revisar); }
.activity-muted { background: var(--ink-muted); }
.activity-body { min-width: 0; }
.activity-accion { margin: 0; font-size: .84rem; overflow-wrap: break-word; }
.activity-tiempo { margin: .15rem 0 0; font-size: .72rem; }

/* Layout principal + panel lateral en Mi Gestión (idea de 3 columnas de la
   plantilla de referencia, adaptada a lo que esta pantalla realmente tiene:
   contenido principal + un panel angosto de vistazo rápido). */
.mi-gestion-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; align-items: start; }
.mi-gestion-sidebar { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 1rem; }
@media (max-width: 900px) {
  .mi-gestion-grid { grid-template-columns: 1fr; }
  .mi-gestion-sidebar { position: static; }
}

/* --- Gráfico de columnas mensual (evolución de gestiones) --- */
.colchart {
  display: flex; align-items: stretch; gap: .6rem; height: 190px;
  padding-top: 1.3rem; overflow-x: auto;
}
.colgroup { flex: 1; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.colbars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; flex: 1; width: 100%; border-bottom: 1px solid var(--line); }
.colbar { width: 15px; border-radius: 4px 4px 0 0; position: relative; }
.colbar span {
  position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%);
  font-size: .64rem; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.collabel { font-size: .68rem; color: var(--ink-muted); white-space: nowrap; }
.cb-accent { background: var(--accent); }
.cb-won { background: var(--won); }
.cb-teal { background: #3f7a7a; }
.cb-warn { background: var(--revisar); }
.cb-bad { background: var(--no-otorgable); }
.leyenda { display: flex; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; }

/* --- Heatmap de horario de gestión (22/07/2026): reemplaza el gráfico de
   columnas por franja horaria — color mostrado con opacidad sobre
   .heatmap-cell-fill (capa separada del número, que siempre queda a
   opacidad plena y legible incluso en las franjas más flojas). --- */
.heatmap { display: flex; flex-direction: column; gap: .55rem; margin: .3rem 0 .2rem; }
.heatmap-row { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: .6rem; }
.heatmap-row-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.heatmap-cells { display: flex; gap: 3px; flex: 1; }
.heatmap-cell { position: relative; flex: 1; aspect-ratio: 1.3; border-radius: 4px; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.heatmap-cell-fill { position: absolute; inset: 0; background: var(--accent); }
.heatmap-cell-teal .heatmap-cell-fill { background: #3f7a7a; }
.heatmap-cell-value { position: relative; font-size: .66rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.heatmap-labels { display: grid; grid-template-columns: 6rem 1fr; gap: .6rem; margin-top: .1rem; }
.heatmap-hour-labels { display: flex; gap: 3px; flex: 1; }
.heatmap-hour-labels span { flex: 1; text-align: center; font-size: .64rem; color: var(--ink-muted); white-space: nowrap; }

/* --- Sparkline chica: tendencia por usuario en la tabla de gestión
   (Gerencial/Mi gestión) — pedido explícito 15/07/2026, comparar semana/
   mes/año sin necesitar un gráfico grande por persona. --- */
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 26px; min-width: 70px; }
.spark-bar { width: 6px; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .85; }
.spark-bar:last-child { background: var(--won); opacity: 1; }
.ley-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--ink-muted); font-weight: 600; }
.ley-dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }

/* --- Tabla admin --- */
table.datatable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.datatable th, table.datatable td { text-align: left; padding: .6rem .8rem; font-size: .85rem; border-bottom: 1px solid var(--line); }
table.datatable th { background: var(--surface-2); color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
table.datatable tr:last-child td { border-bottom: none; }
.badge-rol { display: inline-flex; padding: .1rem .55rem; border-radius: 3px; font-size: .72rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.badge-inactivo { background: var(--bad-soft); color: var(--bad); }

.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.ic-sm { width: 1em; height: 1em; }

@media (max-width: 720px) {
  .cols { grid-template-columns: 1fr; }
  .gerencial-grid { grid-template-columns: 1fr; }
  .hbar-row { grid-template-columns: 7rem 1fr auto; }
}

/* Accesibilidad de movimiento (pedido de la corrida `/impeccable animate`,
   17/07/2026): faltaba en todo el sitio, cubre también el pulso de la
   campanita de recordatorios (`.nav-badge-urgente`) que se había agregado
   sin esta guarda — nunca ignorar prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
  header.top, .no-print { display: none !important; }
  .card, .kpi-tile, .gpanel, .compact-row { box-shadow: none; border: 1px solid #999; break-inside: avoid; background: #fff !important; }
  .calificacion-badge, .calificacion-avatar, .contact-won, .kpi-tile.kpi-won { background: none !important; border: 1.5px solid currentColor; }
  /* El desplegable de detalle se abre entero al imprimir, sin importar si el
     operario lo tenía cerrado en pantalla — el papel necesita todo el detalle. */
  .card-detail summary, .compact-row summary { display: none !important; }
  .card-detail-body, .compact-row-body { display: flex !important; }
  /* Columnas del gráfico: en B&N se distinguen por borde en vez de relleno */
  .colbar { background: #ddd !important; border: 1px solid #333; }
  .ley-dot { background: #ddd !important; border: 1px solid #333; }
  /* Heatmap: la intensidad de color no se lee bien en B&N y gasta tóner de
     más — en el papel alcanza con el número dentro de cada celda con borde. */
  .heatmap-cell-fill { opacity: 0 !important; background: none !important; }
  .heatmap-cell { border: 1px solid #333 !important; }
  .ranking-pos.ranking-top { background: none !important; border: 1.5px solid currentColor; }
}