/*
==============================================================================
BLOQUE 1: copiado TEXTUAL del <style> de la maqueta aprobada
(core-dashboard/docs/mockups/portal-empresa.html, PR #839).
No cambiar nada de aquí sin comparar antes contra el archivo original.
Único cambio: "iconify-icon" -> ".icon" (nuestro span con el SVG en línea,
en vez del web component de Iconify que carga JS desde un CDN).
==============================================================================
*/
@import url("../vendor/fonts/comme/comme.c40c2bc15e41.css");
@import url("../vendor/larkon/app.min.ccca6a1c9c95.css");

body,h1,h2,h3,h4,h5,h6,.btn,.card-title{font-family:'Comme',sans-serif;}
body{background:#f3f3f9;}
.fs-12{font-size:12px!important;} .fs-13{font-size:13px!important;} .fs-15{font-size:14.5px!important;}
.text-disabled{color:#A0B1C1;}
.bg-gmm{background:#4D7397;} .text-gmm{color:#4D7397;}
.bg-auto{background:#766EA6;} .bg-hogar{background:#6BB09C;} .bg-vida{background:#64A1B1;}
.bg-purple-subtle{background:#e9e7f4!important;} .text-purple{color:#766EA6!important;}
.avatar-lg{height:4.5rem;width:4.5rem;}
.mt-n6{margin-top:.375rem!important;} .ms-6{margin-left:5.5rem!important;}
.mx-n3{margin-left:-1rem;margin-right:-1rem;} .mt-n3{margin-top:-1rem;}
.kv p{margin-bottom:.35rem;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal .dow{font-size:11.5px;color:#8a97a8;text-align:center;font-weight:600;padding-bottom:2px;}
.cal .day{min-height:66px;border:1px solid #eef0f3;border-radius:8px;padding:5px 6px;}
.cal .day.empty{border:none;}
.cal .day.today{border:1px solid #aed136;background:rgba(174,209,54,.10);}
.cal .dnum{font-weight:600;color:#5d7186;font-size:13px;}
.cal .pill{display:block;font-size:10.5px;border-radius:4px;padding:1px 5px;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ref-mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.5px;}

.app{display:grid;grid-template-columns:244px 1fr;min-height:100vh;}
.sidebar{background:#fff;border-right:1px solid #eef0f3;position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{padding:1.1rem 1.2rem;border-bottom:1px solid #eef0f3;}
.brand .sk{font-weight:700;font-size:1.35rem;color:#2b2e43;letter-spacing:-.5px;}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.2rem;color:#5d7186;cursor:pointer;font-weight:500;border-left:3px solid transparent;}
.nav-item:hover{background:#f7f9ee;color:#6d8f10;}
.nav-item.active{background:rgba(174,209,54,.16);color:#5f7d0e;border-left-color:#aed136;}
.nav-item.active .icon{color:#aed136;}
.nav-item .icon{font-size:1.25rem;}
.topbar{background:#fff;border-bottom:1px solid #eef0f3;padding:.7rem 1.4rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;}
.main-content{padding:1.4rem;}

.stat-icon{width:46px;height:46px;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.quick-action{cursor:pointer;border:1px solid #eef0f3;border-radius:.6rem;padding:1rem;text-align:center;transition:.15s;background:#fff;}
.quick-action:hover{border-color:#ff6c2f;background:#fff8f4;}
.alert-card{border-left:4px solid;border-radius:.5rem;}
.chip-filter{cursor:pointer;border:1px solid #e6e9ee;background:#fff;color:#5d7186;border-radius:2rem;padding:.28rem .9rem;font-size:13px;font-weight:500;}
.chip-filter.active{background:#ff6c2f;border-color:#ff6c2f;color:#fff;}
.mov-mode{cursor:pointer;border:1px solid #e6e9ee;border-radius:.5rem;padding:.8rem;text-align:center;transition:.15s;}
.mov-mode.active{border-color:#ff6c2f;background:#fff4ee;}
.view{display:none;}
.table td{vertical-align:middle;}
.row-link{cursor:pointer;}
.row-link:hover{background:#fbfcfe;}
#toast{position:fixed;bottom:24px;right:24px;z-index:1080;min-width:300px;display:none;}
.dropdown-toggle::after{content:"";display:inline-block;width:0;height:0;margin-left:.45em;vertical-align:.15em;border-top:.32em solid;border-right:.32em solid transparent;border-bottom:0;border-left:.32em solid transparent;}

/*
==============================================================================
BLOQUE 2: SOLO lo que hizo falta agregar para que funcione en Django/con
nuestros SVG en línea en vez de <iconify-icon>. Nada de esto reemplaza
valores del Bloque 1 — son piezas nuevas, no correcciones.
==============================================================================
*/

/* Tamaño base del ícono SVG en línea, equivalente a como se comporta
   <iconify-icon> (que por default ocupa 1em, el tamaño de fuente heredado). */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em;
    /* `flex-shrink: 0` porque varios íconos viven dentro de un contenedor
       flex (botones del topbar, sidebar): sin esto el navegador los
       comprime cuando el texto de al lado es largo, y el glifo se monta
       encima de la primera letra. */
    flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; display: block; }

/* Radios de "Tipo de movimiento" en nuestro modal: la maqueta usa <div onclick>
   con clase .mov-mode + JS para el estado "active"; nosotros usamos <label>
   con <input type=radio> real (accesible, funciona sin JS) — por eso
   necesita su propia clase con :has(), pero el valor de padding/border/radio
   es igual al de .mov-mode del Bloque 1, a propósito. */
.opcion-tipo { cursor: pointer; border: 1px solid #e6e9ee; border-radius: .5rem; padding: .8rem; text-align: center; transition: .15s; }
.opcion-tipo:has(input:checked) { border-color: #ff6c2f; background: #fff4ee; }
.opcion-tipo input { position: absolute; opacity: 0; }

.nav-item.disabled { color: #b4bdc7; cursor: not-allowed; }
.nav-item.disabled:hover { background: none; color: #b4bdc7; }

.logo-sekufin { height: 30px; width: auto; }

/* Estas reemplazan a style="" en línea, uno a uno, con el MISMO valor que
   tenía cada style="" copiado de la maqueta -- la Content-Security-Policy
   del portal (style-src 'self', sin 'unsafe-inline') bloquea los estilos
   en línea a propósito, así que cualquier style="" de aquí en adelante
   tiene que convertirse en una clase como estas. */
.fs-9 { font-size: 9px; }
.avatar-btn { width: 34px; height: 34px; font-weight: 600; cursor: pointer; }
.cursor-pointer { cursor: pointer; }
.search-sm { max-width: 220px; }
.login-card { width: 100%; max-width: 380px; }
.aviso-box { background: #fbfdf1; border: 1px dashed #cfe08a; color: #5c6b1f; }

.stat-bg-1 { background: #ffe9df; }
.stat-bg-2 { background: #e0f2ec; }
.stat-bg-3 { background: #eef6d4; }
.text-lime { color: #9bba32; }

/* Mis pólizas / detalle de póliza -- .text-gmm y .text-purple ya existían
   (Bloque 1); falta el equivalente de texto para .bg-vida (la maqueta usaba
   style="color:#64A1B1" en línea, que la CSP del portal no permite). */
.text-vida { color: #64A1B1 !important; }

/* Vigencia de póliza (rojo/amarillo/gris/vencida) -- mismo criterio de color
   que sekufin.lc_primas.vigencia_countdown() en core-dashboard. */
.text-vigencia-red { color: #ef5f5f !important; }
.text-vigencia-yellow { color: #d9a800 !important; }

/* Filas de asegurados/vehículos dados de baja: mismo criterio visual que el
   resto del portal para "ya no aplica" (texto atenuado), sin tocar el badge
   de estatus que ya trae su propio color. */
.fila-cancelada { opacity: .7; }

/* Espacio bajo el avatar circular que sobresale del header de color en las
   tarjetas de póliza (mockup usaba style="height:1.5rem" en línea). */
.card-avatar-spacer { height: 1.5rem; }

.alert-border-1 { border-left-color: #fac71f; }
.alert-border-2 { border-left-color: #ff6c2f; }
.alert-border-3 { border-left-color: #37A593; }

.auth-page-sidebar-full { border-radius: 0; }

/*
==============================================================================
Login — dirección "Split enmarcado": panel navy real de marca a la
izquierda, formulario dentro de su propia tarjeta a la derecha (ya no
flota en espacio vacío -- tiene el mismo peso visual que el panel navy).
Todo con nombres propios (auth-*): nada de esto toca .btn-primary,
.form-control ni ninguna clase que usen otras pantallas (Solicitudes, Inicio).
Colores extraídos del logo real de Sekufin (navy + lima), no del tema Larkon.
==============================================================================
*/
:root {
    --auth-navy: #141833;
    --auth-navy-deep: #0c0e20;
    --auth-navy-soft: #1f2547;
    --auth-lime: #aed136;
    --auth-paper: #eef0f6;
    --auth-ink-muted: #6b7094;
    --auth-border: #e4e6f0;
    --auth-radius: 10px;
}

/* Panel izquierdo: navy real de marca, a pantalla completa (como antes),
   con degradado sutil y el isotipo real de Sekufin como firma visual.
   height: 100vh + sticky + align-self: flex-start (no el "stretch" que
   trae .row por default) -- así mide SIEMPRE el mismo alto exacto sin
   importar cuánto texto tenga la tarjeta del formulario a su derecha
   (login/olvidé contraseña/nueva contraseña ya no varían "un poquito"
   entre sí -- hallazgo real de la revisión de diseño, ago 2026). */
.auth-lado-navy {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    overflow: hidden;
    background: linear-gradient(165deg, var(--auth-navy) 0%, var(--auth-navy-deep) 100%);
    color: #fff;
}
.auth-sidebar-content { position: relative; z-index: 1; max-width: 380px; }
.auth-sidebar-content h2 { color: #fff; }
.auth-sidebar-content p { color: #b7bbd6; }

.auth-watermark {
    position: absolute;
    left: -12%;
    bottom: -16%;
    width: 58%;
    min-width: 320px;
    opacity: .09;
    pointer-events: none;
}

.logo-sekufin-navy {
    display: block;
    max-width: 160px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .28));
}

.auth-headline {
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.01em;
    margin: 0;
}
.auth-headline-accent { color: var(--auth-lime); }

/* Indicador de 2 pasos del primer ingreso (opción C, 4 sep 2026). Solo se
   pinta en el cambio OBLIGATORIO de contraseña: ahí sí hay una secuencia real
   (entraron con la temporal, falta la definitiva), así que dice algo cierto en
   vez de decorar. Vive dentro del panel navy, por eso los colores son fijos y
   no tokens de la app. */
.auth-pasos {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.6rem;
}
.auth-paso {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.auth-paso-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    flex: none;
}
.auth-paso.hecho { color: #9ea3c4; }
.auth-paso.hecho .auth-paso-dot { background: var(--auth-lime); color: var(--auth-navy-deep); }
.auth-paso.actual { color: #fff; }
.auth-paso.actual .auth-paso-dot {
    background: transparent;
    border: 2px solid var(--auth-lime);
    color: var(--auth-lime);
}
.auth-paso-linea { width: 26px; height: 1px; background: #3a3f63; }
.auth-headline-rule {
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--auth-lime);
    margin: 20px 0 18px;
}

/* Panel derecho: fondo neutro (no blanco puro) para que la tarjeta del
   formulario se distinga como un objeto propio, con el mismo peso visual
   que el panel navy -- ya no flota en espacio vacío sin marco. */
.auth-lado-form {
    background: var(--auth-paper);
}
.auth-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--auth-border);
    box-shadow: 0 16px 40px rgba(20, 24, 51, .10);
    padding: 34px 32px;
}
.auth-welcome {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--auth-navy);
}

/* Formulario: inputs más altos (48-52px) y foco en lima, SOLO para login
   (clase auth-input, no form-control global). */
.auth-input {
    height: 50px;
    border-radius: var(--auth-radius);
    border: 1px solid #dcdfe8;
    padding-left: 40px;
    transition: border-color .15s, box-shadow .15s;
}
.auth-input:hover { border-color: #b9bdcf; }
.auth-input:focus {
    border-color: var(--auth-lime);
    box-shadow: 0 0 0 3px rgba(174, 209, 54, .22);
}

/* Campo con ícono fijo a la izquierda (correo / candado) — el ícono es
   puramente indicativo, por eso pointer-events: none. */
.auth-field { position: relative; }
.auth-field-icon {
    position: absolute;
    left: 13px; top: 50%; transform: translateY(-50%);
    color: #9498ae;
    pointer-events: none;
    display: flex;
}
.auth-field-icon svg { width: 17px; height: 17px; }

.auth-input-group { position: relative; }
.auth-input-group .auth-input { padding-right: 42px; }
.auth-toggle-password {
    position: absolute;
    right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 8px;
    color: #8a8fa6; cursor: pointer; border-radius: 6px;
}
.auth-toggle-password:hover { color: var(--auth-navy); background: #f2f3f8; }
.auth-toggle-password:focus-visible { outline: 2px solid var(--auth-lime); outline-offset: 1px; }

/* Botón deshabilitado mientras se envía el formulario -- misma apariencia,
   solo con el cursor y la opacidad que comunican "espera". */
.btn-auth-primary:disabled { opacity: .75; cursor: wait; }

/* Micro-etiquetas: mayúsculas, con tracking — misma familia tipográfica
   (Comme) que el resto, la jerarquía viene del tratamiento, no de mezclar
   fuentes. */
.auth-field-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--auth-ink-muted);
}

/* Botón: navy sólido, propio de login — .btn-primary (naranja) del resto
   del portal se queda intacto, sin tocar. */
.btn-auth-primary {
    height: 50px;
    border-radius: var(--auth-radius);
    background: var(--auth-navy);
    border: 1px solid var(--auth-navy);
    color: #fff;
    font-weight: 600;
    letter-spacing: .03em;
    transition: background .15s, transform .1s;
}
.btn-auth-primary:hover { background: var(--auth-navy-soft); color: #fff; }
.btn-auth-primary:active { transform: translateY(1px); }
.btn-auth-primary:focus-visible { outline: 2px solid var(--auth-lime); outline-offset: 2px; }

.auth-link-muted {
    color: #8a8fa6;
    font-size: 13.5px;
    text-decoration: none;
    cursor: default;
}


/* ---------------------------------------------------------------------------
   Selector de razón social (topbar)

   Solo se dibuja cuando la empresa pertenece a un grupo empresarial con más
   de una razón social. Con una sola, `.empresa-actual` muestra el nombre sin
   menú -- no hay nada entre qué elegir.
   --------------------------------------------------------------------------- */
.empresa-actual {
    font-size: .82rem;
    font-weight: 500;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las razones sociales mexicanas son largas ("Ventiladores y Accesorios,
   S.A. de C.V."): el botón se acota y corta con puntos suspensivos en vez
   de empujar la campana y el avatar fuera de la pantalla. El menú abierto sí
   muestra el nombre completo -- ahí es donde se elige. */
.topbar .dropdown-toggle > span:not(.icon) {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El item activo del menú: `.active` de Bootstrap pinta el fondo azul de su
   tema, que no es el del portal. */
.topbar .dropdown-item.active {
    background: var(--bs-tertiary-bg, #eef0f6);
    color: inherit;
    font-weight: 600;
}

/* Cada opción es un <form> (POST + CSRF), no un <a>: sin esto el botón de
   dentro heredaría el ancho del texto y no el del menú, y el área
   clickeable no llegaría a las orillas. */
.topbar .dropdown-menu form { margin: 0; }
.topbar .dropdown-menu form .dropdown-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
}


/* Acciones que todavía no existen (hoy: "Descargar póliza"). Se dejan
   visibles para no esconder que la función va a llegar, pero tienen que
   leerse como inactivas: mismo gris que el `.text-disabled` de los enlaces
   "Tarjeta · Certificado", y sin cursor de mano. */
.btn-proximamente:disabled,
.btn-proximamente.disabled {
    color: #A0B1C1;
    background: var(--bs-tertiary-bg, #f1f3f9);
    border-color: transparent;
    opacity: 1;            /* el .65 de Bootstrap encima del gris lo dejaba ilegible */
    cursor: not-allowed;
    pointer-events: auto;  /* si no, el navegador no muestra el title */
}


/* Separación ícono/texto en botones y enlaces de acción.

   El espacio en blanco del HTML entre <span class="icon"> y el texto se
   colapsa en cuanto el contenedor es flex, y aunque no lo sea el glifo
   llena todo el ancho de su caja (1em), así que se veía "⊕Nuevo
   movimiento" pegado. Se resolvía botón por botón con `d-inline-flex
   gap-2`; esta regla lo cubre de una vez --- ya había reaparecido en el
   topbar, en "Descargar póliza" y en los dos de movimientos. */
.btn:has(> .icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
}

/* Respaldo para navegadores sin :has() --- sin flex el margen sí se
   respeta, así que uno de los dos mecanismos siempre aplica. */
@supports not selector(:has(*)) {
    .btn > .icon { margin-inline-end: .4em; }
}

/* Scroll dentro del modal "Nuevo movimiento".

   `modal-dialog-scrollable` funciona poniendo `max-height` en el
   .modal-content y `overflow-y:auto` en el .modal-body, contando con que uno
   es hijo directo del otro. Aquí en medio hay un <form> (tiene que envolver
   header, body y footer para que el submit incluya todo), y ese <form> no es
   flex ni recorta: el body nunca recibe una altura de la que hacer scroll y
   se desborda hacia abajo.

   Con pocos campos casi no se notaba; desde que el paso 3 trae el formulario
   configurado, los últimos campos quedaban fuera de la pantalla.

   `min-height: 0` es la parte que no es obvia: sin ella un hijo flex no baja
   de su tamaño de contenido y el overflow nunca se activa. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
}


/* Campos del movimiento: MISMA rejilla que el formulario real del Dashboard
   (`.lc-mov-grid` en detail-lc.html) y que el lienzo del diseñador
   (`.fb-grid`). Antes eran dos columnas fijas de Bootstrap, así que lo que
   negocio veía al configurar no coincidía con lo que salía aquí --- y eso es
   justo lo que el diseñador promete.

   `auto-fit` con `minmax(240px, 1fr)`: caben las columnas que quepan. */
.mov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .9rem 1.1rem;
}
/* Mismas reglas que `.lc-mov-campo[data-ancho]` en el Dashboard:
   "completa" es la fila entera (tablas, texto largo, documentos) y "doble"
   son DOS columnas --- no lo mismo. */
.mov-grid .mov-campo-completo { grid-column: 1 / -1; }
.mov-grid .mov-campo-doble { grid-column: span 2; }
@media (max-width: 575.98px) { .mov-grid { grid-template-columns: 1fr; } }


/* Zona para soltar el CSV (paso 4 del modal de movimiento).
   Es el <label> del <input type=file>, que va oculto: un clic abre el
   explorador igual que siempre, y además se puede arrastrar el archivo.
   Punteada y no sólida a propósito: dice "aquí falta algo" sin competir
   con las tarjetas de los pasos 2 y 3, que sí son elecciones. */
.mov-csv-zona {
    border: 1.5px dashed #d3d7de;
    border-radius: .5rem;
    padding: 1.75rem 1rem;
    color: #6c757d;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.mov-csv-zona:hover,
.mov-csv-zona:focus-within { border-color: #ff6c2f; background: #fff8f4; }
/* Mientras se arrastra un archivo encima. */
.mov-csv-zona.arrastrando { border-color: #ff6c2f; background: #fff4ee; color: #c4470c; }
/* Con archivo elegido deja de pedir algo: pasa a confirmar lo que hay. */
.mov-csv-zona.con-archivo {
    border-style: solid;
    border-color: #b7d9c2;
    background: #f4faf6;
    color: #2f6b45;
}
.mov-csv-zona .icon svg { width: 1.75rem; height: 1.75rem; }


/* Cada familiar, en su propia tarjeta.
   Con ocho campos por persona, una tabla dejaba las columnas tan estrechas
   que no se leía ni el nombre completo. La tarjeta usa la misma rejilla que
   el resto del formulario, así que se lee entera y aguanta que negocio
   agregue más campos sin encogerse. */
.mov-familiar-tarjeta {
    border: 1px solid #e6e9ee;
    border-radius: .5rem;
    padding: .85rem;
    margin-bottom: .6rem;
    background: #fbfcfd;
}
.mov-familiar-tarjeta:last-child { margin-bottom: 0; }
.mov-familiar-tarjeta .form-label { color: #6c757d; font-weight: 500; }
/* La rejilla de dentro no hereda el hueco grande del formulario principal. */
.mov-familiar-tarjeta .mov-grid { gap: .5rem .75rem; }


/* Tabla para elegir a quién dar de baja o modificar (maqueta del PR #839).
   Con scroll propio: una póliza puede tener cien asegurados y el modal no
   puede crecer sin fin. La altura deja ver ~5 filas, suficiente para saber
   que hay más y seguir buscando. */
.mov-personas-tabla { max-height: 220px; overflow-y: auto; }
.mov-personas-tabla thead th {
    position: sticky; top: 0; background: #f8f9fa; z-index: 1;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
    color: #6c757d; font-weight: 600;
}
.mov-fila-persona td { vertical-align: middle; }

/* Los familiares cuelgan visualmente del empleado: sangrados, con su
   parentesco al frente y sobre un fondo apenas distinto, para que se lea
   "estos van con él" sin tener que ir comparando apellidos. */
.mov-fila-familiar { background: #fbfbfd; }
.mov-fila-familiar td:last-child { padding-left: 1.75rem; }
.mov-familia-parentesco { font-weight: 600; color: #4a4f6b; margin-right: .25rem; }

/* La nota del titular solo informa cuántos van con él; al marcarlo cambia a
   "Se van también sus N" en naranja. La familia está siempre a la vista. */
.mov-familia-nota { color: #6c757d; }
.mov-familia-nota.esta-marcada { color: #f96a2b; font-weight: 600; }
.mov-familia-rama { color: #6c757d; margin-right: .4rem; }

/* ===========================================================================
   Seguimiento por asegurado (lista de solicitudes y su detalle)
   ---------------------------------------------------------------------------
   Tres estados, no dos: quien espera un cuestionario de suscripción no está
   "pendiente de la aseguradora", espera algo que manda el cliente. Por eso
   lleva color propio (ámbar) y no se mezcla con el gris de "en trámite".
   Los colores salen de la paleta que ya usa el portal.
   =========================================================================== */
.sol-nombre{color:#2b2e43;text-decoration:none;font-weight:500;}
.sol-nombre:hover{color:#6d8f10;text-decoration:underline;}

.sol-barra{display:flex;height:5px;border-radius:999px;overflow:hidden;background:#eef1f5;max-width:260px;}
.sol-barra span{display:block;height:100%;}
.sol-barra .b-listas{background:#1f7a4d;}
.sol-barra .b-esperando{background:#e0a33a;}

.sol-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem;}
.sol-chip{border-radius:999px;padding:.1rem .5rem;font-size:11.5px;font-weight:600;white-space:nowrap;}
.sol-chip.listas{background:#e6f4ec;color:#1f7a4d;}
.sol-chip.esperando{background:#fdf1dc;color:#9a6100;}
.sol-chip.tramite{background:#eef1f5;color:#5d7186;}

.sol-buscador{flex:1 1 220px;min-width:180px;max-width:340px;}
.sol-filtro{
  border:1px solid #e0e4ea;background:#fff;border-radius:999px;
  padding:.25rem .75rem;font-size:12.5px;font-weight:600;color:#5d7186;cursor:pointer;
}
.sol-filtro[aria-pressed="true"].t-todas{background:#141833;border-color:#141833;color:#fff;}
.sol-filtro[aria-pressed="true"].t-listas{background:#e6f4ec;border-color:#e6f4ec;color:#1f7a4d;}
.sol-filtro[aria-pressed="true"].t-esperando{background:#fdf1dc;border-color:#fdf1dc;color:#9a6100;}
.sol-filtro[aria-pressed="true"].t-tramite{background:#eef1f5;border-color:#eef1f5;color:#5d7186;}

.sol-tanda{margin-bottom:1.1rem;}
.sol-tanda:last-of-type{margin-bottom:0;}
.sol-tanda-cab{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  padding:.35rem 0 .45rem;border-bottom:1px solid #eef0f3;
}
.sol-tanda-tit{font-size:13px;font-weight:700;}
.sol-persona{
  display:grid;grid-template-columns:96px 1fr auto;gap:.75rem;align-items:center;
  padding:.5rem 0;border-bottom:1px solid #f4f6f8;
}
.sol-persona:last-child{border-bottom:0;}

/* Adjuntar el cuestionario desde la propia fila de la persona. El input de
   archivo del navegador es feo e inconsistente entre sistemas, así que se
   esconde y el <label> hace de botón --- el clic en el label abre el selector
   igual, y el teclado sigue llegando al input real. */
.sol-cuestionario{display:flex;align-items:center;gap:.4rem;margin:0;}
.sol-cuestionario-archivo input[type=file]{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
.sol-cuestionario-archivo span{
  display:inline-block;cursor:pointer;font-size:12.5px;font-weight:600;
  color:#0b6b5e;border:1px solid #bfe3dd;border-radius:999px;padding:.15rem .6rem;
  background:#f2fbf9;
}
.sol-cuestionario-archivo span:hover{background:#e3f5f1;}
/* "Contestar" es la acción principal (llenarlo aquí) y "Adjuntar" la
   alternativa, así que va con más peso pero sin competir con el badge. */
.sol-cuestionario-llenar{
  font-size:12.5px;font-weight:600;text-decoration:none;color:#fff;
  background:#0b6b5e;border-radius:999px;padding:.18rem .7rem;
}
.sol-cuestionario-llenar:hover{background:#09564b;color:#fff;}

/* El aviso de "falta el cuestionario" en la LISTA de solicitudes. Sin esto, la
   fila decía "Solicitado / En revisión" y había que abrir la solicitud para
   enterarse de que faltaba algo --- y para una sola persona, abrirla no
   enseñaba nada más. */
.sol-pide-cuestionario{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.sol-chip-link{font-size:12px;font-weight:600;color:#0b6b5e;text-decoration:none;}
.sol-chip-link:hover{text-decoration:underline;color:#09564b;}

/* Los datos capturados de cada persona, bajo su renglón. En rejilla para que
   con dos o seis campos se lea igual de ordenado, y ocupando la fila completa
   porque cuelgan del nombre, no compiten con él. */
.sol-datos{
  grid-column:1/-1;display:grid;gap:.15rem 1.5rem;margin:.4rem 0 .1rem 0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.sol-datos dt{font-size:11.5px;color:#8a97a8;font-weight:500;}
.sol-datos dd{font-size:13px;margin:0 0 .25rem 0;color:#2b2e43;}
@media (max-width:560px){ .sol-datos{grid-template-columns:1fr;} }
.sol-cuestionario-archivo input[type=file]:focus-visible + span{
  outline:2px solid #0b6b5e;outline-offset:2px;
}
.sol-cert{color:#8a97a8;font-size:12.5px;}
.sol-quien{min-width:0;}
@media (max-width:560px){
  .sol-persona{grid-template-columns:1fr auto;}
  .sol-cert{grid-column:1/-1;}
}

/* Celda del checkbox/radio en la lista de personas del modal de movimientos.
   Es una clase y no style="" porque la CSP bloquea los estilos en línea,
   también los que arma portal.js al escribir HTML. */
.mov-celda-control{width:1%;}