/* ============================================================
   Sistema de Control de Pólizas — Seguros Nayarit
   Sistema de diseño propio, construido para reproducir el
   lenguaje visual de Argon Dashboard (sidebar claro, tarjetas
   suaves, iconos con gradiente, tipografía Open Sans).
   Sin dependencias de terceros ni CSS licenciado.
   ============================================================ */

:root {
  /* Paleta */
  /* Tonos ajustados para contraste AA (≥ 4.5:1 con texto blanco o sobre blanco). */
  --primary:        #4a5fd8;
  --primary-dark:   #324cdd;
  --primary-suave:  #eef0fc;
  --primary-texto:  var(--primary); /* texto/enlaces en el color principal (en modo noche, una versión más clara) */
  --primary-grad:   linear-gradient(310deg, #4a5fd8, #6f4bd6);
  --success:        #2dce89;
  --success-grad:   linear-gradient(310deg, #17ad37, #2dce89);
  --info:           #11cdef;
  --info-grad:      linear-gradient(310deg, #1171ef, #11cdef);
  --warning:        #fb6340;
  --warning-grad:   linear-gradient(310deg, #f53939, #fbcf33);
  --danger:         #f5365c;
  --danger-grad:    linear-gradient(310deg, #c8102e, #d62839);
  --dark-grad:      linear-gradient(310deg, #141727, #3a416f);

  /* Neutros (todos ≥ 4.5:1 sobre blanco y sobre --fondo) */
  --texto:          #344767;
  --texto-suave:    #4f5d7a;
  --texto-tenue:    #5b6882;
  /* Semánticos: texto oscuro sobre fondo tenue (legible sin depender del color) */
  --ok-texto:       #146a42;  --ok-fondo:      #d4f7e4;
  --aviso-texto:    #7a4d00;  --aviso-fondo:   #fff3d6;
  --error-texto:    #a3231b;  --error-fondo:   #fde3e3;
  --info-texto:     #2952a3;  --info-fondo:    #e3ecfd;
  --borde:          #e9ecef;
  --fondo:          #f8f9fa;
  --blanco:         #ffffff;

  /* Elevación y forma */
  --sombra-sm:      0 .125rem .25rem rgba(52,71,103,.10);
  --sombra:         0 .25rem .5rem rgba(52,71,103,.08), 0 .0625rem .125rem rgba(52,71,103,.06);
  --sombra-lg:      0 .5rem 1.5rem rgba(52,71,103,.12);
  --radio:          .75rem;
  --radio-sm:       .5rem;

  --sidebar-ancho:  250px;
  --foco:           0 0 0 3px rgba(74, 95, 216, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a { color: var(--primary-texto); text-decoration: none; }
a:hover { color: var(--primary-texto-hover, var(--primary-dark)); text-decoration: underline; }
/* Foco visible y uniforme para teclado en todo lo interactivo */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
summary:focus-visible, [role="tab"]:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Enlace para saltar al contenido (solo se ve al tabular) */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 10px 14px; background: var(--texto); color: #fff; border-radius: var(--radio-sm); font-weight: 700;
}
.saltar:focus { top: 12px; color: #fff; text-decoration: none; }

h1, h2, h3, h4 { color: var(--texto); font-weight: 600; margin: 0 0 4px; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13.5px; }
small { font-size: 12.5px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--fondo); padding: 1px 5px; border-radius: 4px; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 16px;
  left: 16px;
  bottom: 16px;
  width: var(--sidebar-ancho);
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px 0;
  overflow-y: auto;
  z-index: 100;
}
.sidebar__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 18px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 14px;
}
.sidebar__marca-texto { font-weight: 700; font-size: 15px; color: var(--texto); }
.sidebar__nav { list-style: none; margin: 0; padding: 0 14px; }
.sidebar__nav li { margin-bottom: 2px; }
.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radio-sm);
  color: var(--texto-suave);
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.sidebar__nav a:hover { background: #f6f9fc; color: var(--texto); text-decoration: none; }
.sidebar__nav a[aria-current="page"], .sidebar__nav a.activo { background: var(--blanco); color: var(--texto); box-shadow: var(--sombra-sm); font-weight: 600; }
.sidebar__nav a[aria-current="page"] .sidebar__icono { background: var(--primary-grad); }
.sidebar__nav a[aria-current="page"] .sidebar__icono svg { stroke: #fff; }
.sidebar__nav a.activo {
  background: var(--blanco);
  color: var(--texto);
  box-shadow: var(--sombra-sm);
  font-weight: 600;
}
.sidebar__nav-separador { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 14px; }
.topbar__encabezado { min-width: 0; }
.sidebar__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radio-sm);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}
.sidebar__nav a.activo .sidebar__icono { background: var(--primary-grad); }
.sidebar__nav a.activo .sidebar__icono svg { stroke: #fff; }
.sidebar__icono svg { width: 15px; height: 15px; stroke: var(--primary); fill: none; stroke-width: 2; }

/* ---------- Layout principal ---------- */
.contenido {
  margin-left: calc(var(--sidebar-ancho) + 32px);
  padding: 20px 24px 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar__titulo { font-size: 20px; font-weight: 700; }
.topbar__ruta { font-size: 12.5px; color: var(--texto-tenue); margin: 0 0 2px; }
.topbar__ruta a { color: var(--texto-tenue); }
.topbar__ruta a:hover { color: var(--primary-texto); }
.topbar__ruta span[aria-current] { color: var(--texto-suave); font-weight: 600; }
.topbar__descripcion { margin: 2px 0 0; font-size: 13px; color: var(--texto-suave); max-width: 70ch; }
.topbar__usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-suave); }
.topbar__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  object-fit: cover;
}
.topbar__perfil { position: relative; }
.topbar__avatar-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: none;
  border-radius: 50%;
  transition: opacity .15s ease;
}
.topbar__avatar-btn:hover { opacity: .75; transform: none; box-shadow: none; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
}
.tarjeta__cabecera {
  padding: 18px 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tarjeta__cuerpo { padding: 18px 22px 22px; }

/* Tarjetas de estadística (métrica + icono en gradiente) */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin-bottom: 4px;
}
.metrica {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.metrica p { margin: 0; }
.metrica__etiqueta { margin-bottom: 4px !important; }
.metrica__etiqueta { font-size: 13px; color: var(--texto-tenue); font-weight: 600; }
.metrica__valor { font-size: 22px; font-weight: 700; line-height: 1.2; }
.metrica__delta { font-size: 13px; font-weight: 700; }
.metrica__delta--sube { color: var(--success); }
.metrica__delta--baja { color: var(--danger); }
.metrica__icono {
  width: 48px; height: 48px;
  border-radius: var(--radio-sm);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.metrica__icono svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
.g-primary { background: var(--primary-grad); }
.g-success { background: var(--success-grad); }
.g-info    { background: var(--info-grad); }
.g-warning { background: var(--warning-grad); }
.g-danger  { background: var(--danger-grad); }
.g-dark    { background: var(--dark-grad); }

/* ---------- Tablas ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--texto-tenue);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.table caption { text-align: left; padding: 0 22px 8px; font-size: 13px; color: var(--texto-tenue); }
.table__secundario { display: block; font-size: 12.5px; color: var(--texto-tenue); margin-top: 2px; }
.table--compacta th { padding: 8px 12px; }
.table--compacta td { padding: 8px 12px; font-size: 13px; }
.table td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto-suave);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fbfcfe; }
/* El nombre de la fila es el botón que la abre (accesible con teclado); ya no hay columna de acciones */
.enlace-fila { display: inline; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; min-height: 0; font: inherit; font-weight: 600; color: var(--texto); text-align: left; cursor: pointer; line-height: inherit; border-radius: 4px; }
.enlace-fila:hover { background: none; color: var(--primary-texto); transform: none; box-shadow: none; text-decoration: underline; }
.enlace-fila:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
td .enlace-fila:not(.table__principal) { color: var(--primary-texto); }
@media (max-width: 700px) { .enlace-fila { min-height: 0 !important; } }
/* Filas que abren su detalle con un clic */
.table tbody tr[data-fila-accion] { cursor: pointer; transition: background .12s ease; }
.table tbody tr[data-fila-accion]:hover { background: var(--primary-suave); }
.table tbody tr[data-fila-accion]:hover .table__principal { color: var(--primary-texto); }
.table tbody tr[data-fila-accion]:active { background: #e3e7fb; }
.table__principal { color: var(--texto); font-weight: 600; }

.tabla-scroll { overflow-x: auto; }
/* En tabletas la tabla se desplaza dentro de su tarjeta; "contain: paint" evita que su ancho
   se cuele al desplazamiento horizontal de toda la página (comportamiento de Chrome). */
@media (min-width: 992px) { .tabla-scroll { contain: paint; } }

/* ---------- Distintivos de estado ---------- */
.distintivo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.distintivo--activo   { background: var(--ok-fondo); color: var(--ok-texto); }
.distintivo--inactivo { background: #eceef1; color: var(--texto-suave); }
.distintivo--vigente     { background: var(--ok-fondo); color: var(--ok-texto); }
.distintivo--por_vencer  { background: var(--aviso-fondo); color: var(--aviso-texto); }
.distintivo--vencida     { background: var(--error-fondo); color: var(--error-texto); }
.distintivo--cancelada   { background: #eceef1; color: var(--texto-suave); }
.distintivo--en_tramite  { background: var(--info-fondo); color: var(--info-texto); }
.distintivo--renovada    { background: #e0f4fb; color: #146a86; }

/* ---------- Avatares ---------- */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar--inicial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-grad);
  color: #fff; font-weight: 600; font-size: 14px;
}
.avatar--inicial svg { width: 60%; height: 60%; stroke: #fff; fill: none; stroke-width: 2; }
.avatar--cuadro { border-radius: var(--radio-sm); }
.celda-avatar { display: flex; align-items: center; gap: 12px; }

/* ---------- Formularios ---------- */
label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}
fieldset { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
legend { padding: 0; margin: 18px 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); }
fieldset:first-of-type legend { margin-top: 4px; }
.ayuda, .modal__ayuda { font-size: 12.5px; color: var(--texto-tenue); margin: 6px 0 0; line-height: 1.5; }
.obligatorio { color: var(--error-texto); font-weight: 700; margin-left: 2px; }
.casilla { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 14px; margin: 8px 0; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--primary); }
.casilla--destacada { padding: 12px 14px; background: var(--primary-suave); border-radius: var(--radio-sm); font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="file"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d2d6da;
  border-radius: var(--radio-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--texto);
  background: var(--blanco);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--foco);
}
input[readonly], input:disabled, select:disabled { background: var(--fondo); color: var(--texto-suave); }
input[aria-invalid="true"], .campo--error input, .campo--error select { border-color: #d62839; box-shadow: 0 0 0 3px rgba(214, 40, 57, .12); }
input[type="file"] { padding: 7px 10px; font-size: 13px; }

/* ---------- Botones ---------- */
button, .btn {
  display: inline-block;
  padding: 9px 18px;
  background: var(--primary-grad);
  color: #fff;
  border: none;
  border-radius: var(--radio-sm);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--sombra-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: var(--sombra); color: #fff; text-decoration: none; }
button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}
.btn { min-height: 36px; line-height: 18px; }
.btn--secundario {
  background: var(--blanco);
  color: var(--primary-texto);
  border: 1px solid var(--primary);
  box-shadow: none;
}
.btn--secundario:hover { color: var(--primary-dark); background: var(--primary-suave); }
.btn--peligro { background: var(--danger-grad); }
.btn--sm { padding: 6px 12px; font-size: 12.5px; min-height: 32px; }
.btn--bloque { display: block; width: 100%; text-align: center; }
.btn--enlace {
  background: none; box-shadow: none; color: var(--texto-suave);
  padding: 6px 8px; font-weight: 600;
}
.btn--enlace:hover { background: #f6f9fc; color: var(--texto); transform: none; }
.btn--icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
}
.btn--icono svg { width: 16px; height: 16px; }

.acciones-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acciones-fila form { display: inline; }

/* ---------- Avisos ---------- */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  border-left-width: 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
}
.alert::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.alert--error   { background: var(--error-fondo); color: var(--error-texto); border-color: #f5c2c2; border-left-color: #d62839; }
.alert--error::before { background-color: #d62839; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
.alert--success { background: var(--ok-fondo); color: var(--ok-texto); border-color: #b5ecd0; border-left-color: #17ad37; }
.alert--success::before { background-color: #17ad37; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.alert--aviso   { background: var(--aviso-fondo); color: var(--aviso-texto); border-color: #f3dca0; border-left-color: #f0a500; }
.alert--aviso::before { background-color: #f0a500; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
.alert--info    { background: var(--info-fondo); color: var(--info-texto); border-color: #c9d8f7; border-left-color: #2952a3; }
.alert--info::before { background-color: #2952a3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E"); }
.alert a { color: inherit; text-decoration: underline; }
.alert p { margin: 0; }

/* ---------- Estado vacío ---------- */
.vacio {
  text-align: center;
  padding: 36px 20px;
  color: var(--texto-tenue);
}

/* ---------- Login ---------- */
.login-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--dark-grad);
}
.login-tarjeta {
  width: 100%;
  max-width: 380px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  padding: 30px 32px 34px;
}
.login-tarjeta h1 { font-size: 20px; margin-bottom: 4px; }
.login-tarjeta p.sub { color: var(--texto-tenue); font-size: 13px; margin: 0 0 18px; }
.login-tarjeta button { width: 100%; margin-top: 20px; padding: 11px; }

/* ---------- Modal ---------- */
dialog.modal {
  background: var(--blanco);
  width: min(600px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  border: none;
  border-radius: var(--radio);
  padding: 0;
  box-shadow: var(--sombra-lg);
  color: var(--texto);
}
dialog.modal::backdrop { background: rgba(52,71,103,.45); backdrop-filter: blur(2px); }
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--blanco); z-index: 1;
}
.modal__header h2 { margin: 0; font-size: 17px; }
.modal__header-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal__header-etiqueta { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); }
.modal__header-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-tenue); }
.modal__header-extra { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.modal__cerrar {
  background: none; border: none; box-shadow: none;
  font-size: 24px; line-height: 1; color: var(--texto-tenue);
  width: 36px; height: 36px; padding: 0; cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__cerrar:hover { background: var(--fondo); }
.modal__cerrar:hover { color: var(--texto); transform: none; box-shadow: none; }

.modal__resumen-rapido {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px;
  padding: 16px 24px; background: var(--fondo); border-bottom: 1px solid var(--borde);
}
.modal__resumen-rapido > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal__resumen-etiqueta { font-size: 11.5px; color: var(--texto-tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.modal__resumen-valor { font-size: 13.5px; font-weight: 700; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal__resumen-nota { font-size: 12px; color: var(--texto-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal__tabs {
  display: flex; align-items: center; gap: 2px; padding: 0 16px;
  border-bottom: 1px solid var(--borde); flex-wrap: wrap;
  background: var(--blanco);
}
.modal__tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 12px 12px; font-size: 13px; font-weight: 700; color: var(--texto-tenue);
  background: none; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.modal__tab:hover { color: var(--texto); transform: none; box-shadow: none; }
.modal__tab--activo { color: var(--primary-texto); border-bottom-color: var(--primary); }
.modal__tab--peligro { color: #c0392b; margin-left: auto; }
.modal__tab--peligro.modal__tab--activo, .modal__tab--peligro:hover { color: #c0392b; border-bottom-color: #c0392b; }
.modal__tab-contador {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--fondo); color: var(--texto-tenue); font-size: 11.5px; font-weight: 700;
}
.modal__tab--activo .modal__tab-contador { background: var(--primary); color: #fff; }

.modal__panel { padding: 20px 24px; }

/* Métricas en celular: cuadrícula de 2×2 en vez de 4 tarjetas apiladas,
   para que el buscador y la lista queden a la vista sin tanto desplazamiento. */
@media (max-width: 700px) {
  .metricas { grid-template-columns: 1fr 1fr; gap: 12px; }
  .metrica { padding: 14px; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .metrica__icono { width: 34px; height: 34px; }
  .metrica__icono svg { width: 17px; height: 17px; }
  .metrica__etiqueta { font-size: 12px; line-height: 1.3; }
  .metrica__valor { font-size: 19px; }
  .metrica p { margin: 0; }
  .metrica form { margin-top: 4px !important; }
}

/* ---------- Modal amplio con navegación lateral (detalle de póliza) ----------
   La barra de pestañas horizontal se cortaba con 5-6 secciones. Una lista
   vertical cabe siempre, agrupa por intención (consultar / gestionar /
   riesgo) y deja las acciones destructivas separadas al final. */
dialog.modal.modal--amplio { width: min(940px, 96vw); max-height: 94vh; }
.modal--amplio .modal__resumen-rapido { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 24px; }
.modal__cuerpo { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 360px; }
.modal__nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; border-right: 1px solid var(--borde); background: var(--blanco);
}
.modal__nav-grupo {
  padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-tenue);
}
.modal__nav-grupo:first-child { padding-top: 2px; }
.modal__nav .modal__tab {
  width: 100%; justify-content: flex-start; gap: 10px;
  padding: 9px 10px; border: none; border-left: 3px solid transparent; border-radius: var(--radio-sm);
  font-size: 13px; text-align: left; white-space: normal; line-height: 1.3;
}
.modal__nav .modal__tab > span:not(.modal__tab-contador) { flex: 1; }
.modal__nav .modal__tab:hover { background: var(--fondo); }
.modal__nav .modal__tab--activo {
  color: var(--primary-texto); border-left-color: var(--primary);
  background: #eef0fc; background: color-mix(in srgb, var(--primary) 9%, #fff);
}
.modal__nav .modal__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.modal__nav-riesgo {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borde);
}
.modal__nav .modal__tab--peligro { margin-left: 0; color: #c0392b; }
.modal__nav .modal__tab--peligro:hover { background: #fff5f4; }
.modal__nav .modal__tab--peligro.modal__tab--activo { background: #fdecea; border-left-color: #c0392b; color: #c0392b; }
.modal__contenido { min-width: 0; }
.modal__contenido .modal__panel { padding: 20px 24px 24px; }
.modal__contenido .modal__panel--peligro { min-height: 100%; }
.modal__panel-titulo { margin: 0 0 14px; font-size: 15px; color: var(--texto); }
.modal__panel--peligro .modal__panel-titulo { color: #c0392b; }
.modal__subtitulo { margin: 16px 0 6px; font-size: 12px; font-weight: 700; color: var(--texto-suave); }

/* Recibos como mapa de cuadros: cabe completo sin barra de desplazamiento
   (plan mensual: cada fila de 12 = un año de la vigencia). */
.recibos-mapa {
  list-style: none; margin: 6px 0 8px; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px;
}
.recibo-chip {
  display: flex; align-items: center; justify-content: center; height: 24px;
  border-radius: 5px; font-size: 11px; font-weight: 700; cursor: default;
}
.recibo-chip--pagado,     .recibos-leyenda .recibo-chip--pagado     { background: #d4f7e4; color: #187d4e; }
.recibo-chip--vencido,    .recibos-leyenda .recibo-chip--vencido    { background: #fde3e3; color: #a3231b; }
.recibo-chip--por_vencer, .recibos-leyenda .recibo-chip--por_vencer { background: #fff3d6; color: #8a5a00; box-shadow: inset 0 0 0 1px #f0c36d; }
.recibo-chip--pendiente,  .recibos-leyenda .recibo-chip--pendiente  { background: #eceef1; color: #67748e; }
.recibo-chip--cancelado,  .recibos-leyenda .recibo-chip--cancelado  { background: repeating-linear-gradient(45deg, #f4f5f7, #f4f5f7 3px, #e6e8ec 3px, #e6e8ec 6px); color: #a0a8b6; }
.recibos-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--texto-tenue); }
.recibos-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.recibos-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.recibos-proximos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.recibos-proximos li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--borde); }
.recibos-proximos li:last-child { border-bottom: none; }
.recibos-proximos__num { color: var(--texto-tenue); width: 76px; flex-shrink: 0; }
.recibos-proximos__monto { margin-left: auto; font-weight: 600; }

/* Endosos: línea de tiempo compacta; los anteriores se despliegan a pedido. */
.endosos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.endosos li { display: flex; gap: 12px; padding: 10px 12px; background: var(--fondo); border-radius: var(--radio-sm); font-size: 13px; }
.endosos__fecha { flex-shrink: 0; width: 78px; color: var(--texto-tenue); font-size: 12px; padding-top: 1px; }
.endosos p { margin: 2px 0; color: var(--texto-suave); }
.endosos small { color: var(--texto-tenue); font-size: 12px; }
.modal__mas { margin-top: 8px; }
.modal__mas summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--primary-texto); padding: 4px 0; }
.modal__mas[open] summary { margin-bottom: 8px; }

@media (max-width: 700px) {
  dialog.modal.modal--amplio { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; margin: 0; border-radius: 0; }
  .modal--amplio .modal__resumen-rapido { grid-template-columns: 1fr 1fr; padding: 12px 16px; }
  .modal__cuerpo { grid-template-columns: 1fr; min-height: 0; }
  /* En celular, las secciones se vuelven botones que bajan de línea: todas visibles, sin cortes. */
  .modal__nav { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--borde); }
  .modal__nav-grupo { display: none; }
  .modal__nav .modal__tab {
    width: auto; flex: 1 1 calc(33.33% - 6px); justify-content: center; gap: 6px;
    padding: 8px 6px; font-size: 12px; border: 1px solid var(--borde); border-radius: var(--radio-sm); text-align: center;
  }
  .modal__nav .modal__tab > span:not(.modal__tab-contador) { flex: 0 1 auto; }
  .modal__nav .modal__tab--activo { border-color: var(--primary); }
  .modal__nav-riesgo { flex-direction: row; flex: 1 1 100%; gap: 6px; margin-top: 0; padding-top: 0; border-top: none; }
  .modal__nav .modal__tab--peligro.modal__tab--activo { border-color: #c0392b; }
  .modal__contenido .modal__panel { padding: 16px; }
  .recibos-mapa { gap: 3px; }
  .recibo-chip { height: 22px; font-size: 10px; }
  .recibos-resumen { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .recibos-resumen > div { padding: 8px; }
  .recibos-resumen strong { font-size: 14px; }
}

/* ---------- Buscador de listados ---------- */
.buscador {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 22px; margin-top: 14px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}
.buscador__campo { position: relative; flex: 1 1 280px; min-width: 0; }
.buscador__campo svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); pointer-events: none; }
.buscador__campo input[type="search"] { padding-left: 38px; background: var(--blanco); }
.buscador__agente { flex: 0 1 260px; width: auto; min-width: 180px; background: var(--blanco); }
.buscador .btn { flex-shrink: 0; }
input[type="search"] { width: 100%; padding: 9px 12px; border: 1px solid #d2d6da; border-radius: var(--radio-sm); font-size: 14px; font-family: inherit; color: var(--texto); }
input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(94,114,228,.18); }
@media (max-width: 700px) {
  .buscador { padding: 12px 16px; }
  .buscador__agente, .buscador__campo { flex: 1 1 100%; }
  .buscador .btn { flex: 1 1 auto; }
}

/* ---------- Configuración ---------- */
.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.config-grid > * { min-width: 0; }
code { overflow-wrap: anywhere; }
.config-tarjeta { margin-bottom: 0; }
.config-tarjeta--ancha { grid-column: 1 / -1; }
.config-identidad { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.config-opcional { font-weight: 400; color: var(--texto-tenue); }
.config-etiqueta { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--texto); }
.config-color { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.config-color input[type="color"] {
  width: 52px; height: 40px; padding: 3px; border: 1px solid #d2d6da; border-radius: var(--radio-sm);
  background: var(--blanco); cursor: pointer; flex-shrink: 0;
}
.config-color__sugeridos { display: flex; gap: 6px; flex-wrap: wrap; }
.config-color__muestra {
  width: 26px; height: 26px; min-width: 0; padding: 0; border-radius: 50%;
  border: 2px solid var(--blanco); box-shadow: 0 0 0 1px var(--borde);
}
.config-color__muestra:hover { transform: scale(1.12); box-shadow: 0 0 0 1px var(--texto-tenue); }
.config-sufijo { display: flex; align-items: center; gap: 8px; }
.config-sufijo input { width: 90px; flex-shrink: 0; }
.config-sufijo span { font-size: 12px; color: var(--texto-tenue); line-height: 1.3; }

.config-preview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 14px; background: var(--fondo); border-radius: var(--radio); border: 1px solid var(--borde);
}
.config-preview__menu, .config-preview__login {
  background: var(--blanco); border-radius: var(--radio-sm); box-shadow: var(--sombra-sm); padding: 12px; min-width: 0;
}
.config-preview__marca {
  display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--borde); min-width: 0;
}
.config-preview__logo { max-height: 30px; max-width: 48px; object-fit: contain; flex-shrink: 0; }
.config-preview__nombre { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-preview__item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 4px 0; }
.config-preview__item--tenue { color: var(--texto-tenue); font-weight: 400; }
.config-preview__punto { width: 16px; height: 16px; border-radius: 5px; background: var(--primary); flex-shrink: 0; }
.config-preview__punto--tenue { background: var(--borde); }
.config-preview__login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.config-preview__login strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.config-preview__login span { font-size: 12px; color: var(--texto-tenue); }
.config-preview__boton { margin-top: 6px; padding: 4px 14px; border-radius: 6px; color: #fff !important; font-weight: 700; background: var(--primary); }

/* Marca con logo en el menú lateral y en el inicio de sesión */
/* Logo + nombre del sistema lado a lado. El logo se limita a un ancho moderado
   para que el nombre siempre quepa a su derecha (hasta 2 líneas). */
.sidebar__logo { max-height: 40px; max-width: 64px; object-fit: contain; display: block; flex-shrink: 0; }
.sidebar__marca-texto { min-width: 0; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mobile-topbar__marca { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mobile-topbar__logo { max-height: 28px; max-width: 56px; object-fit: contain; flex-shrink: 0; }
.mobile-topbar__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-logo { display: block; max-height: 70px; max-width: 220px; object-fit: contain; margin: 0 auto 12px; }

@media (max-width: 900px) {
  .config-grid, .config-identidad { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .config-preview { grid-template-columns: 1fr; }
}

/* ---------- Cobranza ---------- */
.metrica--enlace { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.metrica--enlace:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--sombra-lg); text-decoration: none; }
.metrica--activa { box-shadow: 0 0 0 2px var(--primary), var(--sombra); }
.metrica__delta { color: var(--texto-tenue); }
.sidebar__globo {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #d1253a; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.cobranza-poliza { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Pestaña "Recibos" del modal de póliza */
.recibos-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.recibos-resumen > div { background: var(--fondo); border-radius: var(--radio-sm); padding: 10px 12px; }
.recibos-resumen strong { display: block; font-size: 16px; color: var(--texto); }
.recibos-resumen span { font-size: 11.5px; color: var(--texto-tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.recibos-progreso { height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.recibos-progreso > span { display: block; height: 100%; background: var(--success-grad); }
.recibos-lista { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.recibos-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid var(--borde); }
.recibos-lista li:last-child { border-bottom: none; }
.recibos-lista__num { width: 52px; color: var(--texto-tenue); flex-shrink: 0; }
.recibos-lista__fecha { flex: 1; }
.recibos-lista__monto { width: 100px; text-align: right; flex-shrink: 0; }

/* Encabezado de modal con foto de la persona (cliente) */
.modal__header-persona { display: flex; align-items: center; gap: 12px; min-width: 0; }
.modal__header-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 18px;
}
.modal__header-persona h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.modal__resumen-valor { color: var(--primary-texto); }
a.modal__resumen-valor:hover { text-decoration: underline; }
.modal__resumen-valor--vacio { color: var(--texto-tenue); font-weight: 600; font-style: italic; }
.modal__tab-contador--alerta { background: #fff3d6; color: #8a5a00; }
.modal__tab--activo .modal__tab-contador--alerta { background: #f5a623; color: #fff; }

/* Recuadro destacado dentro de un panel (p. ej. "Llenar desde la Constancia") */
.modal__destacado {
  padding: 14px 16px; margin-bottom: 6px;
  background: #f1f3fd; border: 1px solid #dfe3fb; border-radius: var(--radio-sm);
  font-size: 13px;
}
.modal__destacado input[type="file"] { background: var(--blanco); }

/* Checklist de documentos del cliente */
.checklist-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist-docs__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--fondo); border-radius: var(--radio-sm);
}
.checklist-docs__icono {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.checklist-docs__icono--ok { background: #d4f7e4; color: #187d4e; }
.checklist-docs__icono--pendiente { background: #fff3d6; color: #8a5a00; }
.checklist-docs__texto { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--texto); }
.checklist-docs__texto small { display: block; font-weight: 400; color: var(--texto-tenue); font-size: 12px; }
.checklist-docs__item .btn { flex-shrink: 0; }
.checklist-docs__eliminar { display: inline-flex; margin: 0; }
.btn--peligro-suave { background: var(--blanco); color: #b42318; border: 1px solid #f0c2bd; box-shadow: none; }
.btn--peligro-suave:hover { background: #fdecea; color: #912018; border-color: #e5998f; }

/* Acción secundaria plegable dentro de un panel (p. ej. "Cambiar forma de pago") */
.modal__desplegable {
  margin-top: 16px; padding: 12px 14px;
  background: var(--fondo); border-radius: var(--radio-sm);
}
.modal__desplegable summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primary-texto);
}
.modal__desplegable[open] summary { margin-bottom: 10px; }
.modal__desplegable select { margin: 0; width: auto; flex: 1 1 200px; }
.modal__desplegable--peligro { background: #fff8f7; }
.modal__desplegable--peligro summary { color: #c0392b; }
.modal__desplegable .modal__fila-archivo input { margin: 0; }

/* Oculto a la vista pero legible para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.modal__panel--peligro { background: #fff8f7; }
.modal__seccion { padding: 20px 24px; border-bottom: 1px solid var(--borde); }
.modal__seccion:last-child { border-bottom: none; }
.modal__seccion--peligro {
  background: #fff8f7;
}
.modal__seccion--peligro h3 { color: #c0392b; }
.modal__seccion h3 { font-size: 13px; color: var(--texto-tenue); margin: 0 0 14px; }
.modal__avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.modal__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.modal__avatar--inicial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-grad); color: #fff; font-size: 24px; font-weight: 600;
}
.modal__label-archivo { display: inline-block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.modal__grid-full { grid-column: 1 / -1; }
.modal__grid label { margin-top: 10px; }
.modal__acciones { margin-top: 16px; }
.modal__enlace { font-size: 13px; margin: 12px 0 0; }
.modal__fila-archivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.modal__fila-archivo input[type="file"] { flex: 1 1 170px; width: auto; min-width: 0; }

/* ---------- Dropdowns de filtro (estilo Argon) ---------- */
.tarjeta__cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dropdown { position: relative; display: inline-block; }
.btn--dropdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  box-shadow: none;
  padding: 8px 14px;
  font-size: 13px;
}
.btn--dropdown:hover { transform: none; box-shadow: var(--sombra-sm); color: var(--texto); }
.btn--dropdown svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn--dropdown[aria-expanded="true"] { box-shadow: var(--sombra-sm); color: var(--texto); }
.dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--blanco);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-lg);
  padding: 8px;
  z-index: 50;
}
.dropdown__menu--abierto { display: block; }
.dropdown__item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radio-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
}
.dropdown__item:hover, .dropdown__item:focus-visible { background: var(--fondo); color: var(--texto); text-decoration: none; outline-offset: -2px; }
.dropdown__item--activo, .dropdown__item[aria-current="true"] { background: var(--primary-suave); color: var(--primary-texto); }
.dropdown--derecha .dropdown__menu { left: auto; right: 0; }

/* ---------- Catálogo de productos ---------- */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.producto-card {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.producto-card .metrica__icono { width: 42px; height: 42px; }
.producto-card .metrica__icono svg { width: 20px; height: 20px; }
.producto-card__info { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.producto-card__nombre { font-weight: 700; color: var(--texto); margin: 0; }
.producto-card__desc { font-size: 13px; color: var(--texto-suave); margin: 0; line-height: 1.5; }
.producto-card__acciones { margin-top: auto; padding-top: 6px; }

/* ---------- Selector de íconos ---------- */
.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.icon-picker__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.icon-picker__opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
  text-align: center;
  margin: 0;
  transition: border-color .12s ease, background .12s ease;
}
.icon-picker__svg {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--fondo);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-picker__svg svg { width: 16px; height: 16px; stroke: var(--texto-suave); fill: none; stroke-width: 2; }
.icon-picker__etiqueta { font-size: 12px; color: var(--texto-suave); line-height: 1.3; }
.icon-picker__opcion:hover { border-color: var(--primary); }
.icon-picker__input:checked + .icon-picker__opcion {
  border-color: var(--primary);
  background: rgba(94,114,228,.06);
}
.icon-picker__input:checked + .icon-picker__opcion .icon-picker__svg { background: var(--primary-grad); }
.icon-picker__input:checked + .icon-picker__opcion .icon-picker__svg svg { stroke: #fff; }
.icon-picker__input:checked + .icon-picker__opcion .icon-picker__etiqueta { color: var(--texto); font-weight: 600; }
.icon-picker__input:focus-visible + .icon-picker__opcion { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Menú móvil (barra superior + panel deslizable) ---------- */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 14px;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  padding: 0 16px;
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  z-index: 150;
}
.mobile-topbar__hamburguesa {
  background: none;
  border: none;
  box-shadow: none;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  color: var(--texto);
  display: inline-flex;
}
.mobile-topbar__hamburguesa:hover { transform: none; box-shadow: none; }
.mobile-topbar__marca { font-weight: 700; font-size: 15px; color: var(--texto); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 18, .5);
  z-index: 190;
}
.sidebar-backdrop--visible { display: block; }

.sidebar__cerrar-movil {
  display: none;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  color: var(--texto-tenue);
  padding: 0 4px;
  margin-left: auto;
  cursor: pointer;
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .mobile-topbar { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 300px;
    margin: 0;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 200;
  }
  .sidebar--abierta { transform: translateX(0); }
  .sidebar__cerrar-movil { display: inline-block; }

  .contenido { margin-left: 0; padding: 76px 16px 40px; }
  .topbar__usuario { display: none; }
  .mobile-topbar__perfil { margin-left: auto; }
  .mobile-topbar__perfil .topbar__avatar { width: 32px; height: 32px; font-size: 12px; }
  .topbar { margin-bottom: 14px; }
  .topbar__descripcion { font-size: 12.5px; }
  .modal__grid { grid-template-columns: 1fr; }
  .modal__resumen-rapido { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
  .modal__tabs { padding: 0 8px; }
  .modal__tab { padding: 12px 10px; font-size: 12px; }
  .modal__tab--peligro { margin-left: 0; }
  .modal__panel { padding: 16px; }
}

/*
 * Tablas en pantallas angostas: en vez de encoger columnas o forzar
 * scroll horizontal (antipatrón de UX — oculta contenido sin avisar y
 * es incómodo de desplazar con el pulgar), cada fila se convierte en
 * una tarjeta apilada. Cada celda muestra su encabezado como etiqueta
 * (vía el atributo data-label), excepto la celda principal (nombre +
 * foto/ícono, sin etiqueta — actúa como título de la tarjeta) y la de
 * acciones (los botones ya se explican solos).
 */
/* v76: las tablas se vuelven tarjetas en todo celular y tableta (< 992 px), no solo < 700 px. */
@media (max-width: 991.98px) {
  .tabla-scroll { overflow-x: visible; }

  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }

  .table tr {
    margin: 0 0 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
  }
  .table tbody tr:hover { background: none; }
  .table tbody tr[data-fila-accion]:hover { background: none; }
  .table tbody tr[data-fila-accion]:active { background: var(--primary-suave); }
  .table tr:last-child { margin-bottom: 0; }

  .table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
  }
  .table td:last-child { border-bottom: none; }
  .table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--texto-tenue);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    flex-shrink: 0;
  }

  .table td.celda-principal {
    display: block;
    text-align: left;
    background: var(--fondo);
    padding: 12px 16px;
  }
  .table td.celda-principal::before { content: none; }

  .table td.celda-acciones {
    justify-content: flex-end;
  }
  .table td.celda-acciones::before { content: none; }
  .table td.celda-acciones .acciones-fila { justify-content: flex-end; }

  /* Objetivos táctiles más grandes (mínimo recomendado ~44x44px) */
  .btn--icono { width: 40px; height: 40px; }
  .btn--icono svg { width: 18px; height: 18px; }
  .btn--sm { padding: 8px 14px; }

  /* Filtros y botón "Nuevo x": apilados y a todo lo ancho, más fáciles de tocar */
  .tarjeta__cabecera { flex-direction: column; align-items: stretch; }
  .tarjeta__cabecera-acciones { flex-direction: column; align-items: stretch; }
  .tarjeta__cabecera-acciones .dropdown,
  .tarjeta__cabecera-acciones > .btn,
  .tarjeta__cabecera-acciones > a.btn { width: 100%; }
  .btn--dropdown { width: 100%; justify-content: space-between; }
  .dropdown__menu { left: 0; right: 0; min-width: 0; width: 100%; }

  .metricas { grid-template-columns: 1fr 1fr; gap: 12px; }
}


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  button:hover, .btn:hover { transform: none; }
}

@media (max-width: 700px) {
  .btn, button { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .modal__cerrar { width: 44px; height: 44px; }
}

/* ---------- Lector de pólizas PDF ---------- */
.pdf-icono { color: #c0392b; }
.pdf-detalle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.pdf-visor iframe { width: 100%; height: 78vh; min-height: 480px; border: 0; border-radius: 0 0 var(--radio) var(--radio); background: #525659; display: block; }
.pdf-visor__nota { margin: 0; padding: 8px 22px 12px; font-size: 12.5px; color: var(--texto-tenue); }
.pdf-visor .tarjeta__cabecera { flex-wrap: wrap; gap: 8px; }
.pdf-lateral .tarjeta { margin-bottom: 16px; }
.pdf-lateral .kv--2col { grid-template-columns: minmax(110px, max-content) 1fr; }
@media (min-width: 992px) { .celda-acciones { white-space: nowrap; } }
.texto-pdf { max-height: 420px; overflow: auto; background: var(--fondo); border-radius: var(--radio-sm); padding: 10px 12px; }
.texto-pdf pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45; margin: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.texto-pdf__pagina { font-size: 12px; font-weight: 700; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 4px; }
.bitacora { list-style: none; margin: 0; padding: 0; }
.bitacora li { padding: 8px 0; border-top: 1px solid var(--borde); font-size: 13px; }
.bitacora li:first-child { border-top: 0; padding-top: 0; }
.bitacora__fecha { display: inline-block; min-width: 116px; color: var(--texto-tenue); font-size: 12px; }
.bitacora__quien { color: var(--texto-tenue); font-size: 12px; margin-left: 6px; }
.bitacora__detalle { color: var(--texto-tenue); font-size: 12px; margin-top: 2px; padding-left: 116px; }
@media (max-width: 900px) {
  .pdf-detalle { grid-template-columns: minmax(0, 1fr); }
  .pdf-visor iframe { height: 60vh; min-height: 360px; }
  .bitacora__detalle { padding-left: 0; }
}
.contador-globo { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #d1253a; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; vertical-align: 1px; }

/* ---------- Lector de pólizas PDF: revisión de campos (fase 3) ---------- */
.pdf-detalle--revision { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
.campos-pdf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; }
.campo-pdf { grid-column: span 3; min-width: 0; }
.campo-pdf--corto { grid-column: span 2; }
.campo-pdf--medio { grid-column: span 3; }
.campo-pdf--largo { grid-column: span 6; }
.campo-pdf label { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: 0; font-size: 12.5px; }
.campo-pdf input { width: 100%; }
.campo-pdf input[readonly] { background: var(--fondo); color: var(--texto-tenue); }
.campo-pdf--error input { border-color: #e0524a; box-shadow: 0 0 0 3px rgba(224, 82, 74, .12); }
.campo-pdf__origen { margin: 4px 0 0; font-size: 12px; color: var(--texto-tenue); word-break: break-word; }
.campo-pdf__aviso { margin: 4px 0 0; font-size: 12px; color: var(--aviso-texto); word-break: break-word; }
.nivel { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; line-height: 17px; white-space: nowrap; }
.nivel--alta { background: var(--ok-fondo); color: var(--ok-texto); }
.nivel--media { background: var(--aviso-fondo); color: var(--aviso-texto); }
.nivel--baja { background: var(--error-fondo); color: var(--error-texto); }
.nivel--editado { background: var(--info-fondo); color: var(--info-texto); }
.barra-confianza { height: 6px; border-radius: 999px; background: var(--fondo); overflow: hidden; margin: 8px 0 2px; }
.barra-confianza__relleno { display: block; height: 100%; border-radius: 999px; background: #a3231b; transition: width .3s; }
.barra-confianza__relleno--alta { background: #2dce89; }
.barra-confianza__relleno--media { background: #f0a500; }
.texto-error { color: var(--error-texto); }
.texto-aviso { color: var(--aviso-texto); }
.plantilla-json { max-height: 70vh; overflow: auto; background: var(--fondo); border-radius: var(--radio-sm); padding: 12px 14px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 1100px) {
  .pdf-detalle--revision { grid-template-columns: minmax(0, 1fr); }
  .pdf-detalle--revision .pdf-visor iframe { height: 55vh; min-height: 320px; }
}
@media (max-width: 640px) {
  .campos-pdf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-pdf, .campo-pdf--corto, .campo-pdf--medio { grid-column: span 1; }
  .campo-pdf--largo { grid-column: span 2; }
}
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ============================================================
   Componentes compartidos (v62) — una sola definición para
   datos clave→valor, pasos, secciones plegables, opciones,
   barra de acciones fija y listas de estado. Se usan en el
   lector de PDF, el detalle de póliza, cobranza y clientes.
   ============================================================ */

/* Lista clave → valor: alineada, escaneable, sin "Etiqueta: valor" en prosa */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; align-items: baseline; }
.kv dt { color: var(--texto-tenue); font-weight: 600; font-size: 12.5px; }
.kv dd { margin: 0; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.kv dd small { display: block; color: var(--texto-tenue); font-size: 12px; }
.kv--2col { grid-template-columns: minmax(110px, max-content) 1fr minmax(110px, max-content) 1fr; }
.kv--importes { grid-template-columns: 1fr auto; }
.kv--importes dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv--importes dt.total, .kv--importes dd.total { border-top: 1px solid var(--borde); padding-top: 6px; font-weight: 700; color: var(--texto); }
.kv--compacta { font-size: 13px; gap: 3px 12px; }
@media (max-width: 640px) { .kv--2col { grid-template-columns: minmax(100px, max-content) 1fr; } }

/* Franja de datos clave (una sola fuente de verdad, arriba de una pantalla larga) */
.franja { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; padding: 14px 22px; background: var(--fondo); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.franja > div { min-width: 0; }
.franja span { display: block; font-size: 11.5px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.franja strong { display: block; font-size: 15px; color: var(--texto); overflow-wrap: anywhere; }
.franja small { display: block; font-size: 12px; color: var(--texto-tenue); }
.tarjeta > .franja:last-child { border-bottom: 0; border-radius: 0 0 var(--radio) var(--radio); }
.tarjeta > .franja:first-child { border-top: 0; border-radius: var(--radio) var(--radio) 0 0; }
.table--compacta td, .table--compacta th { white-space: nowrap; }

/* Sección numerada de un flujo (cliente, datos, resumen…) */
.paso { scroll-margin-top: 90px; }
.paso__cabecera { display: flex; align-items: center; gap: 12px; padding: 16px 22px 0; }
.paso__numero { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--borde); }
.paso--ok .paso__numero { background: var(--ok-fondo); color: var(--ok-texto); border-color: transparent; }
.paso--pendiente .paso__numero { background: var(--aviso-fondo); color: var(--aviso-texto); border-color: transparent; }
.paso--bloqueado .paso__numero { background: var(--error-fondo); color: var(--error-texto); border-color: transparent; }
.paso__titulo { margin: 0; font-size: 16px; }
.paso__estado { margin-left: auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.paso--ok .paso__estado { color: var(--ok-texto); }
.paso--pendiente .paso__estado { color: var(--aviso-texto); }
.paso--bloqueado .paso__estado { color: var(--error-texto); }
.paso .tarjeta__cuerpo { padding-top: 12px; }

/* Navegación de pasos (arriba): muestra en qué estado está cada sección y salta a ella */
.pasos-nav { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 22px 14px; }
.pasos-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--borde); font-size: 12.5px; font-weight: 600; color: var(--texto-suave); background: var(--blanco); }
.pasos-nav a:hover { text-decoration: none; border-color: var(--primary); color: var(--primary-texto); }
.pasos-nav a i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--fondo); }
.pasos-nav a.es-ok i { background: var(--ok-fondo); color: var(--ok-texto); }
.pasos-nav a.es-pendiente i { background: var(--aviso-fondo); color: var(--aviso-texto); }
.pasos-nav a.es-bloqueado i { background: var(--error-fondo); color: var(--error-texto); }

/* Lista de pendientes / bloqueos con enlace a la sección */
.lista-estado { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-estado li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.lista-estado li::before { content: '•'; color: var(--texto-tenue); }
.lista-estado--error li::before { content: '✖'; color: var(--error-texto); font-size: 12px; margin-top: 2px; }
.lista-estado--aviso li::before { content: '⚠'; color: var(--aviso-texto); font-size: 12px; margin-top: 2px; }
.lista-simple { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.lista-simple li { margin: 3px 0; }

/* Barra de acciones fija al pie de una pantalla larga */
.barra-acciones { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 22px; margin-top: 4px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio) var(--radio); box-shadow: 0 -6px 18px rgba(52,71,103,.06); }
.barra-acciones__estado { font-size: 13px; color: var(--texto-suave); flex: 1 1 200px; min-width: 0; }
.barra-acciones__estado strong { color: var(--texto); }
.barra-acciones__estado.es-pendiente strong { color: var(--aviso-texto); }
.barra-acciones__estado.es-bloqueado strong { color: var(--error-texto); }
.barra-acciones__botones { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.barra-acciones .btn { flex-shrink: 0; }
.confirmar-pdf > form > .barra-acciones { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); margin-top: 0; }
@media (max-width: 640px) { .barra-acciones { padding: 10px 16px; } .barra-acciones__botones { width: 100%; } .barra-acciones .btn { flex: 1 1 auto; } }

/* Sección plegable con conteo (para grupos con muchos datos: asegurados, vehículos, historial…) */
.plegable { border: 1px solid var(--borde); border-radius: var(--radio-sm); margin-top: 10px; background: var(--blanco); }
.plegable > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--texto); border-radius: var(--radio-sm); }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--texto-tenue); border-bottom: 2px solid var(--texto-tenue); transform: rotate(-45deg); transition: transform .15s ease; flex-shrink: 0; margin-left: 2px; }
.plegable[open] > summary::before { transform: rotate(45deg); }
.plegable > summary:hover { background: var(--fondo); }
.plegable > summary .contador { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--texto-tenue); background: var(--fondo); padding: 1px 8px; border-radius: 999px; }
.plegable > summary .contador.es-alerta { background: var(--aviso-fondo); color: var(--aviso-texto); }
.plegable__cuerpo { padding: 4px 14px 14px; border-top: 1px solid var(--borde); }
.plegable--tenue { border-style: dashed; }
.plegable--tenue > summary { color: var(--texto-suave); font-weight: 600; }

/* Opciones excluyentes como tarjetas (cliente, duplicado/renovación) */
.opciones-radio { display: grid; gap: 8px; margin-top: 8px; }
.opcion-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-sm); cursor: pointer; margin: 0; font-weight: 400; }
.opcion-radio:hover { border-color: var(--primary); }
.opcion-radio:has(input:checked) { border-color: var(--primary); background: var(--primary-suave); }
.opcion-radio:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.opcion-radio input[type="radio"] { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--primary); }
.opcion-radio > span { flex: 1; min-width: 0; font-size: 14px; }
.opcion-radio small { display: block; color: var(--texto-tenue); font-size: 12.5px; margin-top: 2px; }
.opcion-radio select { width: 100%; max-width: 480px; }
.opcion-radio--deshabilitada { opacity: .6; cursor: not-allowed; }

/* Estados de una sección (ok / info / error) */
.confirmar-estado { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radio-sm); font-size: 14px; }
.confirmar-estado--ok { background: var(--ok-fondo); color: var(--ok-texto); }
.confirmar-estado--info { background: var(--info-fondo); color: var(--info-texto); }
.confirmar-estado--error { background: var(--error-fondo); color: var(--error-texto); }
.tarjeta--alerta { border-left: 4px solid #d62839; }

/* Datos con los que se crea un cliente nuevo (dentro de la opción) */
.datos-cliente-nuevo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 6px 0 4px; font-size: 12.5px; }
.datos-cliente-nuevo em { font-style: normal; color: var(--texto-tenue); }
@media (max-width: 640px) { .datos-cliente-nuevo { grid-template-columns: 1fr; } }

/* Campos dudosos que se corrigen en la misma pantalla */
.sin-revisar { border: 1px solid #f3dca0; background: #fffaf0; border-radius: var(--radio-sm); padding: 12px 14px; margin-bottom: 10px; }
.sin-revisar__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.sin-revisar__campo { min-width: 0; }
.sin-revisar__campo label { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 0; font-size: 12.5px; }
.sin-revisar__campo input { width: 100%; }

/* Pantalla "PDF a la izquierda, decisiones a la derecha" */
.pdf-detalle--confirmar { grid-template-columns: minmax(0, 1fr) minmax(440px, 1.15fr); }
.pdf-detalle--confirmar .pdf-visor { position: sticky; top: 12px; }
.pdf-detalle--confirmar .pdf-visor iframe { height: calc(100vh - 150px); min-height: 520px; }
.confirmar-pdf { min-width: 0; }
.confirmar-pdf .tarjeta { margin-bottom: 14px; }
.confirmar-pdf .tarjeta__cuerpo { padding: 14px 22px 18px; }
@media (max-width: 1100px) {
  .pdf-detalle--confirmar { grid-template-columns: 1fr; }
  .pdf-detalle--confirmar .pdf-visor { position: static; }
  .pdf-detalle--confirmar .pdf-visor iframe { height: 50vh; min-height: 320px; }
}

/* Lote (confirmar varios) */
.archivos-elegidos { margin: 8px 0 0; padding-left: 18px; font-size: 13px; max-height: 160px; overflow: auto; }
.lote-pdf td .nivel { margin-left: 4px; }
.lote-pdf tr.lote-pdf--no-listo td { color: var(--texto-tenue); }
.lote-pdf__acciones { white-space: nowrap; text-align: right; }
.lote-pdf__ver { display: block; font-size: 12.5px; margin-top: 4px; }
.lote-pdf__motivo { display: block; font-size: 12.5px; color: var(--aviso-texto); margin-top: 2px; }
.lote-resultado--ok { color: var(--ok-texto); }
.lote-resultado--error { color: var(--error-texto); }

/* Cabecera de tarjeta con acciones que no se desbordan */
.tarjeta__cabecera > div:first-child { min-width: 0; flex: 1 1 260px; }
.tarjeta__cabecera h2 { overflow-wrap: anywhere; }

/* Bloque "en el PDF dice…" bajo un campo, solo cuando aporta (difiere de lo elegido) */
.pista-pdf { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--texto-tenue); }
.pista-pdf b { font-weight: 600; color: var(--texto-suave); }

/* Sección plegada de campos vacíos en la revisión */
.campos-pdf__vacios { grid-column: 1 / -1; margin-top: 4px; }
.campos-pdf__vacios[hidden] { display: none; }
.btn--texto { background: none; box-shadow: none; color: var(--primary-texto); padding: 4px 6px; font-weight: 600; font-size: 12.5px; min-height: 0; }
.btn--texto:hover { background: var(--primary-suave); color: var(--primary-dark); transform: none; box-shadow: none; }

/* Chips de navegación interna (grupos de la revisión) */
.chips-nav { position: sticky; top: 0; z-index: 15; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 8px; background: var(--fondo); }
.chips-nav a { padding: 5px 12px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--borde); font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
.chips-nav a:hover { border-color: var(--primary); color: var(--primary-texto); text-decoration: none; }
.chips-nav a .contador { margin-left: 4px; color: var(--texto-tenue); font-weight: 700; }
@media (max-width: 900px) { .chips-nav { top: 56px; } }

/* Estado vacío con acción */
.vacio strong { display: block; color: var(--texto); font-size: 15px; margin-bottom: 4px; }
.vacio .btn { margin-top: 12px; }

/* Historial / bitácora compactos */
.bitacora li strong { font-weight: 600; }

/* Productos que ofrece una aseguradora (casillas dentro del modal) */
.opciones-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.opcion-producto { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-sm); font-weight: 500; font-size: 13.5px; cursor: pointer; }
.opcion-producto:hover { border-color: var(--primary); }
.opcion-producto:has(input:checked) { border-color: var(--primary); background: var(--primary-suave); }
.opcion-producto:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.opcion-producto input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--primary); }
.opcion-producto .avatar { width: 28px; height: 28px; }

/* ============================================================
   Cobranza: selector Lista / Calendario y calendario mensual (v66)
   ============================================================ */
.vista-selector { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); }
.vista-selector__opcion { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
.vista-selector__opcion:hover { color: var(--texto); text-decoration: none; background: var(--blanco); }
.vista-selector__opcion--activa, .vista-selector__opcion--activa:hover { background: var(--primary); color: #fff; box-shadow: var(--sombra-sm); }

.calendario__cabecera { flex-wrap: wrap; gap: 10px; }
.calendario__navegacion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calendario__titulo { margin: 0 4px; min-width: 9.5em; text-align: center; font-size: 18px; }
.calendario__ir input[type="month"] { width: auto; margin: 0; padding: 5px 8px; font-size: 13px; }
.calendario__totales { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 0 22px 14px; font-size: 13px; color: var(--texto-suave); }
.calendario__totales strong { color: var(--texto); margin-left: 4px; font-variant-numeric: tabular-nums; }
.calendario__cuantos { font-size: 12px; color: var(--texto-tenue); }
.calendario__leyenda { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.punto--pendiente { background: var(--info-texto); }
.punto--vencido { background: var(--error-texto); }
.punto--pagado { background: var(--ok-texto); }
.calendario__vacio { margin: 0 22px 12px; padding: 10px 14px; border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto-suave); font-size: 13px; }

.calendario__rejilla { border-top: 1px solid var(--borde); }
.calendario__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario__semana + .calendario__semana { border-top: 1px solid var(--borde); }
.calendario__dia-nombre { padding: 8px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-tenue); text-align: left; }
.calendario__dia { min-height: 118px; padding: 6px 6px 8px; border-left: 1px solid var(--borde); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.calendario__dia:first-child { border-left: 0; }
.calendario__dia--finde { background: color-mix(in srgb, var(--fondo) 60%, transparent); }
.calendario__dia--fuera { background: var(--fondo); }
.calendario__dia--fuera .calendario__numero { color: var(--texto-tenue); opacity: .55; }
.calendario__dia-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 2px; }
.calendario__numero { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.calendario__fecha-larga { display: none; }
.calendario__dia--hoy { background: var(--primary-suave); }
.calendario__dia--hoy .calendario__numero { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; }
.calendario__suma { font-size: 11px; font-weight: 700; color: var(--texto-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario__eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.calendario__extra--oculto { display: none; }
.calendario__mas { align-self: flex-start; background: none; border: 0; box-shadow: none; padding: 2px 4px; min-height: 0; font-size: 12px; font-weight: 700; color: var(--primary-texto); cursor: pointer; border-radius: 4px; }
.calendario__mas:hover { background: var(--primary-suave); color: var(--primary-texto); transform: none; box-shadow: none; text-decoration: underline; }
.calendario__dia--expandido { position: relative; z-index: 2; box-shadow: var(--sombra-lg); background: var(--blanco); }

/* Evento (recibo) dentro del día: el color indica el estatus y el texto lo repite para lectores de pantalla */
.cal-evento { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; width: 100%; padding: 3px 7px; margin: 0; min-height: 0; border: 0; border-left: 3px solid; border-radius: 5px; box-shadow: none; font: inherit; font-size: 12px; line-height: 1.35; text-align: left; cursor: pointer; transform: none; }
.cal-evento:hover { transform: none; box-shadow: var(--sombra-sm); filter: brightness(.97); }
.cal-evento:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cal-evento__poliza { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento__monto { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-evento__cliente { grid-column: 1 / -1; font-size: 11.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento--muestra { display: inline-block; width: auto; padding: 1px 8px; cursor: default; font-size: 11.5px; font-weight: 600; }
.cal-evento--muestra:hover { box-shadow: none; filter: none; }
.cal-evento--vencido    { background: var(--error-fondo); color: var(--error-texto); border-left-color: var(--error-texto); }
.cal-evento--por_vencer { background: var(--aviso-fondo); color: var(--aviso-texto); border-left-color: #f0a500; }
.cal-evento--pendiente  { background: var(--info-fondo); color: var(--info-texto); border-left-color: var(--info-texto); }
.cal-evento--pagado     { background: var(--ok-fondo); color: var(--ok-texto); border-left-color: var(--ok-texto); }

/* Tableta: solo póliza y monto */
@media (max-width: 1100px) {
  .cal-evento__cliente { display: none; }
  .calendario__dia { min-height: 96px; }
}
/* Teléfono: el mes se vuelve agenda (solo días con recibos, uno debajo de otro) */
@media (max-width: 700px) {
  .calendario__titulo { min-width: 0; flex: 1; font-size: 16px; }
  .calendario__totales { padding: 0 14px 12px; gap: 6px 14px; }
  .calendario__leyenda { margin-left: 0; }
  .calendario__semana { display: block; }
  .calendario__semana + .calendario__semana { border-top: 0; }
  .calendario__semana--encabezado { display: none; }
  .calendario__dia { min-height: 0; border-left: 0; border-top: 1px solid var(--borde); padding: 10px 14px; }
  .calendario__dia--vacio, .calendario__dia--fuera { display: none; }
  .calendario__dia--finde { background: none; }
  .calendario__fecha-larga { display: inline; font-weight: 600; }
  .calendario__suma { font-size: 12.5px; }
  .calendario__eventos .calendario__extra--oculto { display: block; }
  .calendario__mas { display: none; }
  .cal-evento { padding: 8px 10px; font-size: 13px; }
  .cal-evento__cliente { display: block; }
}

/* ============================================================
   Set de colores NOCHE (v66). Se activa con <html data-modo="oscuro">,
   que el encabezado resuelve según Configuración → Apariencia, la
   elección de la persona en su dispositivo o el modo del sistema
   operativo ("Automático"). Todo el texto mantiene contraste AA.
   ============================================================ */
/* v77: el tema elegido manda sobre el del sistema operativo. Sin esto, con la
   computadora en modo oscuro y el sistema en Día, las ventanas tomaban el fondo
   oscuro del navegador (las <dialog> usan el color del sistema si no tienen fondo). */
html[data-modo="claro"] { color-scheme: light; }
html[data-modo="oscuro"] {
  color-scheme: dark;
  --texto:          #e6eaf3;
  --texto-suave:    #bfc7d8;
  --texto-tenue:    #a1abc0;
  --ok-texto:       #74e0a8;  --ok-fondo:      #15372a;
  --aviso-texto:    #f3c76b;  --aviso-fondo:   #3b2e12;
  --error-texto:    #ff9d96;  --error-fondo:   #41201f;
  --info-texto:     #a7c2ff;  --info-fondo:    #1d2a49;
  --borde:          #2d3448;
  --fondo:          #10131c;
  --blanco:         #1a1f2d;   /* superficie de tarjetas, menús y modales */
  --primary-suave:  color-mix(in srgb, var(--primary) 24%, #1a1f2d);
  --primary-texto:  color-mix(in srgb, var(--primary) 52%, #ffffff);
  --primary-texto-hover: color-mix(in srgb, var(--primary) 35%, #ffffff);
  --campo-borde:    #3a4259;
  --sombra-sm:      0 .125rem .25rem rgba(0,0,0,.35);
  --sombra:         0 .25rem .6rem rgba(0,0,0,.35), 0 .0625rem .125rem rgba(0,0,0,.3);
  --sombra-lg:      0 .6rem 1.6rem rgba(0,0,0,.5);
  --dark-grad:      linear-gradient(310deg, #0b0d14, #232a45);
}
html[data-modo="oscuro"] body { background: var(--fondo); }
html[data-modo="oscuro"] .saltar { background: var(--primary); color: #fff; }
html[data-modo="oscuro"] img.avatar, html[data-modo="oscuro"] .sidebar__marca img { background: #fff; }

/* Campos de captura */
html[data-modo="oscuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html[data-modo="oscuro"] select,
html[data-modo="oscuro"] textarea { background-color: #141826; color: var(--texto); border-color: var(--campo-borde); }
html[data-modo="oscuro"] input::placeholder, html[data-modo="oscuro"] textarea::placeholder { color: #7f8aa3; }
html[data-modo="oscuro"] input[readonly], html[data-modo="oscuro"] .campo-pdf input[readonly] { background-color: var(--fondo); color: var(--texto-tenue); }
html[data-modo="oscuro"] input[type="search"] { border-color: var(--campo-borde); }

/* Superficies que tenían blancos o grises claros fijos */
html[data-modo="oscuro"] .sidebar__nav a:hover,
html[data-modo="oscuro"] .btn--enlace:hover { background: rgba(255,255,255,.06); }
html[data-modo="oscuro"] .table tbody tr:hover { background: rgba(255,255,255,.03); }
html[data-modo="oscuro"] .table tbody tr[data-fila-accion]:hover { background: var(--primary-suave); }
html[data-modo="oscuro"] .table tbody tr[data-fila-accion]:active { background: color-mix(in srgb, var(--primary) 32%, #1a1f2d); }
html[data-modo="oscuro"] .table tbody tr[data-fila-accion]:hover .table__principal { color: var(--primary-texto); }
html[data-modo="oscuro"] .distintivo--inactivo,
html[data-modo="oscuro"] .distintivo--cancelada { background: #2a3043; color: var(--texto-suave); }
html[data-modo="oscuro"] .distintivo--renovada { background: #12323d; color: #86d3ea; }
html[data-modo="oscuro"] .btn--secundario { border-color: var(--primary-texto); }
html[data-modo="oscuro"] .btn--secundario:hover { color: var(--primary-texto-hover); }
html[data-modo="oscuro"] .modal__nav .modal__tab--activo { background: var(--primary-suave); }
html[data-modo="oscuro"] .modal__destacado { background: var(--primary-suave); border-color: color-mix(in srgb, var(--primary) 40%, #1a1f2d); }
html[data-modo="oscuro"] .icon-picker__input:checked + .icon-picker__opcion { background: var(--primary-suave); }
html[data-modo="oscuro"] .barra-acciones { background: rgba(26,31,45,.96); box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
html[data-modo="oscuro"] dialog.modal { background: var(--blanco); }
html[data-modo="oscuro"] dialog.modal::backdrop { background: rgba(0,0,0,.6); }
html[data-modo="oscuro"] .sidebar-backdrop { background: rgba(0,0,0,.6); }
html[data-modo="oscuro"] .sin-revisar { background: var(--aviso-fondo); border-color: #6b5320; }
html[data-modo="oscuro"] .calendario__dia--finde { background: rgba(255,255,255,.015); }
html[data-modo="oscuro"] .calendario__dia--fuera { background: rgba(0,0,0,.18); }

/* Avisos */
html[data-modo="oscuro"] .alert--error   { border-color: #6a2d2b; }
html[data-modo="oscuro"] .alert--success { border-color: #235c43; }
html[data-modo="oscuro"] .alert--aviso   { border-color: #6b5320; }
html[data-modo="oscuro"] .alert--info    { border-color: #33467a; border-left-color: var(--info-texto); }

/* Zonas de riesgo y acciones destructivas */
html[data-modo="oscuro"] .modal__tab--peligro,
html[data-modo="oscuro"] .modal__tab--peligro.modal__tab--activo,
html[data-modo="oscuro"] .modal__tab--peligro:hover,
html[data-modo="oscuro"] .modal__nav .modal__tab--peligro,
html[data-modo="oscuro"] .modal__desplegable--peligro summary,
html[data-modo="oscuro"] .modal__panel--peligro .modal__panel-titulo,
html[data-modo="oscuro"] .modal__seccion--peligro h3,
html[data-modo="oscuro"] .pdf-icono { color: var(--error-texto); border-bottom-color: var(--error-texto); }
html[data-modo="oscuro"] .modal__nav .modal__tab--peligro:hover,
html[data-modo="oscuro"] .modal__nav .modal__tab--peligro.modal__tab--activo,
html[data-modo="oscuro"] .modal__desplegable--peligro,
html[data-modo="oscuro"] .modal__panel--peligro,
html[data-modo="oscuro"] .modal__seccion--peligro { background: #2b1b1e; border-color: #5a2a2a; }
html[data-modo="oscuro"] .btn--peligro-suave { color: var(--error-texto); border-color: #6a2d2b; }
html[data-modo="oscuro"] .btn--peligro-suave:hover { background: var(--error-fondo); color: #ffc4bf; }

/* Chips de recibos, contadores y checklist */
html[data-modo="oscuro"] .recibo-chip--pagado     { background: var(--ok-fondo); color: var(--ok-texto); }
html[data-modo="oscuro"] .recibo-chip--vencido    { background: var(--error-fondo); color: var(--error-texto); }
html[data-modo="oscuro"] .recibo-chip--por_vencer { background: var(--aviso-fondo); color: var(--aviso-texto); box-shadow: inset 0 0 0 1px #6b5320; }
html[data-modo="oscuro"] .recibo-chip--pendiente  { background: #2a3043; color: var(--texto-suave); }
html[data-modo="oscuro"] .recibo-chip--cancelado  { background: repeating-linear-gradient(45deg, #1d2232, #1d2232 3px, #262c3e 3px, #262c3e 6px); color: #8590a8; }
html[data-modo="oscuro"] .modal__tab-contador--alerta { background: var(--aviso-fondo); color: var(--aviso-texto); }
html[data-modo="oscuro"] .checklist-docs__icono--ok { background: var(--ok-fondo); color: var(--ok-texto); }
html[data-modo="oscuro"] .checklist-docs__icono--pendiente { background: var(--aviso-fondo); color: var(--aviso-texto); }

/* Selector de colores en la barra superior */
.selector-tema__boton { color: var(--texto-suave); }
.selector-tema__luna { display: none; }
html[data-modo="oscuro"] .selector-tema__sol { display: none; }
html[data-modo="oscuro"] .selector-tema__luna { display: inline; }
.selector-tema .dropdown__menu { min-width: 230px; }
.selector-tema__titulo { margin: 2px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); }
.selector-tema .dropdown__item, button.dropdown__item { width: 100%; text-align: left; background: none; border: 0; box-shadow: none; min-height: 0; font-family: inherit; cursor: pointer; transform: none; }
.selector-tema .dropdown__item small { font-weight: 400; color: var(--texto-tenue); }
.selector-tema .dropdown__item[aria-checked="true"]::after { content: "✓"; float: right; margin-left: 10px; }
.selector-tema .dropdown__item:hover, button.dropdown__item:hover { transform: none; box-shadow: none; }

/* Configuración → Apariencia */
.config-tema { margin-top: 8px; }
.config-tema legend { margin-top: 14px; }
.opciones-tema { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.opcion-tema { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio-sm); cursor: pointer; background: var(--blanco); margin: 0; font-weight: 400; }
.opcion-tema:hover { border-color: var(--primary); }
.opcion-tema:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--primary-suave); }
.opcion-tema:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.opcion-tema__fila { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texto); }
.opcion-tema__fila input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.opcion-tema__ayuda { font-size: 12px; color: var(--texto-tenue); line-height: 1.35; }
.opcion-tema__muestra { display: flex; height: 54px; border-radius: 6px; overflow: hidden; border: 1px solid var(--borde); }
.opcion-tema__muestra i { display: block; }
.muestra-claro  { background: #f8f9fa; }
.muestra-oscuro { background: #10131c; }
.opcion-tema__muestra .menu   { width: 28%; margin: 5px 0 5px 5px; border-radius: 3px; }
.opcion-tema__muestra .panel  { flex: 1; margin: 5px; border-radius: 3px; position: relative; }
.muestra-claro .menu, .muestra-claro .panel { background: #fff; }
.muestra-oscuro .menu, .muestra-oscuro .panel { background: #1a1f2d; }
.opcion-tema__muestra .panel::before { content: ""; position: absolute; left: 6px; top: 7px; width: 55%; height: 5px; border-radius: 3px; background: var(--primary); }
.muestra-claro .panel::after, .muestra-oscuro .panel::after { content: ""; position: absolute; left: 6px; top: 17px; right: 8px; height: 4px; border-radius: 3px; background: #dfe3ea; }
.muestra-oscuro .panel::after { background: #39405a; }
.muestra-auto { background: linear-gradient(110deg, #f8f9fa 50%, #10131c 50%); }
.muestra-auto .menu { background: #fff; }
.muestra-auto .panel { background: linear-gradient(110deg, #fff 38%, #1a1f2d 38%); }
@media (max-width: 700px) {
  .opciones-tema { grid-template-columns: 1fr; }
  .mobile-topbar .selector-tema { margin-left: auto; }
  .mobile-topbar .selector-tema + .mobile-topbar__perfil { margin-left: 0; }
  .mobile-topbar .selector-tema .dropdown__menu { left: auto; right: 0; width: auto; min-width: 240px; }
  .tarjeta__cabecera.calendario__cabecera > .calendario__navegacion { flex: none; }
  .calendario__ir { flex: 1 0 100%; }
  .calendario__ir input[type="month"] { width: 100%; }
  .calendario__cabecera .vista-selector { width: 100%; }
  .calendario__cabecera .vista-selector__opcion, .tarjeta__cabecera-acciones .vista-selector__opcion { flex: 1; justify-content: center; }
  .tarjeta__cabecera-acciones .vista-selector { width: 100%; }
}

/* ============================================================
   v67 — Inicio, renovaciones, siniestros, bitácora, búsqueda global,
   mensajes a clientes, respaldos y auditoría
   ============================================================ */
:root {
  --serie-pagado: #1f9d63;
  --serie-pendiente: #4a7bd8;
  --serie-vencido: #d14343;
  --whatsapp: #167c42;      /* verde de WhatsApp oscurecido: texto blanco ≥ 4.5:1 */
  --whatsapp-hover: #12653a;
}
html[data-modo="oscuro"] {
  --serie-pagado: #43c38a;
  --serie-pendiente: #78a2f2;
  --serie-vencido: #f07373;
  --whatsapp: #167c42;
  --whatsapp-hover: #1a8a4a;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Botones nuevos */
.btn--whatsapp, .btn--whatsapp:visited { display: inline-flex; align-items: center; gap: 6px; background: var(--whatsapp); color: #fff; border: 0; }
.btn--whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }
.btn--whatsapp[disabled] { background: var(--fondo); color: var(--texto-tenue); border: 1px dashed var(--borde); cursor: not-allowed; transform: none; box-shadow: none; }
.btn--solo-icono { width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; flex-shrink: 0; }
.btn--solo-icono span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn--xs { padding: 3px 9px; font-size: 12px; min-height: 26px; }
.btn--con-icono { display: inline-flex; align-items: center; gap: 6px; }
.contacto-rapido { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.contacto-rapido [hidden] { display: none; }
.filtros-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 260px; min-width: 0; }
.filtros-linea input[type="search"] { flex: 1 1 200px; width: auto; margin: 0; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; min-height: 0; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); color: var(--texto-suave); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none; transform: none; }
.chip:hover { border-color: var(--primary); color: var(--primary-texto); background: var(--primary-suave); transform: none; box-shadow: none; }
.chips-rapidos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nota-con-tipo { display: flex; gap: 8px; align-items: stretch; }
.nota-con-tipo select { width: auto; flex: 0 0 auto; margin: 0; }
.nota-con-tipo textarea { flex: 1 1 auto; margin: 0; min-width: 0; }
@media (max-width: 700px) { .nota-con-tipo { flex-direction: column; } .nota-con-tipo select { width: 100%; } }

/* Filtros en forma de chips con contador */
.filtro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); color: var(--texto-suave); font-size: 12.5px; font-weight: 600; }
.filtro-chips a:hover { border-color: var(--primary); color: var(--primary-texto); text-decoration: none; }
.filtro-chips__n { font-size: 11px; color: var(--texto-tenue); font-weight: 700; }
.filtro-chips a.filtro-chips__activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.filtro-chips a.filtro-chips__activo .filtro-chips__n { color: #fff; }

/* Globo de aviso (ámbar) en el menú */
.sidebar__globo--aviso { background: #a35f00; }

/* ---------- Inicio ---------- */
.inicio-rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 20px 0; align-items: start; }
.inicio-pendientes { display: flex; flex-direction: column; gap: 12px; }
.inicio-graficas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
@media (max-width: 1100px) { .inicio-rejilla, .inicio-graficas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .agenda__item { gap: 8px; } .agenda__fecha { flex-basis: 64px; } }
.pendiente { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--texto); margin: 0; transition: transform .15s ease, box-shadow .15s ease; }
.pendiente:hover { text-decoration: none; color: var(--texto); transform: translateY(-1px); box-shadow: var(--sombra-lg); }
.pendiente__icono { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pendiente__texto { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.pendiente__texto strong { font-size: 18px; margin-right: 2px; }
.pendiente__texto small { display: block; color: var(--texto-tenue); font-size: 12px; }
.pendiente__flecha { font-size: 22px; color: var(--texto-tenue); }
.agenda { padding-top: 0; }
.agenda__titulo { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); }
.agenda__titulo:first-child { margin-top: 4px; }
.agenda__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agenda__item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.agenda__item:last-child { border-bottom: 0; }
.agenda__fecha { flex: 0 0 82px; font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.agenda__fecha--atrasada { color: var(--error-texto); }
.agenda__fecha--cumple { color: #8a3fc4; }
html[data-modo="oscuro"] .agenda__fecha--cumple { color: #d3a6ff; }
.agenda__texto { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.agenda__texto a { font-weight: 600; color: var(--texto); }
.agenda__texto a:hover { color: var(--primary-texto); }
.agenda__texto small { display: block; color: var(--texto-tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__vacio { margin: 0; padding: 8px 12px; border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto-suave); font-size: 13px; }

/* ---------- Gráficas (HTML/CSS) ---------- */
.grafica { margin: 0; }
.grafica__leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--texto-suave); margin-bottom: 12px; }
.grafica__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafica__muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.serie-pagado { background: var(--serie-pagado); }
.serie-pendiente { background: var(--serie-pendiente); }
.serie-vencido { background: var(--serie-vencido); }
.grafica__area--columnas { position: relative; display: flex; align-items: stretch; gap: 10px; height: 230px; padding: 0 0 26px 54px; }
.grafica__guia { position: absolute; left: 0; right: 0; top: 0; bottom: 26px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.grafica__guia span { position: relative; display: block; height: 0; margin-left: 54px; border-top: 1px dashed var(--borde); }
.grafica__guia span:last-child { border-top-style: solid; }
.grafica__guia em { position: absolute; right: calc(100% + 6px); top: -8px; font-style: normal; font-size: 11px; color: var(--texto-tenue); white-space: nowrap; }
.grafica__columna { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 6px; cursor: default; outline-offset: 3px; }
.grafica__pila { position: relative; z-index: 1; width: min(46px, 70%); height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.grafica__segmento { display: block; width: 100%; min-height: 2px; }
.grafica__pila .grafica__segmento:last-child { border-radius: 4px 4px 0 0; }
.grafica__etiqueta { position: absolute; z-index: 1; bottom: -24px; font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }
.grafica__columna--actual .grafica__etiqueta { color: var(--texto); font-weight: 700; }
.grafica__columna--actual::before { content: ""; position: absolute; inset: -4px -2px -26px; border-radius: 8px; background: var(--primary-suave); z-index: 0; }
.grafica__globo { display: none; position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 190px; padding: 10px 12px; border-radius: var(--radio-sm); background: var(--blanco); box-shadow: var(--sombra-lg); border: 1px solid var(--borde); font-size: 12.5px; color: var(--texto-suave); text-align: left; }
.grafica__globo strong { display: block; color: var(--texto); margin-bottom: 4px; }
.grafica__globo > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.grafica__globo b { margin-left: auto; padding-left: 10px; color: var(--texto); font-variant-numeric: tabular-nums; }
.grafica__globo-total { border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 4px; }
.grafica__columna:hover .grafica__globo, .grafica__columna:focus-visible .grafica__globo { display: block; }
.grafica__columna:first-of-type .grafica__globo { left: 0; transform: none; }
.grafica__columna:last-child .grafica__globo { left: auto; right: 0; transform: none; }
.grafica__tabla { margin-top: 14px; }
.grafica__tabla summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--primary-texto); }
.grafica__tabla table { margin-top: 8px; }
.grafica__barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grafica__barra { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.grafica__barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-weight: 600; }
.grafica__barra-pista { height: 12px; border-radius: 0 4px 4px 0; background: transparent; }
.grafica__barra-relleno { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--primary); }
.grafica__barra--otras .grafica__barra-relleno { background: var(--texto-tenue); }
.grafica__barra-valor { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto); white-space: nowrap; min-width: 92px; text-align: right; }
.grafica__barra-valor small { font-weight: 400; color: var(--texto-tenue); }
.grafica__vacia { margin: 0; color: var(--texto-tenue); font-size: 13px; }
@media (max-width: 700px) {
  .grafica__area--columnas { gap: 4px; padding-left: 44px; height: 200px; }
  .grafica__guia span { margin-left: 44px; }
  .grafica__barra { grid-template-columns: 1fr auto; }
  .grafica__barra-pista { grid-column: 1 / -1; order: 3; }
  .grafica__globo { min-width: 160px; }
}

/* ---------- Renovaciones (tablero por etapas) ---------- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
.kanban__columna { background: var(--fondo); border-radius: var(--radio-sm); padding: 10px; min-width: 0; border-top: 3px solid var(--borde); }
.kanban__columna--por_contactar { border-top-color: var(--texto-tenue); }
.kanban__columna--contactado { border-top-color: var(--info-texto); }
.kanban__columna--cotizado { border-top-color: #b07a00; }
.kanban__columna--renovada { border-top-color: var(--ok-texto); }
.kanban__columna--perdida { border-top-color: var(--error-texto); }
.kanban__titulo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--texto); }
.kanban__titulo .modal__tab-contador { margin-left: auto; }
.kanban__icono { display: inline-flex; color: var(--texto-tenue); }
.kanban__suma { margin: 2px 0 8px; font-size: 12px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.kanban__tarjetas { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kanban__vacio { font-size: 12.5px; color: var(--texto-tenue); padding: 10px 4px; text-align: center; }
.kanban__tarjeta { position: relative; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-sm); box-shadow: var(--sombra-sm); transition: box-shadow .15s ease, border-color .15s ease; }
.kanban__tarjeta:hover { box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--primary) 40%, var(--borde)); }
.kanban__tarjeta--atencion { border-left: 3px solid var(--error-texto); }
.kanban__abrir { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 44px 10px 12px; margin: 0; min-height: 0; background: none; border: 0; box-shadow: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; border-radius: var(--radio-sm); transform: none; }
.kanban__abrir:hover { background: none; color: var(--texto); transform: none; box-shadow: none; }
.kanban__cliente { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.kanban__poliza { font-size: 12px; color: var(--texto-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban__datos { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kanban__prima { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kanban__seguimiento { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.kanban__seguimiento--vencido { color: var(--error-texto); font-weight: 700; }
.kanban__wa { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; min-height: 28px; }
.vence { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--info-fondo); color: var(--info-texto); }
.vence--pronto { background: var(--aviso-fondo); color: var(--aviso-texto); }
.vence--vencida { background: var(--error-fondo); color: var(--error-texto); }
@media (max-width: 1200px) {
  .kanban { grid-template-columns: repeat(5, minmax(230px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .kanban__columna { scroll-snap-align: start; }
}
@media (max-width: 700px) {
  .kanban { grid-template-columns: repeat(5, 82vw); padding: 0 12px 12px; }
}
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.etapa { margin: 0; }
.etapa input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etapa span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 1px solid var(--borde); border-radius: var(--radio-sm); font-size: 12.5px; font-weight: 600; color: var(--texto-suave); cursor: pointer; text-align: center; background: var(--blanco); }
.etapa input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.etapa input:checked + span { border-color: var(--primary); background: var(--primary-suave); color: var(--primary-texto); box-shadow: 0 0 0 1px var(--primary); }
.etapa--renovada input:checked + span { border-color: var(--ok-texto); background: var(--ok-fondo); color: var(--ok-texto); box-shadow: 0 0 0 1px var(--ok-texto); }
.etapa--perdida input:checked + span { border-color: var(--error-texto); background: var(--error-fondo); color: var(--error-texto); box-shadow: 0 0 0 1px var(--error-texto); }
@media (max-width: 700px) { .etapas { grid-template-columns: 1fr 1fr; } }
.historial { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 12px; }
.historial__titulo { font-size: 13px; margin: 0 0 8px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; }
.historial__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.historial__lista li { padding: 8px 10px; background: var(--fondo); border-radius: var(--radio-sm); font-size: 13px; }
.historial__lista p { margin: 2px 0; white-space: pre-line; }
.historial__lista small { color: var(--texto-tenue); font-size: 11.5px; }
.historial__tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-texto); }

/* ---------- Bitácora / línea de tiempo ---------- */
.bitacora-form { margin-bottom: 14px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--borde); }
.linea-tiempo__item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.linea-tiempo__icono { position: relative; z-index: 1; flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fondo); color: var(--texto-suave); border: 2px solid var(--blanco); }
.linea-tiempo__item--whatsapp .linea-tiempo__icono { background: var(--ok-fondo); color: var(--ok-texto); }
.linea-tiempo__item--llamada .linea-tiempo__icono, .linea-tiempo__item--visita .linea-tiempo__icono { background: var(--info-fondo); color: var(--info-texto); }
.linea-tiempo__item--correo .linea-tiempo__icono { background: var(--primary-suave); color: var(--primary-texto); }
.linea-tiempo__item--renovacion .linea-tiempo__icono { background: var(--aviso-fondo); color: var(--aviso-texto); }
.linea-tiempo__item--siniestro .linea-tiempo__icono { background: var(--error-fondo); color: var(--error-texto); }
.linea-tiempo__cuerpo { flex: 1; min-width: 0; }
.linea-tiempo__meta { margin: 3px 0 0; font-size: 12px; color: var(--texto-tenue); }
.linea-tiempo__meta strong { color: var(--texto); }
.linea-tiempo__texto { margin: 2px 0 0; font-size: 13.5px; color: var(--texto); word-break: break-word; }
.linea-tiempo__borrar { font-size: 18px; line-height: 1; color: var(--texto-tenue); padding: 2px 8px; }
.linea-tiempo__item form { margin: 0; }

/* ---------- Siniestros ---------- */
.selector-lista { width: 100%; margin-top: 6px; padding: 4px; font-size: 13.5px; }
.selector-lista option { padding: 6px 8px; border-radius: 4px; }
.selector-lista option[hidden] { display: none; }

/* ---------- Calendario: cumpleaños ---------- */
.cal-cumple { display: block; padding: 2px 7px; border-radius: 5px; font-size: 12px; font-weight: 600; color: #6b2fa0; background: #f3e8fd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-cumple:hover { text-decoration: none; background: #e9d5fb; color: #5a2389; }
.cal-cumple--muestra { display: inline-block; font-size: 11.5px; }
html[data-modo="oscuro"] .cal-cumple { color: #ddb8ff; background: #33204a; }
html[data-modo="oscuro"] .cal-cumple:hover { color: #f0dcff; background: #3f2860; }

/* ---------- Búsqueda global ---------- */
.buscador-global__disparador { display: inline-flex; align-items: center; gap: 8px; width: 290px; max-width: 34vw; padding: 7px 10px; min-height: 0; border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); color: var(--texto-tenue); font: inherit; font-size: 13px; box-shadow: none; cursor: text; transform: none; text-align: left; }
.buscador-global__disparador:hover { border-color: var(--primary); color: var(--texto-suave); background: var(--blanco); transform: none; box-shadow: none; }
.buscador-global__disparador span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { font-family: inherit; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto-suave); }
@media (max-width: 1100px) { .buscador-global__disparador { width: 40px; padding: 0; height: 36px; justify-content: center; } .buscador-global__disparador span, .buscador-global__disparador kbd { display: none; } }
.mobile-topbar__buscar { color: var(--texto); }
.mobile-topbar .mobile-topbar__buscar { margin-left: auto; }
.mobile-topbar .mobile-topbar__buscar ~ .selector-tema { margin-left: 0; }
dialog.busqueda-global { width: min(640px, 94vw); margin-top: 10vh; padding: 0; max-height: 76vh; display: none; flex-direction: column; overflow: hidden; }
dialog.busqueda-global[open] { display: flex; }
.busqueda-global__barra { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borde); color: var(--texto-tenue); }
.busqueda-global__barra input[type="search"] { flex: 1; margin: 0; border: 0; box-shadow: none; padding: 6px 2px; font-size: 16px; background: transparent; }
.busqueda-global__barra input[type="search"]:focus { box-shadow: none; outline: none; }
.busqueda-global__cerrar { background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--borde); box-shadow: none; padding: 2px 8px; min-height: 0; font-size: 11px; font-weight: 700; border-radius: 4px; }
.busqueda-global__cerrar:hover { background: var(--fondo); color: var(--texto); transform: none; box-shadow: none; }
.busqueda-global__cuerpo { overflow-y: auto; }
.busqueda-global__resultados { list-style: none; margin: 0; padding: 6px; }
.busqueda-global__resultados:empty { display: none; }
.busqueda-global__grupo { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-tenue); }
.busqueda-global__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radio-sm); cursor: pointer; color: var(--texto-suave); }
.busqueda-global__item[aria-selected="true"] { background: var(--primary-suave); color: var(--primary-texto); }
.busqueda-global__textos { display: flex; flex-direction: column; min-width: 0; }
.busqueda-global__titulo { font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busqueda-global__detalle { font-size: 12px; color: var(--texto-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busqueda-global__estado { margin: 0; padding: 10px 16px 14px; font-size: 12.5px; color: var(--texto-tenue); }
@media (max-width: 700px) { dialog.busqueda-global { margin-top: 0; width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } }
.busqueda__grupo { margin: 20px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); }
.busqueda__lista { list-style: none; margin: 0; padding: 0; }
.busqueda__item { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radio-sm); color: var(--texto); }
.busqueda__item:hover { background: var(--primary-suave); text-decoration: none; }
.busqueda__titulo { font-weight: 600; }
.busqueda__detalle { font-size: 12.5px; color: var(--texto-tenue); }

/* ---------- Configuración: mensajes, auditoría ---------- */
.mensajes-config { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
.marcadores { background: var(--fondo); border-radius: var(--radio-sm); padding: 12px 14px; align-self: start; }
.marcadores h3 { font-size: 13px; margin: 0 0 4px; }
.marcadores ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--texto-tenue); }
.marcadores li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 900px) { .mensajes-config { grid-template-columns: 1fr; } }
.filtros-auditoria { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; width: 100%; }
.filtros-auditoria > div { flex: 1 1 150px; min-width: 0; }
.filtros-auditoria label { margin-top: 0; }
.filtros-auditoria input, .filtros-auditoria select { margin: 0; }
.filtros-auditoria__botones { display: flex; gap: 6px; flex: 0 0 auto !important; }
.auditoria__detalle { white-space: normal !important; min-width: 280px; color: var(--texto); }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; font-size: 13px; color: var(--texto-suave); }
/* En teléfono la cabecera de las tarjetas se apila: su primer bloque no debe reservar 260px de alto. */
@media (max-width: 700px) {
  .tarjeta__cabecera > div:first-child, .tarjeta__cabecera > form:first-child { flex: 0 0 auto; }
}
/* El atributo hidden siempre gana (algunos componentes usan display:flex). */
[hidden] { display: none !important; }
.vence { white-space: nowrap; }
.kanban__seguimiento { align-items: flex-start; line-height: 1.35; }
.kanban__seguimiento svg { flex-shrink: 0; margin-top: 2px; }

/* v68: un solo buscador (barra superior). Las listas conservan solo sus filtros. */
.buscador--filtros { padding-top: 10px; padding-bottom: 10px; }
.buscador__etiqueta { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--texto-tenue); }
.buscador--filtros select { margin: 0; }
.aviso-busqueda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 22px 4px; padding: 8px 12px; border-radius: var(--radio-sm); background: var(--primary-suave); color: var(--texto); font-size: 13px; }
.aviso-busqueda svg { color: var(--primary-texto); flex-shrink: 0; }
.aviso-busqueda__quitar { margin-left: auto; font-weight: 700; }
@media (max-width: 700px) { .aviso-busqueda { margin: 10px 14px 4px; } }
.busqueda-global__item svg { flex-shrink: 0; }

/* v69: columna Contacto de Clientes con 3 íconos de acción */
.contacto-iconos { display: inline-flex; align-items: center; gap: 6px; }
.contacto-icono { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde); background: var(--blanco); color: var(--texto-suave); transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease; }
a.contacto-icono:hover { text-decoration: none; transform: translateY(-1px); }
.contacto-icono--tel { color: var(--info-texto); }
a.contacto-icono--tel:hover { background: var(--info-fondo); border-color: var(--info-texto); color: var(--info-texto); }
.contacto-icono--wa { color: var(--whatsapp); }
a.contacto-icono--wa:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
html[data-modo="oscuro"] .contacto-icono--wa { color: #4cc685; }
.contacto-icono--correo { color: var(--primary-texto); }
a.contacto-icono--correo:hover { background: var(--primary-suave); border-color: var(--primary); color: var(--primary-texto); }
.contacto-icono--vacio { opacity: .35; border-style: dashed; cursor: not-allowed; }
@media (max-width: 700px) { .contacto-icono { width: 40px; height: 40px; } }

/* v71: filtro dentro de la cabecera de la tarjeta (Clientes → Agente) */
.filtro-cabecera { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.filtro-cabecera select { margin: 0; width: auto; min-width: 190px; max-width: 260px; padding-top: 8px; padding-bottom: 8px; background-color: var(--blanco); }
.filtro-cabecera select.filtro-cabecera--activo { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
@media (max-width: 700px) { .filtro-cabecera, .filtro-cabecera select { width: 100%; max-width: none; } }

/* v72: grupo Aseguradoras en el menú (Productos y Formas de pago) y página de Notificaciones */
.sidebar__grupo-cabecera { display: flex; align-items: center; gap: 2px; }
.sidebar__grupo-cabecera > a { flex: 1; min-width: 0; }
.sidebar__expandir { flex: 0 0 auto; width: 32px; height: 32px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; background: none; border: 0; box-shadow: none; color: var(--texto-tenue); border-radius: var(--radio-sm); cursor: pointer; transform: none; }
.sidebar__expandir:hover { background: rgba(0,0,0,.04); color: var(--texto); transform: none; box-shadow: none; }
html[data-modo="oscuro"] .sidebar__expandir:hover { background: rgba(255,255,255,.06); }
.sidebar__expandir svg { transition: transform .15s ease; }
.sidebar__expandir[aria-expanded="true"] svg { transform: rotate(180deg); }
.sidebar__sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 22px; position: relative; }
.sidebar__sub::before { content: ""; position: absolute; left: 31px; top: 4px; bottom: 4px; width: 1px; background: var(--borde); }
.sidebar__nav .sidebar__sub a { padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.sidebar__icono--sub { transform: scale(.85); }
.sidebar__grupo--activo > .sidebar__grupo-cabecera > a:not([aria-current]) { color: var(--texto); font-weight: 600; }
.notif-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
@media (max-width: 1100px) { .notif-rejilla { grid-template-columns: minmax(0, 1fr); } }
.notif-form { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.notif-form > .tarjeta { margin: 0; }
.dropdown__item .dropdown__cuenta { float: right; margin-left: 14px; font-size: 11.5px; font-weight: 700; color: var(--texto-tenue); }
.dropdown__item--activo .dropdown__cuenta { color: inherit; }

/* ============================================================
   v74 — Portal de clientes (diseño propio, sin menú lateral)
   ============================================================ */
body.portal { background: var(--fondo); }
.portal-cabecera { position: sticky; top: 0; z-index: 100; background: var(--blanco); box-shadow: var(--sombra-sm); }
.portal-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 10px 20px; }
.portal-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 700; font-size: 15px; }
.portal-marca:hover { text-decoration: none; color: var(--texto); }
.portal-marca small { display: block; font-size: 11.5px; font-weight: 600; color: var(--texto-tenue); }
.portal-marca__logo { height: 34px; max-width: 140px; object-fit: contain; }
.portal-marca__icono { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.portal-marca__icono svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.portal-cabecera__usuario { display: flex; align-items: center; gap: 8px; }
.portal-cabecera__hola { font-size: 13.5px; color: var(--texto-suave); }
.portal-tema { color: var(--texto-suave); }
.portal-nav { display: flex; gap: 4px; max-width: 1080px; margin: 0 auto; padding: 0 12px; border-top: 1px solid var(--borde); overflow-x: auto; }
.portal-nav__item { display: inline-flex; align-items: center; gap: 7px; padding: 11px 12px; font-size: 13.5px; font-weight: 600; color: var(--texto-suave); border-bottom: 3px solid transparent; white-space: nowrap; }
.portal-nav__item:hover { color: var(--texto); text-decoration: none; }
.portal-nav__item[aria-current="page"] { color: var(--primary-texto); border-bottom-color: var(--primary); }
.portal-contenido { max-width: 1080px; margin: 0 auto; padding: 22px 20px 40px; }
.portal-contenido .tarjeta { margin-bottom: 20px; }
.portal-titulo { margin: 0 0 18px; }
.portal-titulo h1 { font-size: 24px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portal-titulo p { margin: 0; color: var(--texto-suave); }
.portal-titulo--con-acciones { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.portal-migas { font-size: 12.5px; color: var(--texto-tenue); margin-bottom: 6px; }
.portal-rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.portal-rejilla--datos { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.portal-lateral { display: flex; flex-direction: column; gap: 20px; }
.portal-lateral .tarjeta { margin: 0; }
@media (max-width: 900px) { .portal-rejilla, .portal-rejilla--datos { grid-template-columns: minmax(0, 1fr); } }
.portal-lista { display: flex; flex-direction: column; gap: 10px; }
.portal-poliza { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-sm); color: var(--texto); background: var(--blanco); transition: border-color .12s ease, box-shadow .12s ease; }
.portal-poliza:hover { text-decoration: none; color: var(--texto); border-color: var(--primary); box-shadow: var(--sombra-sm); }
.portal-poliza__icono { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-grad); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-poliza__icono svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.portal-poliza__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--texto-tenue); }
.portal-poliza__texto strong { color: var(--texto); font-size: 14px; }
.portal-poliza__flecha { font-size: 22px; color: var(--texto-tenue); }
.portal-historial { margin: 0 22px 18px; }
.portal-historial summary { cursor: pointer; font-weight: 600; color: var(--primary-texto); font-size: 13.5px; margin-bottom: 10px; }
.portal-kv { margin: 0; }
.portal-solicitudes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.portal-solicitud { padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--fondo); }
.portal-solicitud__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.portal-solicitud__meta { margin: 2px 0 8px; font-size: 12px; color: var(--texto-tenue); }
.portal-solicitud__texto { margin: 0; font-size: 13.5px; color: var(--texto); }
.portal-solicitud__respuesta { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--primary); background: var(--blanco); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; font-size: 13.5px; white-space: pre-line; }
.portal-solicitud__respuesta span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-texto); margin-bottom: 4px; }
.portal-solicitud form { margin-top: 8px; }
.opciones-solicitud, .opciones-contacto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.opciones-contacto { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
.portal-aviso summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--primary-texto); }
.portal-pie { max-width: 1080px; margin: 0 auto; padding: 18px 20px 30px; border-top: 1px solid var(--borde); font-size: 12.5px; color: var(--texto-tenue); }
.portal-pie p { margin: 0 0 4px; }
.portal-pie__contacto { display: flex; gap: 14px; flex-wrap: wrap; }
.portal-entrada__enlaces { text-align: center; margin: 14px 0 0; font-size: 13.5px; }
.portal-entrada__nota { text-align: center; margin: 14px 0 0; }
@media (max-width: 700px) {
  .portal-cabecera__hola { display: none; }
  .portal-contenido { padding: 16px 14px 32px; }
  .opciones-contacto { grid-template-columns: 1fr; }
}

/* v74: en móvil las 4 pestañas del portal caben sin deslizar */
@media (max-width: 520px) {
  .portal-nav { gap: 0; padding: 0 4px; justify-content: space-between; }
  .portal-nav__item { gap: 4px; padding: 11px 6px; font-size: 12.5px; }
  .portal-nav__item svg { width: 15px; height: 15px; }
}
@media (max-width: 400px) {
  .portal-nav__item { padding: 11px 4px; font-size: 12px; gap: 3px; }
  .portal-nav__item svg { width: 14px; height: 14px; }
}

/* ===== v75: acceso directo del portal y foto de perfil ===== */
.solo-escritorio { display: inline; }
.solo-tactil { display: none; }
@media (pointer: coarse) { .solo-escritorio { display: none; } .solo-tactil { display: inline; } }
.portal-avatar { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-suave); border-radius: 999px; }
.portal-avatar:hover { text-decoration: none; color: var(--texto); }
.portal-avatar > img, .portal-avatar > span[aria-hidden] {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-grad); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.portal-instalar { display: inline-flex; align-items: center; gap: 6px; }
.portal-instalar[hidden] { display: none !important; }
.portal-instalar--entrada { margin: 18px auto 0; width: min(100%, 360px); justify-content: center; }
.portal-entrada { flex-direction: column; }

dialog.portal-dialogo { width: min(460px, 94vw); padding: 0; }
.portal-dialogo__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.portal-dialogo__cabecera h2 { font-size: 17px; margin: 0; line-height: 1.35; }
.portal-dialogo__cuerpo { padding: 8px 20px 4px; }
.portal-dialogo__acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 20px 18px; border-top: 1px solid var(--borde); margin-top: 12px; }
.portal-instalar__vista { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.portal-instalar__vista img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.15); flex: none; }
.portal-instalar__vista p { margin: 0; font-size: 14px; }
.portal-instalar__pasos { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; }
.portal-instalar__tecla { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 4px; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); vertical-align: middle; font-weight: 700; }

.portal-aviso-app { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; margin-bottom: 18px; border-radius: 14px; background: var(--primary-suave); border: 1px solid var(--borde); position: relative; }
.portal-aviso-app[hidden] { display: none; }
.portal-aviso-app img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.portal-aviso-app p { margin: 0; font-size: 13.5px; color: var(--texto); flex: 1; }
.portal-aviso-app .modal__cerrar { flex: none; }
html[data-modo="oscuro"] .portal-aviso-app { background: var(--blanco); }

.portal-foto { display: flex; gap: 18px; align-items: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--borde); scroll-margin-top: 120px; }
.portal-foto__marco { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: var(--primary-grad); color: #fff; font-size: 32px; font-weight: 700; box-shadow: 0 0 0 4px var(--primary-suave); }
.portal-foto__marco img { width: 100%; height: 100%; object-fit: cover; }
.portal-foto__texto h3 { margin: 0 0 2px; font-size: 15px; }
.portal-foto__texto .ayuda { margin: 0 0 10px; }
.portal-foto__botones { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.portal-foto__botones .btn { display: inline-flex; align-items: center; gap: 6px; }
.portal-foto__quitar { margin-top: 6px; padding-left: 0; }
.portal-foto__vista { text-align: center; }
.portal-foto__vista canvas { width: min(240px, 70vw); height: auto; aspect-ratio: 1; border-radius: 50%; display: block; margin: 6px auto 10px; background: var(--fondo); box-shadow: 0 0 0 4px var(--primary-suave); }
@media (max-width: 520px) {
  .portal-foto { flex-direction: column; text-align: center; }
  .portal-foto__botones { justify-content: center; }
  .portal-foto__botones .btn { flex: 1 1 140px; justify-content: center; min-height: 44px; }
  .portal-cabecera__fila { padding: 8px 12px; gap: 8px; }
  .portal-marca small { display: none; }
  .portal-instalar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .portal-instalar { padding: 7px; min-width: 38px; justify-content: center; }
  .portal-instalar--entrada span { position: static; width: auto; height: auto; clip: auto; }
  .portal-instalar--entrada { padding: 10px 16px; }
}
@media not (pointer: coarse) { .portal-foto__camara { display: none !important; } }

/* =========================================================================
   EXPERIENCIA MÓVIL (v76) — celulares y tabletas (< 992 px)
   Objetivo: que el sistema se use como una app nativa, cómoda con una mano.
   El escritorio (≥ 992 px) NO cambia: todo lo nuevo está oculto ahí, y las
   reglas de esta sección viven dentro de @media (max-width: 991.98px).
   Cada bloque indica la ley de UX que lo justifica:
     Fitts      → lo importante abajo, en la zona del pulgar; tocables ≥ 44 px (40 px chicos)
     Hick       → máximo 4 destinos + 1 acción visibles; lo demás en "Más"
     Jakob      → patrones conocidos: barra inferior, hojas que suben desde abajo
     Von Restorff → la acción principal es el único botón relleno y elevado
     Miller     → información en bloques pequeños con título; indicadores de 2 en 2
     Doherty    → respuesta visual inmediata al tocar (:active con escala)
     Tesler     → el sistema absorbe la complejidad (enlaces que abren la ventana correcta)
   ========================================================================= */
:root {
  --movil-barra: 64px;                       /* alto de la barra inferior */
  --movil-superior: 56px;                    /* alto de la barra superior */
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --movil-hueco: var(--blanco);              /* detalles dentro de los íconos rellenos */
  --insignia: #d1253a;                       /* rojo AA con texto blanco (5.3:1) */
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* el texto no crece solo al girar el teléfono */

/* Piezas móviles: no existen en escritorio. */
.barra-superior, .barra-inferior { display: none; }

/* Insignia roja de pendientes (99+ máximo). */
.insignia {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--insignia); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--blanco); pointer-events: none;
}

/* ---- Hojas (Jakob: hoja que sube desde abajo). En escritorio se ven como ventana centrada. ---- */
dialog.hoja {
  width: min(460px, 94vw); max-height: 88vh; max-height: 88dvh; padding: 0; border: 0;
  border-radius: 20px; background: var(--blanco); color: var(--texto); box-shadow: var(--sombra-lg);
  overflow: hidden; overscroll-behavior: contain;
}
dialog.hoja[open] { display: flex; flex-direction: column; }
dialog.hoja::backdrop { background: rgba(16, 19, 28, .5); }
.hoja__asa { display: none; justify-content: center; padding: 10px 0 2px; touch-action: none; cursor: grab; }
.hoja__asa span { width: 40px; height: 5px; border-radius: 3px; background: #b9c0cc; }
.hoja__cabecera { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; }
.hoja__titulo { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
.hoja__cerrar {
  width: 40px; height: 40px; min-height: 40px; padding: 0; flex: none; border-radius: 50%;
  background: var(--fondo); color: var(--texto-suave); font-size: 22px; line-height: 1; box-shadow: none;
}
.hoja__cerrar:hover { transform: none; box-shadow: none; color: var(--texto); }
.hoja__cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 20px; }

/* Hoja de la acción principal: filas de 68 px con ícono de 46 px en tinte de color (Fitts + Miller). */
.hoja-acciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hoja-accion {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 8px; border-radius: 14px;
  color: var(--texto); text-decoration: none; transition: background .12s ease, transform .08s ease;
}
.hoja-accion:hover { background: var(--fondo); text-decoration: none; color: var(--texto); }
.hoja-accion:active { transform: scale(.97); background: var(--fondo); }          /* Doherty */
.hoja-accion__icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.hoja-accion__icono--primario { background: var(--primary-suave); color: var(--primary-texto); }
.hoja-accion__icono--exito    { background: var(--ok-fondo);     color: var(--ok-texto); }
.hoja-accion__icono--aviso    { background: var(--aviso-fondo);  color: var(--aviso-texto); }
.hoja-accion__icono--peligro  { background: var(--error-fondo);  color: var(--error-texto); }
.hoja-accion__icono--info     { background: var(--info-fondo);   color: var(--info-texto); }
.hoja-accion__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hoja-accion__texto strong { font-size: 15px; }
.hoja-accion__texto small { font-size: 13px; color: var(--texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-accion__flecha { color: var(--texto-tenue); display: grid; }

/* Hoja "Más": grupos con título y mosaicos (Hick + Miller). */
.mosaicos { margin-top: 16px; }
.mosaicos__titulo { margin: 0 4px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-tenue); }
.mosaicos__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mosaicos__rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }   /* 4 exactos: sin uno suelto */
.mosaicos__rejilla--4 .mosaico { font-size: 11.5px; padding-left: 2px; padding-right: 2px; }
.mosaico {
  display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 86px; padding: 12px 4px 10px;
  border-radius: 14px; color: var(--texto); font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center;
  text-decoration: none; background: none; border: 0; box-shadow: none; transition: background .12s ease, transform .08s ease;
}
button.mosaico { width: 100%; font-family: inherit; cursor: pointer; }
.mosaico:hover { background: var(--fondo); color: var(--texto); text-decoration: none; transform: none; box-shadow: none; }
.mosaico:active { transform: scale(.95); }                                         /* Doherty */
.mosaico__icono { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fondo); color: var(--primary-texto); flex: none; }
.mosaico[aria-current="page"] { background: var(--primary-suave); }
.mosaico[aria-current="page"] .mosaico__icono { background: var(--primary); color: #fff; }
.mosaico__texto { overflow-wrap: break-word; word-break: normal; max-width: 100%; }
.hoja-mas__persona { display: flex; align-items: center; gap: 12px; padding: 4px 4px 2px; }
.hoja-mas__persona > span:nth-child(2) { flex: 1; min-width: 0; }
.hoja-mas__persona strong { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-mas__persona small { color: var(--texto-tenue); font-size: 12.5px; }
.hoja-mas__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--primary-grad); color: #fff; font-weight: 700; font-size: 18px; }
.hoja-mas__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hoja-mas__foto { min-height: 40px; padding: 0 12px; background: none; color: var(--primary-texto); border: 1px solid var(--borde); border-radius: 20px; font-size: 13px; box-shadow: none; }
.hoja-mas__foto:hover { color: var(--primary-texto); transform: none; box-shadow: none; background: var(--fondo); }
.hoja-mas__persona-acciones { display: flex; flex-direction: column; gap: 6px; flex: none; }
.hoja-mas__persona-acciones .hoja-mas__foto { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 34px; }
.hoja-mas__boton {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 10px;
  border-radius: 12px; background: var(--fondo); color: var(--texto); border: 0; box-shadow: none; font-size: 15px; font-weight: 600; text-decoration: none;
}
.hoja-mas__boton:hover { color: var(--texto); background: var(--borde); transform: none; box-shadow: none; text-decoration: none; }
.hoja-mas__boton--salir, .hoja-mas__boton--salir:hover { color: var(--error-texto); }
.hoja-mas__boton:active { transform: scale(.97); }

/* Control segmentado Claro / Oscuro / Auto (Jakob). */
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--fondo); }
.segmentado__opcion { margin: 0; position: relative; }
.segmentado__opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentado__opcion span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.segmentado__opcion input:checked + span { background: var(--blanco); color: var(--texto); box-shadow: var(--sombra-sm); }
.segmentado__opcion input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Ventana "Instalar como app". */
.instalar__vista { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.instalar__vista img { width: 60px; height: 60px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.15); flex: none; }
.instalar__vista p { margin: 0; font-size: 14px; }
.instalar__pasos h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); margin: 12px 0 6px; }
.instalar__pasos ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.instalar__otros { margin: 12px 0 4px; font-size: 14px; }
.instalar__otros summary { cursor: pointer; color: var(--primary-texto); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.instalar__otros ul { list-style: none; margin: 0; padding: 0; }
.instalar__otros .btn--enlace { min-height: 40px; padding: 0; text-align: left; }
.instalar__acciones { display: flex; margin-top: 12px; }
.instalar__acciones .btn { flex: 1; min-height: 48px; }
.tecla { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 4px; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); vertical-align: middle; font-weight: 700; }

/* Píldora "Instalar app" (oculta salvo que se pueda instalar). */
.pildora-instalar {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; min-height: 40px; padding: 0 12px; flex: none;
  border-radius: 20px; border: 1.5px solid var(--primary); background: transparent; color: var(--primary-texto);
  font-size: 13px; font-weight: 700; box-shadow: none; white-space: nowrap;
}
.pildora-instalar:hover { color: var(--primary-texto); background: var(--primary-suave); transform: none; box-shadow: none; }
.pildora-instalar__corto { display: none; }

@media (max-width: 991.98px) {
  /* ---- Estructura: fuera el menú lateral y la ☰ (Jakob: la barra inferior es el patrón conocido) ---- */
  .sidebar, .sidebar-backdrop, .mobile-topbar, .topbar__usuario, .portal-cabecera, .portal-nav { display: none !important; }
  .contenido { margin-left: 0; padding: 14px 16px calc(var(--movil-barra) + var(--seguro-abajo) + 28px); } /* la barra nunca tapa lo último */
  .portal-contenido { padding-bottom: 24px; }
  .portal-pie { padding-bottom: calc(var(--movil-barra) + var(--seguro-abajo) + 20px); }

  /* ---- Barra superior compacta: 56 px + zona segura, fija al desplazar ---- */
  .barra-superior {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 150;
    min-height: calc(var(--movil-superior) + var(--seguro-arriba));
    padding: var(--seguro-arriba) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background: var(--blanco); border-bottom: 1px solid var(--borde);
  }
  .barra-superior__marca { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; overflow: hidden; }
  .barra-superior__marca img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
  .barra-superior__icono { width: 32px; height: 32px; display: grid; place-items: center; background: var(--primary-grad); color: #fff; }
  .barra-superior__titulo { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-superior__acciones { display: flex; align-items: center; gap: 6px; flex: none; }
  .barra-superior__boton, .barra-superior__avatar {
    position: relative; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: none; color: var(--texto); box-shadow: none;
  }
  .barra-superior__boton:hover, .barra-superior__avatar:hover { transform: none; box-shadow: none; color: var(--texto); }
  .barra-superior__avatar > img, .barra-superior__avatar > span[aria-hidden]:not(.barra-superior__menu):not(.insignia) {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
    background: var(--primary-grad); color: #fff; font-size: 13px; font-weight: 700;
  }
  .barra-superior__menu { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--texto); box-shadow: 0 0 0 1.5px var(--borde); }
  .barra-superior__avatar .insignia { top: -3px; right: -5px; }
  .barra-superior__boton:active, .barra-superior__avatar:active, .pildora-instalar:active { transform: scale(.92); }   /* Doherty */

  /* ---- Barra inferior: 4 destinos + acción principal (Hick, Fitts, Jakob) ---- */
  .barra-inferior {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    height: calc(var(--movil-barra) + var(--seguro-abajo)); padding: 0 env(safe-area-inset-right) var(--seguro-abajo) env(safe-area-inset-left);
    background: var(--blanco); border-top: 1px solid var(--borde); box-shadow: 0 -6px 18px rgba(52, 71, 103, .07);
  }
  .barra-inferior__item, .barra-inferior__accion {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: var(--movil-barra); padding: 0; margin: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; color: var(--texto-tenue); font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent; cursor: pointer;
  }
  .barra-inferior__item:hover, .barra-inferior__accion:hover { color: var(--texto); background: none; transform: none; box-shadow: none; text-decoration: none; }
  .barra-inferior__texto { font-size: 11.5px; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-inferior__pildora { position: relative; width: 58px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background .2s ease, transform .08s ease; }
  .barra-inferior__icono { display: grid; place-items: center; }
  .barra-inferior__icono--relleno { display: none; }
  .barra-inferior__pildora .insignia { top: -5px; right: auto; left: 33px; }
  /* Destino activo: ícono relleno dentro de la píldora con el tinte de la marca. */
  .barra-inferior__item[aria-current="page"] { color: var(--primary-texto); }
  .barra-inferior__item[aria-current="page"] .barra-inferior__pildora { background: var(--primary-suave); --movil-hueco: var(--primary-suave); }
  .barra-inferior__item[aria-current="page"] .barra-inferior__icono--linea { display: none; }
  .barra-inferior__item[aria-current="page"] .barra-inferior__icono--relleno { display: grid; }
  .barra-inferior__item:active .barra-inferior__pildora { transform: scale(.92); }                    /* Doherty */
  /* Acción principal: el ÚNICO botón relleno y elevado (Von Restorff). */
  .barra-inferior__accion { color: var(--texto); }
  .barra-inferior__accion-boton {
    width: 54px; height: 54px; border-radius: 17px; margin-top: -24px; display: grid; place-items: center;
    background: var(--primary); color: #fff;
    box-shadow: 0 0 0 5px var(--fondo), 0 8px 18px color-mix(in srgb, var(--primary) 45%, transparent);
    transition: transform .08s ease;
  }
  .barra-inferior__accion:active .barra-inferior__accion-boton { transform: scale(.92); }

  /* ---- Hojas ancladas abajo, con asa y cierre deslizando (Jakob, Fitts) ---- */
  dialog.hoja {
    width: 100%; max-width: 640px; margin: auto auto 0; border-radius: 20px 20px 0 0;   /* en tableta no se estira de más */
    padding-bottom: var(--seguro-abajo);
  }
  dialog.hoja[open] { animation: hoja-sube .24s cubic-bezier(.2, .8, .2, 1); }
  .hoja__asa { display: flex; }
  .hoja__cabecera { padding-top: 4px; touch-action: none; }
  .hoja--mas .hoja__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hoja--mas .hoja__cabecera { justify-content: flex-end; padding-bottom: 0; }
  .hoja--mas .hoja__cuerpo { padding-top: 0; }

  /* ---- Encabezado de cada pantalla: el título ya está en la barra ---- */
  .topbar { margin-bottom: 12px; }
  .topbar__ruta--simple { display: none; }
  .h1-repetido { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* sigue para lectores de pantalla */
  .portal-titulo.h1-repetido-contenedor h1 + p { margin-top: 0; }

  /* ---- Acciones secundarias de la página: pasan a "Más" (Hick) ---- */
  .movil-a-mas { display: none !important; }
  .portal-aviso-app { display: none !important; }   /* la barra superior ya tiene "Instalar" (Hick: sin repetir) */

  /* ---- Indicadores de 2 en 2, compactos (Miller) ---- */
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metrica { flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 12px; }
  .metrica__icono { width: 32px; height: 32px; border-radius: 9px; }
  .metrica__icono svg { width: 17px; height: 17px; }
  .metrica__etiqueta { font-size: 12.5px; line-height: 1.3; }
  .metrica__valor { font-size: 19px; overflow-wrap: anywhere; }
  .metrica__delta { font-size: 12px; }
  .metrica .btn { width: 100%; }

  /* ---- Filtros y pestañas en UNA línea deslizable de chips (Jakob, Hick) ---- */
  .tarjeta__cabecera-acciones {
    flex-direction: row !important; flex-wrap: nowrap; align-items: center !important; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px;
    box-sizing: border-box; width: calc(100% + 32px) !important; max-width: none; align-self: flex-start;
  }
  .tarjeta__cabecera-acciones::-webkit-scrollbar, .filtro-chips::-webkit-scrollbar, .chips-nav::-webkit-scrollbar, .modal__tabs::-webkit-scrollbar { display: none; }
  .tarjeta__cabecera-acciones > *, .tarjeta__cabecera-acciones .dropdown, .tarjeta__cabecera-acciones > .btn { flex: none; width: auto !important; }
  .tarjeta__cabecera-acciones .filtro-cabecera, .tarjeta__cabecera-acciones .filtro-cabecera select { width: auto; }
  .tarjeta__cabecera-acciones select, .tarjeta__cabecera-acciones .btn--dropdown, .tarjeta__cabecera-acciones .btn {
    min-height: 40px; height: 40px; border-radius: 20px; padding: 0 16px; font-size: 16px; font-weight: 600; max-width: 75vw;
  }
  .tarjeta__cabecera-acciones select { padding-right: 34px; text-overflow: ellipsis; }
  .tarjeta__cabecera-acciones .btn--dropdown { font-size: 14.5px; gap: 8px; }
  .filtro-chips, .chips-nav, .modal__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; min-width: 0; }
  .tarjeta__cabecera > div:first-child { min-width: 0; max-width: 100%; flex-basis: auto; }
  .filtro-chips a, .chips-nav a { flex: none; min-height: 40px; padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; }
  .modal__tab { flex: none; white-space: nowrap; min-height: 44px; }

  /* Menús desplegables: abren abajo, a lo ancho, al alcance del pulgar (Fitts) y sin recortarse. */
  .dropdown__menu {
    position: fixed !important; left: 12px !important; right: 12px !important; top: auto !important;
    bottom: calc(var(--movil-barra) + var(--seguro-abajo) + 12px); width: auto !important; min-width: 0 !important;
    max-height: 60dvh; overflow-y: auto; border-radius: 16px; z-index: 170; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
  }
  dialog .dropdown__menu { bottom: calc(12px + var(--seguro-abajo)); }
  .dropdown__item { min-height: 48px; display: flex; align-items: center; font-size: 15px; }

  /* ---- Campos: ≥ 44 px y letra de 16 px (evita el zoom automático al escribir) ---- */
  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"],
  input[type="tel"], input[type="search"], input[type="url"], input[type="month"], input[type="time"], select, textarea {
    min-height: 44px; font-size: 16px; border-color: #858fa2;                 /* borde de campo ≥ 3:1 */
  }
  html[data-modo="oscuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  html[data-modo="oscuro"] select, html[data-modo="oscuro"] textarea { border-color: #6b7591; }
  input[type="search"] { width: 100%; }
  label { font-size: 14px; }

  /* ---- Botones: objetivos táctiles y respuesta inmediata (Fitts, Doherty) ---- */
  .btn, button { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .btn:active, button:active, .enlace-fila:active { transform: scale(.96); }
  .table tbody tr[data-fila-accion]:active { transform: scale(.985); }

  /* ---- Tablas como tarjetas; en tabletas, 2 por fila (Miller) ---- */
  .tabla-apilable thead { display: none; }
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td { display: block; width: 100%; }
  .tabla-apilable tr { margin: 0 0 12px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
  .tabla-apilable td { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--borde); text-align: right; }
  .tabla-apilable td::before { content: attr(data-label); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-tenue); text-align: left; }
  .tabla-apilable td[data-label=""]::before { content: none; }
  .table td[data-label=""]::before { content: none; }
  .table td { overflow-wrap: anywhere; }

  /* ---- Varios: nada se sale de la pantalla (cero desplazamiento horizontal) ---- */
  .contenido, .portal-contenido, .tarjeta, .tarjeta__cuerpo { min-width: 0; }
  img, svg, video, canvas, iframe { max-width: 100%; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important; }
  .kv dd { overflow-wrap: anywhere; min-width: 0; }
  dialog.busqueda-global { margin-top: calc(8px + var(--seguro-arriba)); width: calc(100vw - 16px); max-height: 70dvh; }
  .config-grid, .config-identidad { grid-template-columns: minmax(0, 1fr); }
  .config-grid > *, .config-identidad > * { min-width: 0; }
}

/* Tabletas: tarjetas de 2 en 2 para aprovechar el ancho (Miller). */
@media (min-width: 640px) and (max-width: 991.98px) {
  .contenido .table tbody, .contenido .tabla-apilable tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .contenido .table tbody tr, .contenido .tabla-apilable tbody tr { margin: 0; }
  .contenido .table tbody tr:has(td[colspan]) { grid-column: 1 / -1; }
  dialog .table tbody { display: block !important; }
  dialog .table tbody tr { margin-bottom: 12px !important; }
}

/* ---- Ventanas emergentes → hojas desde abajo en celular (< 576 px) ---- */
@media (max-width: 575.98px) {
  dialog.modal:not(.busqueda-global) {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 94vh; max-height: 94dvh;
    border-radius: 20px 20px 0 0; overscroll-behavior: contain; padding-bottom: var(--seguro-abajo);
  }
  dialog.modal:not(.busqueda-global)[open] { animation: hoja-sube .24s cubic-bezier(.2, .8, .2, 1); }
  dialog.modal .modal__header { border-radius: 20px 20px 0 0; padding: 14px 16px; }
  dialog.modal .modal__header::before {  /* asa visual: indica que es una hoja */
    content: ""; position: absolute; left: 50%; top: 5px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #b9c0cc;
  }
  /* Pie fijo: los botones quedan a lo ancho y al alcance del pulgar, aunque el <form> envuelva todo. */
  dialog.modal .modal__acciones:last-child {
    position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 16px; padding: 12px 0 calc(12px + var(--seguro-abajo));
    background: var(--blanco); border-top: 1px solid var(--borde);
    box-shadow: 0 0 0 100vmax var(--blanco); clip-path: inset(0 -100vmax);
  }
  dialog.modal .modal__acciones > .btn, dialog.modal .modal__acciones > button, dialog.modal .modal__acciones > a.btn { flex: 1 1 calc(50% - 5px); min-height: 48px; text-align: center; justify-content: center; }
  /* Lo destructivo, separado de lo de editar para evitar errores. */
  dialog.modal .modal__acciones .btn--peligro, dialog.modal .modal__acciones .btn--peligro-suave { order: 9; flex-basis: 100%; margin-top: 10px; }
  .pildora-instalar__largo { display: none; }
  .pildora-instalar__corto { display: inline; }
}
@media (max-width: 359.98px) {
  .pildora-instalar { padding: 0 10px; }
  .pildora-instalar__corto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .barra-inferior__pildora { width: 50px; }
  .barra-inferior__texto { font-size: 11px; letter-spacing: -.01em; }
}

@keyframes hoja-sube { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (hover: none) { button:hover, .btn:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  dialog.hoja[open], dialog.modal[open] { animation: none !important; }
}
html[data-modo="oscuro"] .hoja__asa span, html[data-modo="oscuro"] dialog.modal .modal__header::before { background: #4a536b; }
html[data-modo="oscuro"] .barra-inferior { box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
/* v76: los campos de archivo ocultos de la foto se anclan a su contenedor (no empujan el ancho). */
.portal-foto__botones { position: relative; }
.portal-foto__botones input[type="file"].sr-only { left: 0; top: 0; }

/* ===== v78: asegurados con costo ===== */
.aseg-totales { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.aseg-totales > div { background: var(--fondo); border-radius: var(--radio-sm); padding: 10px 12px; min-width: 0; }
.aseg-totales span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-tenue); }
.aseg-totales strong { display: block; font-size: 16px; color: var(--texto); overflow-wrap: anywhere; }
.aseg-totales__total { background: var(--primary-suave) !important; }
.aseg-totales__total strong { color: var(--primary-texto); font-size: 17px; }
.aseg-totales__ok { color: var(--ok-texto) !important; }
.aseg-totales__debe { color: var(--error-texto) !important; }
.aseg-tabla td.num, .aseg-tabla th.num { text-align: right; white-space: nowrap; }
.aseg-tabla td .distintivo { margin-right: 4px; }
.aseg-tabla__resto td { background: var(--fondo); }
.aseg-quitar { color: var(--error-texto); }
.aseg-form .aseg-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.aseg-form .aseg-tipo legend { grid-column: 1 / -1; }
.aseg-form .opcion-radio { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-sm); cursor: pointer; font-weight: 400; }
.aseg-form .opcion-radio:has(input:checked) { border-color: var(--primary); background: var(--primary-suave); }
.aseg-form .opcion-radio input { margin-top: 3px; }
.aseg-form .opcion-radio span { display: flex; flex-direction: column; gap: 2px; }
.aseg-form .opcion-radio small { color: var(--texto-tenue); font-size: 12.5px; }
.aseg-calculo { display: flex; gap: 8px; align-items: center; }
.aseg-calculo input { flex: 1; min-width: 0; }
.aseg-resumen { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--primary-texto); }
.aseg-resumen:empty { display: none; }
.aseg-resumen--error { color: var(--error-texto); }
.aseg-costos { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 8px 12px; align-items: center; margin-top: 10px; }
.aseg-costos label { margin: 0; font-weight: 600; }
@media (max-width: 991.98px) {
  .aseg-totales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aseg-totales__total { grid-column: 1 / -1; order: -1; }
  .aseg-form .aseg-tipo { grid-template-columns: 1fr; }
  .aseg-costos { grid-template-columns: minmax(0, 1fr) 130px; }
}
.aseg-cobro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; }
.aseg-cobro .table__secundario { flex-basis: 100%; margin: 0; }
.aseg-tabla .celda-principal strong { display: block; }
.aseg-tabla .celda-acciones { white-space: nowrap; text-align: right; }
.aseg-acciones { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
.aseg-acciones .btn--enlace { padding: 0; min-height: 0; font-size: 13px; }
@media (max-width: 991.98px) { .aseg-acciones .btn--enlace { min-height: 40px; } }
.modal__tab svg { flex: none; }

/* ===== v79: buzón de pólizas ===== */
.semaforo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.semaforo li { display: grid; grid-template-columns: 16px minmax(120px, 170px) minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13.5px; }
.semaforo__punto { font-size: 15px; line-height: 1.3; }
.semaforo li span:last-child { color: var(--texto-suave); overflow-wrap: anywhere; }
.pasos-cpanel { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.pasos-cpanel .ayuda { display: block; margin-top: 2px; }
.config-cmd { display: block; margin: 6px 0; padding: 8px 10px; background: var(--fondo); border-radius: var(--radio-sm); font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.buzon-detalle { font-size: 13px; line-height: 1.45; max-width: 520px; overflow-wrap: anywhere; }
.buzon-enlaces { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; overflow-wrap: anywhere; }
.cartera-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cartera-form select { width: auto; min-width: 150px; padding: 4px 8px; font-size: 12.5px; min-height: 30px; }
@media (max-width: 991.98px) {
  .semaforo li { grid-template-columns: 16px minmax(0, 1fr); }
  .semaforo li span:last-child { grid-column: 2; }
  .cartera-form select { min-height: 44px; font-size: 16px; }
}

/* ===================== ACCESO AL PORTAL DESDE CLIENTES (v81) ===================== */
.portal-acceso__bloque { margin-top: 16px; }
.portal-acceso__titulo { font-size: 13.5px; margin: 0 0 4px; color: var(--texto); }
.portal-acceso__bloque .btn { display: inline-flex; align-items: center; gap: 6px; }
.portal-acceso__form { padding-top: 12px; }
.portal-acceso__form label { margin-top: 8px; }
.portal-acceso__fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.portal-acceso__fila input { flex: 1 1 180px; width: auto; min-width: 0; margin: 0; }
.portal-acceso__check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 12px; cursor: pointer; }
.portal-acceso__check input { width: auto; margin: 0; min-height: 0; }
.portal-acceso__kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 10px; }
.portal-acceso__kv dt { font-weight: 600; color: var(--texto-tenue); }
.portal-acceso__kv dd { margin: 0; overflow-wrap: anywhere; }
.portal-acceso__pass { font-size: 15px; letter-spacing: .5px; user-select: all; -webkit-user-select: all; }
@media (max-width: 991.98px) {
  .portal-acceso__bloque .acciones-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .portal-acceso__bloque .acciones-fila form, .portal-acceso__bloque .acciones-fila .btn { display: flex; width: 100%; justify-content: center; }
  .portal-acceso__bloque .acciones-fila > form:only-child { grid-column: 1 / -1; }
  .portal-acceso__fila input { flex-basis: 100%; min-height: 44px; font-size: 16px; }
  .portal-acceso__fila .btn { flex: 1 1 0; }
}
/* Los textos solo para lector de pantalla (.sr-only, posición absoluta) de las pestañas
   quedaban fuera de la tira desplazable y hacían que el modal se moviera de lado en 360 px. */
.modal__tabs { position: relative; }
.portal-acceso__fila .btn { justify-content: center; }

/* ===================== FICHA DEL CLIENTE (v82) =====================
   Una página por cliente: cabecera con contacto, pestañas horizontales y
   secciones "ver primero, editar con un clic". Sustituye al modal de la lista. */
.ficha-tabs {
  display: flex; gap: 2px; align-items: stretch; overflow-x: auto; scrollbar-width: none;
  background: var(--blanco); border-radius: var(--radio) var(--radio) 0 0; box-shadow: var(--sombra);
  padding: 0 12px; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.ficha-tabs::-webkit-scrollbar { display: none; }
.ficha-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none;
  padding: 14px 14px 12px; color: var(--texto-suave); font-size: 13.5px; font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px; position: relative;
}
.ficha-tab:hover { color: var(--texto); background: var(--fondo); }
.ficha-tab svg { flex: none; opacity: .75; }
.ficha-tab--activa { color: var(--primary-texto); border-bottom-color: var(--primary); }
.ficha-tab--activa svg { opacity: 1; }
.ficha-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.ficha-tab--peligro { margin-left: auto; color: #c0392b; }
.ficha-tab--peligro:hover, .ficha-tab--peligro.ficha-tab--activa { color: #c0392b; border-bottom-color: #c0392b; }
.ficha-tab__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ficha-tab__punto--ok { background: var(--ok-texto); }
.ficha-tab__punto--aviso { background: #f5a623; box-shadow: 0 0 0 3px #fff3d6; }
/* La sección activa queda pegada a la barra de pestañas, como una sola tarjeta. */
.ficha-tabs + .ficha-contenido > .ficha-seccion { border-radius: 0 0 var(--radio) var(--radio); }
.ficha-seccion:focus { outline: none; }
.ficha-seccion:focus-visible { outline: none; }
.ficha-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 18px 22px; }
.ficha-cabecera__persona { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 320px; }
.ficha-cabecera__avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4px var(--borde); }
.ficha-cabecera__avatar--inicial { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-grad); color: #fff; font-size: 26px; font-weight: 700; }
.ficha-cabecera__texto { min-width: 0; }
.ficha-cabecera__nombre { margin: 0 0 6px; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.ficha-cabecera__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--texto-suave); }
.ficha-cabecera__meta strong { color: var(--texto); font-weight: 600; }
.ficha-cabecera__rfc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3px; }
.ficha-cabecera__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-cabecera__acciones .btn { display: inline-flex; align-items: center; gap: 6px; }


.ficha-contenido { min-width: 0; }
.ficha-seccion { scroll-margin-top: 16px; }
.ficha-seccion .tarjeta__cabecera h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.ficha-seccion .tarjeta__cabecera h3 svg { color: var(--primary-texto); flex: none; }
.ficha-seccion .tarjeta__cabecera .ayuda { margin: 4px 0 0; }
.ficha-seccion .tarjeta__cabecera-acciones .btn { display: inline-flex; align-items: center; gap: 6px; }
.ficha-seccion--peligro { border: 1px solid #f0d4d0; }
.ficha-seccion--peligro .tarjeta__cabecera h3, .ficha-seccion--peligro .tarjeta__cabecera h3 svg { color: #c0392b; }
.ficha-eliminar { border-top: 1px solid #f0d4d0; }

.ficha-kv { grid-template-columns: minmax(150px, max-content) 1fr; gap: 10px 20px; font-size: 14px; }
.ficha-kv dt { font-size: 12.5px; }
.ficha-kv__vacio { color: var(--texto-tenue); font-style: italic; font-weight: 500; }
.ficha-kv__nota { color: var(--texto-tenue); font-size: 12px; }
.ficha-form { animation: ficha-aparece .18s ease-out; }
@keyframes ficha-aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ficha-form__acciones { display: flex; justify-content: flex-end; gap: 8px; }
.ficha-form__titulo { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }
.ficha-constancia { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--borde); }
.ficha-constancia .modal__fila-archivo { align-items: center; }
.ficha-constancia__etiqueta { flex: 1 1 100%; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ficha-constancia__etiqueta .ayuda { margin: 0; font-weight: 400; }
.ficha-constancia input[type="file"] { flex: 1 1 220px; }
.ficha-constancia .modal__enlace { margin: 10px 0 0; }
.ficha-polizas td { vertical-align: middle; }

/* Aviso flotante: visible aunque la página baje hasta la sección guardada. */
.ficha-aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100% - 32px)); margin: 0; box-shadow: 0 12px 32px rgba(20, 24, 40, .22);
  padding-right: 40px; animation: ficha-aviso-entra .25s ease-out; transition: opacity .35s, transform .35s;
}
.ficha-aviso--fuera { opacity: 0; transform: translateX(-50%) translateY(12px); }
@keyframes ficha-aviso-entra { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%); } }
.ficha-aviso__cerrar { position: absolute; top: 6px; right: 6px; background: transparent; border: 0; font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; color: inherit; opacity: .7; border-radius: 6px; }
.ficha-aviso__cerrar:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

html[data-modo="oscuro"] .ficha-tab:hover { background: rgba(255, 255, 255, .04); }
html[data-modo="oscuro"] .ficha-tab__punto--aviso { box-shadow: 0 0 0 3px rgba(245, 166, 35, .25); }
html[data-modo="oscuro"] .ficha-seccion--peligro, html[data-modo="oscuro"] .ficha-eliminar { border-color: rgba(192, 57, 43, .45); }
html[data-modo="oscuro"] .ficha-cabecera__avatar { box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4px var(--borde); }

@media (max-width: 991.98px) {
  .ficha-cabecera { padding: 16px; gap: 12px; }
  .ficha-cabecera__avatar { width: 56px; height: 56px; }
  .ficha-cabecera__nombre { font-size: 18px; }
  .ficha-cabecera__acciones { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .ficha-cabecera__acciones .btn { justify-content: center; min-height: 44px; }
  /* Bajo la barra superior móvil; pestañas como chips desplazables con el texto completo. */
  .ficha-tabs { top: calc(var(--movil-superior) + var(--seguro-arriba)); margin: 0 -16px; border-radius: 0; padding: 0 8px; box-shadow: none; }
  .ficha-tab { padding: 13px 12px 11px; font-size: 13px; min-height: 48px; }
  .ficha-tab svg { display: none; }
  .ficha-tab--peligro { margin-left: 0; }
  .ficha-tabs + .ficha-contenido > .ficha-seccion { border-radius: 0 0 var(--radio) var(--radio); margin-top: 0; }
  .ficha-kv { grid-template-columns: 1fr; gap: 10px; }
  .ficha-kv dt { margin-bottom: -6px; }
  .ficha-form__acciones { flex-direction: column-reverse; }
  .ficha-form__acciones .btn { width: 100%; min-height: 44px; }
  .ficha-aviso { bottom: calc(var(--movil-barra) + var(--seguro-abajo) + 12px); }
}
.linea-tiempo__mas { margin-top: 12px; }
.linea-tiempo__mas .linea-tiempo { padding-top: 10px; }
.ficha-tab, .ficha-tab:hover, .ficha-tab:focus { text-decoration: none; }

/* v85 — Eliminar/descartar la póliza en proceso desde "Crear póliza desde el PDF". */
dialog.modal.modal--angosto { width: min(520px, 94vw); }
.barra-acciones__eliminar { margin-right: auto; }
@media (max-width: 640px) { .barra-acciones__eliminar { order: 3; flex-basis: 100%; margin-right: 0; } }

/* v86 — Botones de la cabecera de Pólizas: secundarios transparentes y la acción principal en color sólido. */
.btn--transparente, .btn--transparente:visited { background: transparent; }
.btn--transparente:hover { background: var(--primary-suave); }
.btn--solido, .btn--solido:visited { background: var(--primary); background-image: none; color: #fff; border: 1px solid var(--primary); }
.btn--solido:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn--solido .contador-globo { box-shadow: 0 0 0 2px var(--primary); }
.plegable__nota { margin: 0; padding: 0 14px 8px; }

/* ===================== FICHA DE LA PÓLIZA (v89) =====================
   La ventana de la lista ahora es una página: mismas secciones, pestañas horizontales
   pegadas arriba y el ancho completo del contenido. */
.ficha-poliza__volver { margin: 0 0 12px; font-size: 13px; color: var(--texto-tenue); }
.ficha-poliza { overflow: visible; }
.ficha-poliza .modal__header { position: static; border-radius: var(--radio) var(--radio) 0 0; }
.ficha-poliza .modal__header h2 { font-size: 20px; }
.ficha-poliza .modal__resumen-rapido { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 24px; }
.ficha-poliza .modal__resumen-valor { white-space: normal; }
.ficha-poliza .modal__cuerpo { display: block; min-height: 0; }
.ficha-poliza .modal__nav {
  flex-direction: row; align-items: stretch; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 0 12px; border-right: none; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20; background: var(--blanco);
}
.ficha-poliza .modal__nav::-webkit-scrollbar { display: none; }
.ficha-poliza .modal__nav-grupo { display: none; }
.ficha-poliza .modal__nav .modal__tab {
  width: auto; flex: none; white-space: nowrap; gap: 8px; padding: 14px 12px 11px; border-radius: 0;
  border-left: none; border-bottom: 3px solid transparent; margin-bottom: -1px; font-size: 13.5px; font-weight: 600;
}
.ficha-poliza .modal__nav .modal__tab--activo { background: transparent; border-bottom-color: var(--primary); color: var(--primary-texto); }
.ficha-poliza .modal__nav .modal__tab:hover { background: var(--fondo); }
.ficha-poliza .modal__nav-riesgo { flex-direction: row; gap: 2px; margin: 0 0 0 auto; padding: 0 0 0 10px; border-top: none; border-left: 1px solid var(--borde); }
.ficha-poliza .modal__nav .modal__tab--peligro.modal__tab--activo { background: transparent; border-bottom-color: #c0392b; }
.ficha-poliza .modal__panel { padding: 22px 26px 26px; }
.ficha-poliza .modal__panel-titulo { font-size: 16px; }
html[data-modo="oscuro"] .ficha-poliza .modal__nav .modal__tab:hover { background: rgba(255, 255, 255, .04); }
@media (max-width: 991.98px) {
  .ficha-poliza .modal__header { padding: 16px; flex-wrap: wrap; gap: 10px; }
  .ficha-poliza .modal__resumen-rapido { grid-template-columns: 1fr 1fr; padding: 12px 16px; }
  .ficha-poliza .modal__nav { top: calc(var(--movil-superior) + var(--seguro-arriba)); padding: 0 6px; }
  .ficha-poliza .modal__nav .modal__tab { min-height: 48px; padding: 13px 10px 11px; font-size: 13px; }
  .ficha-poliza .modal__nav .modal__tab svg { display: none; }
  .ficha-poliza .modal__nav-riesgo { margin-left: 0; }
  .ficha-poliza .modal__panel { padding: 16px; }
}

/* ---------- v95: Importar pólizas desde Excel ---------- */
.importar-pasos { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.importar-columnas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; padding: 0; list-style: none; }
.importar-columnas li { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto-suave); }
.importar-columnas li.es-obligatoria { background: var(--info-fondo); border-color: transparent; color: var(--info-texto); font-weight: 600; }
.importar-mensajes { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.45; }
.importar-mensajes .es-error { color: var(--error-texto); }
.importar-mensajes .es-aviso { color: var(--aviso-texto); }
.importar-tabla td[data-label="Detalle"] { min-width: 240px; }
.importar-resumen { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .importar-resumen { grid-template-columns: 1fr 1fr; } }
.importar-barra { position: static; box-shadow: none; backdrop-filter: none; }
@media (max-width: 991.98px) {
  .importar-tabla td[data-label="Detalle"] { display: block; text-align: left; min-width: 0; }
  .importar-tabla td[data-label="Detalle"]::before { display: block; margin-bottom: 4px; }
  .importar-tabla td[data-label="Detalle"]:has(> .table__secundario) { display: none; }
}
@media (max-width: 640px) {
  .importar-barra .barra-acciones__botones { flex-direction: column; align-items: stretch; width: 100%; }
  .importar-barra .barra-acciones__botones > form:last-child { order: -1; }
  .importar-barra .barra-acciones__botones .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- v96: Mi suscripción (medidores de uso y planes) ---------- */
.medidores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.medidor { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 14px 16px; background: var(--blanco); min-width: 0; }
.medidor__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.medidor__titulo { font-size: 13px; font-weight: 700; color: var(--texto-tenue); }
.medidor__estado { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--aviso-fondo); color: var(--aviso-texto); white-space: nowrap; }
.medidor--lleno .medidor__estado, .medidor--excedido .medidor__estado { background: var(--error-fondo); color: var(--error-texto); }
.medidor--libre .medidor__estado { background: var(--ok-fondo); color: var(--ok-texto); }
.medidor__cifra { margin: 6px 0 8px; font-size: 14px; color: var(--texto-tenue); }
.medidor__cifra strong { font-size: 24px; color: var(--texto); font-weight: 700; margin-right: 2px; }
.medidor__barra { height: 8px; border-radius: 4px; background: var(--borde); overflow: hidden; }
.medidor__barra > span { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.medidor--cerca .medidor__barra > span { background: #e0a100; }
.medidor--lleno .medidor__barra > span, .medidor--excedido .medidor__barra > span { background: var(--danger); }
.medidor__barra--libre > span { width: 100%; background: repeating-linear-gradient(90deg, var(--ok-fondo) 0 10px, transparent 10px 14px); }
.medidor__ayuda { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; background: var(--blanco); min-width: 0; }
.plan--actual { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--sombra); }
.plan__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan__cabecera h3 { margin: 0; font-size: 17px; }
.plan__precio { margin: 10px 0 0; color: var(--texto-tenue); font-size: 14px; }
.plan__precio strong { font-size: 26px; color: var(--texto); }
.plan__anual { margin: 2px 0 12px; }
.plan__lista { margin: 0 0 16px; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.5; flex: 1; }
.plan__lista li { position: relative; padding: 3px 0 3px 22px; }
.plan__lista li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 9px; height: 5px; border-left: 2px solid var(--ok-texto); border-bottom: 2px solid var(--ok-texto); transform: rotate(-45deg); }
.plan__accion { align-self: stretch; text-align: center; justify-content: center; }
.aviso-plan, .aviso-legal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 991.98px) { .medidores { grid-template-columns: 1fr 1fr; } .planes { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .medidores { grid-template-columns: 1fr; } }

/* ---------- v100: avisos de privacidad y términos ---------- */
.login-legal, .portal-entrada__legal { text-align: center; font-size: 12px; color: var(--texto-tenue); margin: 18px 0 0; line-height: 1.6; }
.login-legal a, .portal-entrada__legal a { color: inherit; }
.portal-entrada__consentimiento { margin-top: 14px; }
.login-tarjeta.portal-aviso { max-width: 720px; }
.portal-aviso__titulo { font-size: 22px; margin: 4px 0 6px; }
.portal-aviso__seccion { font-size: 16px; margin: 22px 0 6px; }
.portal-aviso p { color: var(--texto); font-size: 14.5px; line-height: 1.65; margin: 0 0 10px; }
.btn-enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-texto); text-decoration: underline; cursor: pointer; }
.config-aviso__texto { min-height: 220px; font-size: 13.5px; line-height: 1.55; }
.config-legal { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde, #e9ecef); }
.terminos { max-width: 820px; }
.terminos__puntos { margin: 14px 0 18px; padding-left: 20px; line-height: 1.6; }
.terminos__puntos li { margin-bottom: 8px; }
.terminos__ligas { font-weight: 600; }
.terminos__casilla { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; line-height: 1.5; }
.terminos__casilla input { margin-top: 3px; flex: none; }
.terminos__acciones { justify-content: flex-end; }

/* v103 — Cómo pagar (Mi suscripción) */
.pago-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.pago-monto { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.pago-monto th { text-align: left; font-weight: 500; color: var(--texto-suave); padding: 6px 0; }
.pago-monto td { text-align: right; padding: 6px 0; white-space: nowrap; }
.pago-monto__total th, .pago-monto__total td { font-weight: 700; color: var(--texto); font-size: 18px; border-top: 1px solid var(--borde); padding-top: 10px; }
.pago-datos { display: grid; gap: 10px; margin: 0 0 12px; }
.pago-datos dt { font-size: 12px; color: var(--texto-suave); }
.pago-datos dd { margin: 0; overflow-wrap: anywhere; }
.pago-numero { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pago-form h3, .pago-tarjeta h3 { font-size: 16px; margin: 0 0 8px; }
.pago-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pago-form input[type=file] { width: 100%; }
.pago-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.pago-avisos li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pago-avisos small { flex-basis: 100%; color: var(--texto-suave); }
@media (max-width: 760px) { .pago-grid, .pago-form__fila { grid-template-columns: 1fr; } }

/* v104 — Exportar mis datos */
.exportar-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.exportar-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; margin: 0 0 10px; font-weight: 400; cursor: pointer; }
.exportar-opcion input { width: auto; margin-top: 4px; }
.exportar-opcion:has(input:checked) { border-color: var(--primary); background: var(--primary-suave); }
@media (max-width: 860px) { .exportar-grid { grid-template-columns: 1fr; } }

/* v106 — Primeros pasos (Inicio) */
.primeros-pasos { margin-bottom: 20px; }
.primeros-pasos__cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.primeros-pasos__avance { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-suave); }
.primeros-pasos__barra { display: block; width: 140px; height: 8px; border-radius: 99px; background: var(--borde); overflow: hidden; }
.primeros-pasos__barra > span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.primeros-pasos__lista { list-style: none; margin: 0; padding: 0 20px; }
.primeros-pasos__paso { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--borde); }
.primeros-pasos__paso:first-child { border-top: 0; }
.primeros-pasos__marca { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borde); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; }
.primeros-pasos__paso--hecho .primeros-pasos__marca { background: var(--ok-texto, #17784f); border-color: transparent; }
.primeros-pasos__paso--hecho .primeros-pasos__texto strong { color: var(--texto-suave); text-decoration: line-through; text-decoration-thickness: 1px; }
.primeros-pasos__texto { flex: 1; min-width: 0; }
.primeros-pasos__paso .btn { flex: 0 0 auto; }
.primeros-pasos__ocultar { padding: 4px 20px 16px; text-align: right; }
.primeros-pasos__ocultar .btn-enlace { font-size: 13px; color: var(--texto-suave); }
@media (max-width: 600px) {
  .primeros-pasos__paso { flex-wrap: wrap; }
  .primeros-pasos__texto { flex: 1 1 calc(100% - 40px); }
  .primeros-pasos__paso .btn { margin-left: 40px; }
  .primeros-pasos__lista { padding: 0 16px; }
}

/* v110 — Reportes */
.reporte-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 18px; }
.reporte-filtros label { margin: 0 0 4px; font-size: 13px; }
.reporte-filtros select { width: auto; min-width: 140px; }
.reporte-filtros__excel { margin-left: auto; }
.reporte-total th, .reporte-total td { font-weight: 700; border-top: 2px solid var(--borde); }
@media (max-width: 600px) { .reporte-filtros > div { flex: 1 1 45%; } .reporte-filtros select { width: 100%; min-width: 0; } .reporte-filtros__excel { margin-left: 0; } }
.table th.num { text-align: right; }

/* v123 — Franja «Ronda de WhatsApp» (Inicio, Cobranza y Renovaciones) */
.ronda-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radio-sm, 8px); background: var(--ok-fondo); color: var(--ok-texto); border: 1px solid transparent; border-left: 4px solid var(--whatsapp, #25d366); font-size: 14px; }
.ronda-aviso__icono { display: inline-flex; }
.ronda-aviso__texto { flex: 1 1 260px; }
.inicio-agenda .ronda-aviso { margin: 4px 0 4px; }


/* v135 — versión del sistema al pie del menú */
.sidebar__version { display: block; margin: 12px 16px 4px; padding: 8px 10px; border-radius: var(--radio-sm); font-size: 12px; color: var(--texto-tenue); text-decoration: none; text-align: center; }
.sidebar__version:hover, .sidebar__version[aria-current] { background: var(--primary-suave); color: var(--primary-texto); }
.sidebar__version--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); font-weight: 600; }

/* v136 — encabezados ordenables (flechas a la derecha del título) */
th[data-orden-tipo] { white-space: nowrap; }
.orden-col { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 4px; margin-left: -4px; min-height: 0; background: none; border: 0; box-shadow: none; border-radius: 6px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transform: none; }
.orden-col:hover { background: rgba(0,0,0,.04); color: var(--texto); transform: none; box-shadow: none; }
html[data-modo="oscuro"] .orden-col:hover { background: rgba(255,255,255,.06); }
.orden-col:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.orden-col__flechas { flex: 0 0 auto; fill: currentColor; }
.orden-col__arriba, .orden-col__abajo { opacity: .35; transition: opacity .12s ease; }
th.orden--asc .orden-col, th.orden--desc .orden-col { color: var(--primary-texto); }
th.orden--asc .orden-col__arriba, th.orden--desc .orden-col__abajo { opacity: 1; }
th.orden--asc .orden-col__abajo, th.orden--desc .orden-col__arriba { opacity: .15; }
.orden-movil { display: none; }
@media (max-width: 991.98px) {
  .orden-movil { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
  .orden-movil label { font-size: 13px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
  .orden-movil select { flex: 1; min-width: 0; }
}

/* ═════════ v137 — Inicio rediseñado ═════════ */
/* Colores categóricos (validados: CVD ΔE ≥ 8.4, visión normal ≥ 19 en claro y oscuro) */
:root { --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #6250d6; }
html[data-modo="oscuro"] { --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #9085e9; }
.cat-1 { background: var(--cat-1); } .cat-2 { background: var(--cat-2); } .cat-3 { background: var(--cat-3); }
.cat-4 { background: var(--cat-4); } .cat-5 { background: var(--cat-5); } .cat-6 { background: var(--cat-6); }
.cat-otras { background: var(--texto-tenue); }

/* Encabezado: frase del mes + pendientes + anillo de cobranza */
.ini-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 20px; align-items: stretch; margin: 0 0 20px; }
.ini-hero__texto { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; }
.ini-hero__frase { margin: 0; max-width: 46ch; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; font-weight: 400; color: var(--texto-suave); letter-spacing: -.01em; text-wrap: pretty; }
.ini-hero__frase strong { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.ini-atencion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1500px) { .ini-atencion { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ini-chip { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 10px; padding: 12px 14px; border-radius: 14px; background: var(--blanco); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.ini-chip:hover { color: var(--texto); text-decoration: none; border-color: color-mix(in srgb, var(--chip) 45%, var(--borde)); background: color-mix(in srgb, var(--chip) 6%, var(--blanco)); }
.ini-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ini-chip__icono { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--chip); background: color-mix(in srgb, var(--chip) 13%, transparent); }
.ini-chip__n { font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ini-chip__txt { font-size: 12.5px; line-height: 1.25; color: var(--texto-suave); min-width: 0; }
.ini-chip__txt small { display: block; color: var(--texto-tenue); font-size: 11.5px; }
.ini-chip--aviso { --chip: var(--aviso-texto); } .ini-chip--info { --chip: var(--info-texto); }
.ini-chip--error { --chip: var(--error-texto); } .ini-chip--primario { --chip: var(--primary); }
.ini-chip--cero { --chip: var(--texto-tenue); }
.ini-chip--cero .ini-chip__n { color: var(--texto-tenue); }

.ini-anillo { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 20px; background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; }
.ini-anillo:hover { color: var(--texto); text-decoration: none; border-color: color-mix(in srgb, var(--primary) 35%, var(--borde)); }
.ini-anillo:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ini-anillo__grafica { position: relative; flex: 0 0 132px; width: 132px; height: 132px; }
.ini-anillo__svg { width: 100%; height: 100%; display: block; }
.ini-anillo__pista { fill: none; stroke: var(--fondo); stroke-width: 12; }
.ini-anillo__arco { fill: none; stroke-width: 12; background: none; }
.ini-anillo__arco.serie-pagado { stroke: var(--serie-pagado); } .ini-anillo__arco.serie-pendiente { stroke: var(--serie-pendiente); } .ini-anillo__arco.serie-vencido { stroke: var(--serie-vencido); }
.ini-anillo__centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ini-anillo__centro b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ini-anillo__centro b small { font-size: 16px; font-weight: 600; margin-left: 1px; }
.ini-anillo__centro span { margin-top: 4px; font-size: 12px; color: var(--texto-tenue); }
.ini-anillo__datos { flex: 1; min-width: 0; }
.ini-anillo__titulo { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.ini-anillo__datos dl { margin: 0; display: grid; gap: 7px; }
.ini-anillo__datos dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.ini-anillo__datos dt { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-suave); }
.ini-anillo__datos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Indicadores */
.ini-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 20px; }
.ini-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-width: 0; border-radius: 16px; background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; overflow: hidden; }
.ini-kpi:hover { color: var(--texto); text-decoration: none; border-color: color-mix(in srgb, var(--primary) 35%, var(--borde)); }
.ini-kpi:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ini-kpi__etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.ini-kpi__valor { font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ini-kpi__nota { font-size: 12.5px; color: var(--texto-tenue); line-height: 1.4; }
.ini-kpi--chispa { padding-bottom: 50px; }
.ini-kpi__chispa { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; }
.ini-chispa { display: block; width: 100%; height: 100%; }
.ini-chispa__area { fill: color-mix(in srgb, var(--serie-pagado) 14%, transparent); }
.ini-chispa__linea { fill: none; stroke: var(--serie-pagado); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ini-chispa__punto { fill: var(--serie-pagado); stroke: var(--blanco); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ini-kpi--alerta .ini-kpi__etiqueta { color: var(--error-texto); }
.ini-kpi--alerta .ini-kpi__valor { color: var(--error-texto); }
.ini-kpi--alerta.ini-kpi--ok .ini-kpi__etiqueta { color: var(--ok-texto); }
.ini-kpi--alerta.ini-kpi--ok .ini-kpi__valor { color: var(--texto); }
.ini-delta { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ini-delta--sube { background: var(--ok-fondo); color: var(--ok-texto); }
.ini-delta--baja { background: var(--error-fondo); color: var(--error-texto); }

/* Agenda + cobranza */
.ini-rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 0 0 20px; }
.ini-columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ini-rejilla .tarjeta, .ini-cartera .tarjeta { margin: 0; border-radius: 18px; }
.ini-agenda__cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ini-filtro { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fondo); }
.ini-filtro button { min-height: 0; padding: 6px 11px; border: 0; border-radius: 9px; background: none; box-shadow: none; transform: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.ini-filtro button:hover { color: var(--texto); background: none; transform: none; box-shadow: none; }
.ini-filtro button[aria-pressed="true"] { background: var(--blanco); color: var(--texto); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ini-filtro button span { margin-left: 3px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.ini-filtro button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ini-agenda .agenda__titulo { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.ini-agenda .agenda__fecha { flex-basis: 74px; font-weight: 600; }
.ini-agenda .agenda__item { padding: 10px 0; }

/* Cartera */
.ini-cartera { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Gráficas más ligeras */
.grafica__pila { width: min(30px, 58%); }
.grafica__columna--actual::before { background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 10px; }
.grafica__guia span { border-top-color: color-mix(in srgb, var(--borde) 70%, transparent); }
.grafica__barras { gap: 14px; }
.grafica__barra-pista { height: 8px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.grafica__barra-relleno { border-radius: 999px; }

/* Composición por producto */
.composicion__total { margin: 0 0 10px; font-size: 13px; color: var(--texto-tenue); }
.composicion__total b { font-size: 22px; color: var(--texto); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.composicion__barra { display: flex; gap: 2px; height: 14px; }
.composicion__seg { position: relative; min-width: 4px; flex-grow: 0; flex-shrink: 1; outline-offset: 2px; }
.composicion__seg:first-child { border-radius: 999px 0 0 999px; }
.composicion__seg:last-child { border-radius: 0 999px 999px 0; }
.composicion__seg:only-child { border-radius: 999px; }
.composicion__seg:hover .grafica__globo, .composicion__seg:focus-visible .grafica__globo { display: block; }
.composicion__seg .grafica__globo { bottom: calc(100% + 8px); min-width: 170px; }
.composicion__seg:first-child .grafica__globo { left: 0; transform: none; }
.composicion__seg:last-child:not(:first-child) .grafica__globo { left: auto; right: 0; transform: none; }
.composicion__leyenda { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.composicion__leyenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; font-size: 13px; }
.composicion__nombre { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composicion__valor { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.composicion__pct { text-align: right; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) {
  .ini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ini-hero, .ini-rejilla, .ini-cartera { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ini-kpis { gap: 10px; }
  .ini-kpi { padding: 14px; border-radius: 14px; }
  .ini-kpi--chispa { padding-bottom: 44px; }
  .ini-atencion { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ini-chip { grid-template-columns: auto 1fr; padding: 10px 12px; }
  .ini-chip__icono { display: none; }
  .ini-anillo { padding: 16px; gap: 14px; }
  .ini-anillo__grafica { flex-basis: 108px; width: 108px; height: 108px; }
  .ini-anillo__centro b { font-size: 26px; }
  .ini-hero__frase { font-size: 18px; }
  .ini-agenda__cabecera { align-items: stretch; }
  .ini-filtro { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .ini-filtro button { flex: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ini-anillo__arco { animation: ini-anillo-entrada .9s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes ini-anillo-entrada { from { stroke-dasharray: 0 400; } }
}