/* ============================================================
   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: 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: 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 { 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 { 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__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; }