/* ============================================================
   Tema STAUS — capa de identidad sobre Bootstrap 5.2 / SB Admin
   Se carga DESPUÉS de styles.css. No reescribe la plantilla:
   redefine variables --bs-* y afina componentes. Reversible.
   ============================================================ */

/* ---------- Tipografías auto-hospedadas ---------- */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/public/fonts/public-sans-400.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/public/fonts/public-sans-500.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/public/fonts/public-sans-600.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/public/fonts/public-sans-700.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 700;font-display:swap;src:url(/public/fonts/fraunces-var.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --staus-red:#D81F27; --staus-red-deep:#B0161C; --staus-red-tint:#FCE8E9;
  --staus-ink:#171A1F; --staus-muted:#535962; --staus-faint:#868D97;
  --staus-line:#E3E7ED; --staus-line-strong:#D0D6DE;
  --staus-paper:#F4F6F9; --staus-surface:#FFFFFF; --staus-green:#1F8A50;
  /* medidor de contraseña — naranja/verde, para no confundirse con el rojo de marca */
  --pw-weak:#D9480F; --pw-fair:#E9A03B; --pw-good:#3F9D63; --pw-strong:#1F8A50;
  --staus-font:'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --staus-display:'Fraunces', Georgia, 'Times New Roman', serif;

  /* Bootstrap overrides */
  --bs-body-font-family:var(--staus-font);
  --bs-body-bg:var(--staus-paper);
  --bs-body-color:var(--staus-ink);
  --bs-border-color:var(--staus-line);
  --bs-border-color-translucent:rgba(23,26,31,.12);
  --bs-primary:#D81F27; --bs-primary-rgb:216,31,39;
  --bs-link-color:var(--staus-red-deep); --bs-link-hover-color:var(--staus-red);
  --bs-border-radius:.6rem; --bs-border-radius-sm:.4rem; --bs-border-radius-lg:.85rem;
}

/* ---------- Base ---------- */
body{font-family:var(--staus-font);background-color:var(--staus-paper);color:var(--staus-ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--staus-display);font-weight:600;letter-spacing:-.01em}
h1,.h1{font-weight:600}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-logout){color:var(--staus-red-deep);text-underline-offset:2px}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-logout):hover{color:var(--staus-red)}

/* Foco de teclado visible en toda la app (accesibilidad) */
a:focus-visible,.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible,
button:focus-visible,.page-link:focus-visible,.dropdown-item:focus-visible{
  outline:2px solid var(--staus-red);outline-offset:2px;border-radius:4px}

/* ---------- Botones ---------- */
.btn{--bs-btn-border-radius:.55rem;font-weight:600;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .04s ease}
.btn:active{transform:translateY(1px)}

/* primaria de marca (rojo STAUS) — el sistema usa .btn-danger y .btn-primary para CTAs */
.btn-danger,.btn-primary{
  --bs-btn-bg:var(--staus-red);--bs-btn-border-color:var(--staus-red);
  --bs-btn-hover-bg:var(--staus-red-deep);--bs-btn-hover-border-color:var(--staus-red-deep);
  --bs-btn-active-bg:var(--staus-red-deep);--bs-btn-active-border-color:var(--staus-red-deep);
  --bs-btn-disabled-bg:var(--staus-red);--bs-btn-disabled-border-color:var(--staus-red);
  --bs-btn-focus-shadow-rgb:216,31,39}

.btn-success{
  --bs-btn-bg:var(--staus-green);--bs-btn-border-color:var(--staus-green);
  --bs-btn-hover-bg:#186B3E;--bs-btn-hover-border-color:#186B3E;
  --bs-btn-active-bg:#186B3E;--bs-btn-active-border-color:#186B3E;
  --bs-btn-focus-shadow-rgb:31,138,80}

/* amarillo con texto oscuro legible (antes: contraste pobre) */
.btn-warning{
  --bs-btn-bg:#E7A93A;--bs-btn-color:#3A2C0C;--bs-btn-border-color:#E7A93A;
  --bs-btn-hover-bg:#D79A2B;--bs-btn-hover-color:#3A2C0C;--bs-btn-hover-border-color:#D79A2B;
  --bs-btn-active-bg:#D79A2B;--bs-btn-active-color:#3A2C0C;--bs-btn-focus-shadow-rgb:231,169,58}

/* secundaria: neutra suave (antes: gris sólido) */
.btn-secondary{
  --bs-btn-bg:#EEF1F5;--bs-btn-color:#2A2F36;--bs-btn-border-color:#DEE3E9;
  --bs-btn-hover-bg:#E3E8EE;--bs-btn-hover-color:#171A1F;--bs-btn-hover-border-color:#D0D6DE;
  --bs-btn-active-bg:#DEE3E9;--bs-btn-active-color:#171A1F;--bs-btn-focus-shadow-rgb:208,214,222}

.btn-outline-danger,.btn-outline-primary{
  --bs-btn-color:var(--staus-red-deep);--bs-btn-border-color:var(--staus-line-strong);
  --bs-btn-hover-bg:var(--staus-red);--bs-btn-hover-border-color:var(--staus-red);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--staus-red-deep);--bs-btn-active-border-color:var(--staus-red-deep);
  --bs-btn-focus-shadow-rgb:216,31,39}

/* ---------- Tarjetas ---------- */
.card{border-color:var(--staus-line);border-radius:.85rem;
  box-shadow:0 1px 2px rgba(20,24,33,.04),0 10px 26px -18px rgba(20,24,33,.22)}
.card-header{background:var(--staus-surface);border-bottom-color:var(--staus-line);font-weight:600}

/* ---------- Navbar superior + Sidebar ---------- */
.sb-topnav{background:#16181C !important}
.navbar-brand{font-family:var(--staus-font);font-weight:800;letter-spacing:.06em;color:var(--staus-red) !important}
.sb-sidenav-dark{background:#1B1E23}
.sb-sidenav-dark .sb-sidenav-menu-heading{color:#8b93a1;letter-spacing:.1em}
.sb-sidenav-dark .nav-link{color:#c7ccd4;border-radius:8px;margin:1px 8px;transition:background-color .12s,color .12s}
.sb-sidenav-dark .nav-link .sb-nav-link-icon{color:#8b93a1;transition:color .12s}
.sb-sidenav-dark .nav-link:hover{color:#fff;background:rgba(216,31,39,.12)}
.sb-sidenav-dark .nav-link:hover .sb-nav-link-icon{color:var(--staus-red)}
.sb-sidenav-dark .nav-link.active{color:#fff;background:rgba(216,31,39,.16);box-shadow:inset 3px 0 0 var(--staus-red)}
.sb-sidenav-footer{background:#16181C;flex-direction:column;align-items:stretch}
.sb-sidenav-footer .sidebar-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:9px 12px;margin-bottom:10px;border-radius:8px;color:#e7ebf0;text-decoration:none;font-weight:600;
  font-size:.9rem;background:rgba(255,255,255,.06);transition:background-color .12s ease,color .12s ease}
.sb-sidenav-footer .sidebar-logout:hover{background:var(--staus-red);color:#fff}
.dropdown-header{font-weight:700;color:var(--staus-ink)}

/* ---------- Formularios ---------- */
.form-control,.form-select{border-color:var(--staus-line-strong);border-radius:.5rem}
.form-control:focus,.form-select:focus{border-color:var(--staus-red);box-shadow:0 0 0 .2rem rgba(216,31,39,.16)}
.form-floating>label{color:var(--staus-muted)}

/* Flecha del select en el gris del tema (Bootstrap la trae en otro tono) y con
   hueco suficiente para que no se encime con textos largos como las delegaciones.
   Nota: la LISTA de opciones la dibuja el sistema operativo y no admite CSS;
   cuando son pocas opciones conviene usar `.segmented` en vez de un <select>. */
.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23535962' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-size:15px 11px;padding-right:2.5rem}
.form-select:disabled{background-color:var(--staus-paper);color:var(--staus-muted)}
.form-select option{color:var(--staus-ink)}
/* el placeholder ("Seleccionar…") se ve como pista, no como un valor elegido */
.form-select:has(option[value=""]:checked){color:var(--staus-faint)}
.input-group-text{background:var(--staus-surface);border-color:var(--staus-line-strong);color:var(--staus-muted);font-weight:600}

/* ---------- Lista desplegable propia (listas largas) ---------- */
/* Requiere /public/js/select-staus.js. El <select> original sigue ahí como
   campo real del formulario, invisible pero enfocable: si se ocultara con
   `display:none`, el navegador no podría mostrar el mensaje de `required`. */
.staus-select{position:relative}
.staus-select-nativo{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}

.staus-select-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:var(--staus-surface);border:1px solid var(--staus-line-strong);border-radius:.5rem;
  padding:.375rem .75rem;min-height:38px;font-family:var(--staus-font);font-size:1rem;
  color:var(--staus-ink);text-align:left;cursor:pointer;line-height:1.5}
.staus-select-toggle:hover{border-color:var(--staus-line-strong);background:var(--staus-paper)}
.staus-select.abierto .staus-select-toggle,.staus-select-toggle:focus-visible{
  border-color:var(--staus-red);box-shadow:0 0 0 .2rem rgba(216,31,39,.16);outline:none}
.staus-select-toggle.es-placeholder .staus-select-valor{color:var(--staus-faint)}
.staus-select-valor{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staus-select-flecha{flex:none;width:15px;height:11px;color:var(--staus-muted);display:block}
.staus-select-flecha svg{width:15px;height:11px;display:block;transition:transform .15s ease}
.staus-select.abierto .staus-select-flecha svg{transform:rotate(180deg)}

/* dentro de .form-floating hay que dejar hueco arriba para la etiqueta flotante,
   igual que hace Bootstrap con el select nativo */
.staus-select.en-form-floating .staus-select-toggle{
  min-height:calc(3.5rem + 2px);padding:1.625rem .75rem .625rem}

.staus-select-panel{position:absolute;z-index:1056;top:calc(100% + 4px);left:0;right:0;
  background:var(--staus-surface);border:1px solid var(--staus-line);border-radius:.6rem;
  box-shadow:0 12px 34px -12px rgba(20,24,33,.35);padding:6px;max-height:320px;
  display:flex;flex-direction:column;overflow:hidden}
.staus-select-buscar{flex:none;width:100%;border:1px solid var(--staus-line-strong);border-radius:.45rem;
  padding:.4rem .6rem;margin-bottom:6px;font-family:var(--staus-font);font-size:.92rem;color:var(--staus-ink)}
.staus-select-buscar:focus{outline:none;border-color:var(--staus-red);box-shadow:0 0 0 .15rem rgba(216,31,39,.14)}
.staus-select-lista{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 auto}
.staus-select-opcion{padding:.5rem .65rem;border-radius:.4rem;font-size:.94rem;color:var(--staus-ink);
  cursor:pointer;white-space:normal;line-height:1.35}
.staus-select-opcion.es-placeholder{color:var(--staus-faint)}
.staus-select-opcion.activa{background:var(--staus-paper)}
.staus-select-opcion.elegida{background:var(--staus-red-tint);color:var(--staus-red-deep);font-weight:600}
.staus-select-opcion.elegida.activa{background:#F8DADC}
.staus-select-vacio{margin:0;padding:.6rem;color:var(--staus-faint);font-size:.9rem;text-align:center}
.staus-select-grupo{padding:.5rem .65rem .25rem;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--staus-faint);pointer-events:none}
.staus-select-grupo:not(:first-child){border-top:1px solid var(--staus-line);margin-top:4px;padding-top:.55rem}

/* ---------- Selector segmentado ---------- */
/* Para opciones pocas y cortas (2-5). La lista desplegable de un <select> la
   dibuja el sistema operativo y NO se puede estilizar; además obliga a dos
   clics. Esto se ve igual en todos lados, muestra todas las opciones a la vez
   y se elige de un clic. Usa radios de verdad, así que el formulario y el
   teclado funcionan sin JavaScript extra. */
.field-label{display:block;font-size:.8rem;font-weight:600;color:var(--staus-muted);margin-bottom:6px}
.segmented{display:inline-flex;border:1px solid var(--staus-line-strong);border-radius:.55rem;
  overflow:hidden;background:var(--staus-surface);max-width:100%;flex-wrap:wrap}
.segmented-option{margin:0;display:flex}
.segmented-option>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.segmented-option>span{display:block;padding:.5rem 1.15rem;font-weight:600;font-size:.92rem;
  color:var(--staus-muted);cursor:pointer;border-left:1px solid var(--staus-line);
  transition:background-color .12s ease,color .12s ease;white-space:nowrap;user-select:none}
.segmented-option:first-child>span{border-left:0}
.segmented-option>span:hover{background:var(--staus-paper);color:var(--staus-ink)}
.segmented-option:has(input:checked)>span{background:var(--staus-red);color:#fff}
.segmented-option>input:focus-visible+span{outline:2px solid var(--staus-red);outline-offset:-2px}

/* ---------- Tablas / DataTables ---------- */
/* El sistema usa DOS librerías de tablas: simple-datatables (`.datatable-table`)
   en casi todas las listas, y jQuery DataTables (`table.dataTable`) en las que
   exportan a Excel/PDF. Se estilan juntas para que se vean idénticas. */
.table thead th,.datatable-table thead th,table.dataTable thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--staus-muted);font-weight:700;border-bottom:2px solid var(--staus-line-strong)}
.datatable-table tbody tr:hover,table.dataTable tbody tr:hover{background:rgba(216,31,39,.03)}
.page-item.active .page-link{background:var(--staus-red);border-color:var(--staus-red)}
.page-link{color:var(--staus-red-deep)}
.datatable-sorter:hover{color:var(--staus-red)}

/* jQuery DataTables: mismas medidas que simple-datatables.
   OJO: jquery.dataTables.css usa combinador hijo (`table.dataTable > thead > tr > th`,
   especificidad 0-1-4) y `div.dt-container ...` en la paginación. Hay que repetir
   esa forma de selector; si no, gana su hoja aunque esta cargue después. */
/* Scroll lateral contenido, igual que el .datatable-container de simple-datatables:
   en celular se desplaza la tabla, no la página entera. El menú "⋯" se salva del
   recorte gracias a /public/js/dropdown-fixed.js. */
div.dt-container .dt-layout-row.dt-layout-table>.dt-layout-cell{overflow-x:auto}

table.dataTable{width:100%;border-collapse:collapse;margin-bottom:1rem}
table.dataTable>thead>tr>th{
  padding:8px 26px 8px 8px;                       /* hueco para la flecha de orden */
  border-bottom:2px solid var(--staus-line-strong)}
table.dataTable>tbody>tr>td{font-size:.875rem;padding:8px;border:0}
table.dataTable>tbody>tr{border:0;background-color:transparent}
table.dataTable>tbody>tr:hover>td{background:rgba(216,31,39,.03)}
table.dataTable>thead>tr>th.dt-orderable-asc:hover,
table.dataTable>thead>tr>th.dt-orderable-desc:hover{color:var(--staus-red)}

/* Controles del wrapper (buscar / mostrar N / info / paginación) */
div.dt-container .dt-search input,div.dt-container .dt-length select{
  border:1px solid #CED4DA;border-radius:6px;padding:6px 12px;
  font-family:var(--staus-font);font-size:1rem;background:var(--staus-surface);color:var(--staus-ink)}
div.dt-container .dt-search input:focus,div.dt-container .dt-length select:focus{
  border-color:var(--staus-red);outline:none;box-shadow:0 0 0 .2rem rgba(216,31,39,.16)}
div.dt-container .dt-search label,div.dt-container .dt-length label,
div.dt-container .dt-info{font-family:var(--staus-font);color:var(--staus-ink)}
div.dt-container .dt-paging .dt-paging-button{
  background:var(--staus-surface) !important;background-image:none !important;
  border:1px solid var(--staus-line);color:var(--staus-red-deep) !important;
  padding:6px 12px;border-radius:0;margin:0;font-family:var(--staus-font);font-size:.9rem;min-width:0}
div.dt-container .dt-paging .dt-paging-button:first-child{border-radius:6px 0 0 6px}
div.dt-container .dt-paging .dt-paging-button:last-child{border-radius:0 6px 6px 0}
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current){
  background:var(--staus-paper) !important}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover{
  background:#D9D9D9 !important;background-image:none !important;color:var(--staus-red-deep) !important}
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover{
  color:var(--staus-faint) !important;background:var(--staus-surface) !important}

/* ---------- Alertas ---------- */
.alert-danger{--bs-alert-bg:var(--staus-red-tint);--bs-alert-border-color:#f1c4c6;--bs-alert-color:#8A1116}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem}
.breadcrumb-item.active{color:var(--staus-muted)}

/* ---------- Menú de acciones en tablas (⋯) ---------- */
.actions-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dropdown-menu{border-color:var(--staus-line);border-radius:.6rem;box-shadow:0 8px 30px -12px rgba(20,24,33,.35);font-size:.92rem}
.dropdown-item.text-danger{color:var(--staus-red-deep) !important}
.dropdown-item.text-danger:hover{background:var(--staus-red-tint)}
.btn-actions{--bs-btn-bg:transparent;--bs-btn-border-color:var(--staus-line-strong);--bs-btn-color:var(--staus-muted);
  --bs-btn-hover-bg:#EEF1F5;--bs-btn-hover-border-color:var(--staus-line-strong);--bs-btn-hover-color:var(--staus-ink);
  font-weight:800;letter-spacing:1px;padding:.35rem .7rem;line-height:1}

/* ---------- Verificación antes de registrar asistencia ---------- */
/* Requiere /public/js/attendance-verify.js */
.verifica-resultado{margin-top:14px;border-radius:.6rem;padding:12px 14px;border:1px solid var(--staus-line)}
.verifica-resultado.es-ok{background:rgba(31,138,80,.07);border-color:rgba(31,138,80,.35)}
.verifica-resultado.es-error{background:var(--staus-red-tint);border-color:#f1c4c6}
.verifica-datos{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.verifica-datos dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--staus-muted);font-weight:700;align-self:center}
.verifica-datos dd{margin:0;font-weight:600;color:var(--staus-ink)}
.verifica-mensaje{margin:10px 0 0;font-size:.82rem;color:var(--staus-muted)}
.verifica-resultado.es-error .verifica-mensaje{margin:0;color:#8A1116;font-weight:500}

/* ---------- Insignias ---------- */
/* Para etiquetar sin alarmar (una forma de registro, un tipo). El amarillo de
   Bootstrap no está en la paleta y se lee como advertencia. */
.badge.badge-neutro{background:var(--staus-paper);color:var(--staus-muted);
  border:1px solid var(--staus-line-strong);font-weight:600}

/* ---------- Codificación de respuestas de texto libre ---------- */
.encode-opcion{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:.5rem;cursor:pointer;margin:0}
.encode-opcion:hover{background:var(--staus-paper)}
.encode-opcion>input{flex:none;margin:0}
.encode-opcion>span:first-of-type{flex:1;line-height:1.35}
.encode-total{flex:none;font-size:.78rem;font-weight:700;color:var(--staus-muted);
  background:var(--staus-paper);border:1px solid var(--staus-line);border-radius:50rem;padding:1px 9px;min-width:34px;text-align:center}
.encode-sin{color:var(--staus-faint);font-style:italic}
/* Nombre del código junto al número, en la tabla de resultados */
.encode-etiqueta{display:inline-block;margin-top:2px;font-size:.8rem;font-weight:600;color:var(--staus-red)}
/* Panel de grupos ya codificados */
.encode-grupos{margin-top:16px;padding-top:14px;border-top:1px dashed var(--staus-line-strong)}
.encode-grupos-titulo{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--staus-muted);margin:0 0 10px}
.encode-grupos .encode-rename .form-control{min-width:120px}
/* Chips con las variantes que quedaron dentro de un grupo */
.encode-variante{display:inline-block;font-size:.78rem;color:var(--staus-muted);
  background:var(--staus-paper);border:1px solid var(--staus-line);border-radius:50rem;padding:1px 9px}

/* ---------- Resultados: rejilla de preguntas ---------- */
/* Tres columnas para poder comparar preguntas de un vistazo, en vez de una
   tabla por fila obligando a desplazarse. Baja a 2 y a 1 en pantallas menores. */
/* El margen inferior separa la última fila del pie negro: las tarjetas ya no
   llevan .mb-4 propio (lo sustituye el gap), así que sin esto la última fila
   quedaba pegada al footer. */
.resultados-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start;
  margin-bottom:2rem}
.resultados-grid > .card{margin-bottom:0}
/* La tabla no debe forzar el ancho de su columna */
.resultados-grid .table{margin-bottom:0}
.resultados-grid .card-header{white-space:normal;line-height:1.35}
@media (max-width:1400px){.resultados-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.resultados-grid{grid-template-columns:1fr;gap:1rem}}

/* ---------- Resultados: participación y quórum ---------- */
.participacion{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.participacion-cifra{display:flex;flex-direction:column;gap:2px}
.participacion-numero{font-family:var(--staus-display);font-size:2rem;font-weight:700;line-height:1;color:var(--staus-ink)}
.participacion-etiqueta{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--staus-muted)}
/* La barra ocupa el espacio sobrante */
.participacion-barra-caja{flex:1 1 240px;min-width:200px}
.participacion-barra{height:14px;border-radius:50rem;background:var(--staus-line);overflow:hidden}
.participacion-relleno{height:100%;border-radius:50rem;background:var(--staus-red);
  transition:width .4s ease}
.participacion-relleno.es-quorum{background:var(--staus-green)}
/* Marca de la mitad: hace visible dónde está el umbral del quórum */
.participacion-barra{position:relative}
.participacion-marca{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--staus-ink);opacity:.45}
.participacion-pie{display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  font-size:.8rem;color:var(--staus-muted)}
/* Veredicto */
.participacion-quorum{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:50rem;
  font-weight:700;font-size:.9rem;border:1px solid transparent}
.participacion-quorum.si{background:rgba(31,138,80,.10);color:#14663A;border-color:rgba(31,138,80,.35)}
.participacion-quorum.no{background:var(--staus-paper);color:var(--staus-muted);border-color:var(--staus-line-strong)}
.participacion-nota{width:100%;margin:0;font-size:.85rem;color:var(--staus-muted)}
/* Cuando el padrón vigente no sirve de referencia (consultas antiguas) */
.participacion-aviso{width:100%;display:flex;gap:10px;align-items:flex-start;
  background:var(--staus-paper);border:1px solid var(--staus-line-strong);border-radius:.6rem;
  padding:12px 14px;font-size:.86rem;color:var(--staus-muted);line-height:1.45}
.participacion-aviso i{margin-top:2px;color:var(--staus-faint);flex:none}
@media (max-width:640px){
  .participacion{gap:14px 20px}
  .participacion-numero{font-size:1.6rem}
}

/* ---------- Buscador dentro de listas largas ---------- */
/* Requiere /public/js/list-filter.js */
.list-filter-caja{position:sticky;top:0;z-index:2;background:var(--staus-surface);
  padding-bottom:10px;margin-bottom:4px}
.list-filter{width:100%;border:1px solid var(--staus-line-strong);border-radius:.5rem;
  padding:.45rem .7rem;font-family:var(--staus-font);font-size:.9rem;color:var(--staus-ink)}
.list-filter:focus{outline:none;border-color:var(--staus-red);box-shadow:0 0 0 .15rem rgba(216,31,39,.14)}
.list-filter-cuenta{display:block;margin-top:5px;font-size:.78rem;color:var(--staus-muted)}
.list-filter-vacio{margin:14px 0;text-align:center;color:var(--staus-faint);font-size:.9rem}

/* ---------- Estado "guardando…" ---------- */
/* Requiere /public/js/form-loading.js */
.cargando-spinner{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:staus-girar .7s linear infinite}
@keyframes staus-girar{to{transform:rotate(360deg)}}
.esta-cargando{position:relative}
.esta-cargando .modal-body,.esta-cargando fieldset{opacity:.55;pointer-events:none}
.cargando-aviso{margin:0;font-size:.82rem;color:var(--staus-muted);width:100%;text-align:right}
@media (prefers-reduced-motion:reduce){
  .cargando-spinner{animation-duration:2s}
}

/* ---------- Barra de acciones de una pantalla ---------- */
/* Sustituye al patrón viejo `div(style="display:flex")` + `.col-xs-4` (clases de
   Bootstrap 3 que en la versión 5 no existen y no hacían nada). */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar .btn{flex:none}
.toolbar-note{width:100%;color:var(--staus-muted);font-size:.88rem;margin:0 0 4px}
/* separa una acción final o irreversible del resto */
.toolbar .toolbar-end{margin-left:auto}
@media (max-width:575.98px){
  .toolbar{align-items:stretch}
  .toolbar .btn{width:100%}
  .toolbar .toolbar-end{margin-left:0}
}

/* ---------- Encabezado de lista: descripción + acción principal ---------- */
/* "Crear" es la acción primaria de cada lista (va en rojo). El resto de lo que
   hay en la pantalla —exportar, descargar QR— queda en neutro para no competir. */
.list-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.list-actions>span{color:var(--staus-muted);font-size:.94rem}
.list-actions .btn{flex:none}
@media (max-width:575.98px){
  .list-actions{align-items:stretch}
  .list-actions .btn{width:100%}
}

/* ---------- Bloque "Descargar QR" ---------- */
/* El botón lleva la acción; el texto de al lado explica para quién es el QR y
   muestra la URL exacta a la que apunta (útil para pegarla en un correo). */
.qr-block{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.qr-block form{flex:none}
.qr-note{font-size:.88rem;color:var(--staus-muted);max-width:52ch;line-height:1.5}
.qr-url{display:block;margin-top:4px;font-size:.8rem;color:var(--staus-faint);
  word-break:break-all;font-variant-numeric:tabular-nums}
@media (max-width:575.98px){
  .qr-block{gap:10px}
  .qr-block form,.qr-block .btn{width:100%}
}

/* ---------- Botones de exportar de DataTables ---------- */
/* buttons.dataTables.css los pinta con un degradado gris de 2010. Se rehacen
   como botones neutros del tema: exportar es una acción de apoyo, no la
   principal de la pantalla, así que no van en rojo. Aplica a todas las listas
   que usan estos botones (usuarios, búsqueda, encuestas, vista previa). */
.dt-button,div.dt-button,a.dt-button,button.dt-button{
  background:var(--staus-surface) !important;background-image:none !important;filter:none !important;
  border:1px solid var(--staus-line-strong) !important;border-radius:.55rem !important;
  color:var(--staus-ink) !important;font-family:var(--staus-font);font-weight:600;font-size:.85rem;
  padding:.45rem .9rem !important;margin:0 8px 8px 0 !important;line-height:1.4;
  display:inline-flex;align-items:center;gap:7px;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.dt-button:hover,div.dt-button:hover,a.dt-button:hover,button.dt-button:hover{
  background:#EEF1F5 !important;background-image:none !important;
  border-color:var(--staus-line-strong) !important;color:var(--staus-ink) !important}
.dt-button:active,button.dt-button:active{transform:translateY(1px)}
.dt-button:focus-visible,button.dt-button:focus-visible{
  outline:2px solid var(--staus-red) !important;outline-offset:2px;box-shadow:none !important}
/* el icono hereda el color del texto y no estorba al alinear */
.dt-button .dt-ico{width:15px;height:15px;flex:none;color:var(--staus-muted)}
.dt-button:hover .dt-ico{color:var(--staus-ink)}
.dt-buttons{margin-bottom:6px}

/* ---------- Boleta de voto (afiliado) ---------- */
.ballot-card{max-width:520px;margin:0 auto}
.ballot-card .card-header{background:var(--staus-red);color:#fff;border-bottom:0;display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:1rem;padding:14px 18px}
.ballot-question{font-family:var(--staus-display);font-weight:600;font-size:1.2rem;line-height:1.25;margin:4px 0 16px;color:var(--staus-ink)}
.ballot-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--staus-line-strong);
  border-radius:12px;margin-bottom:10px;cursor:pointer;background:#fff;color:var(--staus-ink);font-weight:500;
  transition:border-color .12s ease,background-color .12s ease}
.ballot-option:hover{border-color:var(--staus-red)}
.ballot-option>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ballot-tick{width:23px;height:23px;border-radius:50%;border:2px solid var(--staus-line-strong);flex:none;
  display:grid;place-items:center;transition:background-color .12s,border-color .12s}
.ballot-tick svg{opacity:0;transition:opacity .12s}
.ballot-option:has(input:checked){border:2px solid var(--staus-red);background:var(--staus-red-tint);font-weight:600;padding:13.5px 15.5px}
.ballot-option:has(input:checked) .ballot-tick{background:var(--staus-red);border-color:var(--staus-red)}
.ballot-option:has(input:checked) .ballot-tick svg{opacity:1}
/* respaldo para navegadores sin :has — resalta con el radio nativo enfocado */
.ballot-option>input:focus-visible+.ballot-tick{outline:2px solid var(--staus-red);outline-offset:2px}
.ballot-cta{width:100%;margin-top:22px;font-size:1rem;padding:.75rem}
.ballot-trust{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--staus-muted)}
.ballot-dates{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ballot-dates .chip{font-size:.75rem;color:var(--staus-muted);background:var(--staus-paper);border:1px solid var(--staus-line);
  border-radius:50rem;padding:4px 12px;font-variant-numeric:tabular-nums}
.ballot-images{max-width:100%;height:auto;border-radius:10px}
.ballot-voted{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;
  background:rgba(31,138,80,.10);color:#1B6B41;font-weight:600;font-size:.92rem}

/* Progreso entre secciones de una encuesta */
.poll-progress{padding:14px 18px 0}
.poll-progress-texto{font-size:.8rem;font-weight:600;color:var(--staus-muted);margin-bottom:6px}
.poll-progress-barra{height:6px;background:var(--staus-line);border-radius:50rem;overflow:hidden}
.poll-progress-relleno{height:100%;background:var(--staus-red);border-radius:50rem;transition:width .3s ease}

/* Reactivo de encuesta: enunciado, obligatorio, y el campo "otro" que solo
   aparece cuando se elige esa opción. */
.poll-item{margin-bottom:6px}
.poll-item+.poll-item{border-top:1px solid var(--staus-line);padding-top:18px;margin-top:18px}
.poll-item-name{font-weight:600;color:var(--staus-ink);display:block;margin-bottom:12px;line-height:1.35}
.poll-item-req{color:var(--staus-red);font-weight:700}
.poll-item-desc{font-size:.85rem;color:var(--staus-muted);font-weight:400;margin-top:2px}
.poll-other{display:none;margin-top:-4px;margin-bottom:10px}
.poll-item:has(input[value="OTHER"]:checked) .poll-other{display:block}
/* En celular, el botón de emitir voto queda siempre a la mano en consultas largas */
@media (max-width:575.98px){
  .ballot-cta{position:sticky;bottom:12px;z-index:3;box-shadow:0 10px 24px -8px rgba(176,22,28,.55)}
}

/* ---------- Ayuda de contraseña (requisitos + fuerza) ---------- */
/* Requiere /public/js/password-strength.js */
.pw-help{border:1px solid var(--staus-line);background:var(--staus-paper);border-radius:.7rem;padding:14px 16px;margin-bottom:16px}

.pw-bars{display:flex;gap:5px;margin-bottom:8px}
.pw-bars>span{height:6px;flex:1;border-radius:50rem;background:var(--staus-line-strong);transition:background-color .18s ease}
.pw-bars.is-0>span:nth-child(-n+1){background:var(--pw-weak)}
.pw-bars.is-1>span:nth-child(-n+2){background:var(--pw-weak)}
.pw-bars.is-2>span:nth-child(-n+3){background:var(--pw-fair)}
.pw-bars.is-3>span{background:var(--pw-good)}
.pw-bars.is-4>span{background:var(--pw-strong)}

.pw-level{margin:0;font-size:.8rem;color:var(--staus-muted)}
.pw-level strong{color:var(--staus-ink);font-weight:700}
.pw-help:has(.is-0) .pw-level strong,.pw-help:has(.is-1) .pw-level strong{color:var(--pw-weak)}
.pw-help:has(.is-2) .pw-level strong{color:#9A6400}
.pw-help:has(.is-3) .pw-level strong,.pw-help:has(.is-4) .pw-level strong{color:var(--pw-strong)}

.pw-rules{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
@media (min-width:768px){.pw-rules{grid-template-columns:1fr 1fr;column-gap:18px}}
.pw-rule{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--staus-muted);transition:color .15s ease}
.pw-rule .pw-ico{width:16px;height:16px;flex:none;color:var(--staus-faint)}
.pw-rule .pw-ico svg{width:16px;height:16px;display:block}
.pw-rule.is-ok{color:var(--staus-ink)}
.pw-rule.is-ok .pw-ico{color:var(--pw-strong)}

.pw-tip{margin:10px 0 0;font-size:.78rem;color:var(--staus-muted);font-style:italic}
.pw-tip:empty{display:none}

/* Botón mostrar/ocultar dentro del campo */
.pw-has-toggle{position:relative}
.pw-has-toggle .form-control{padding-right:3rem}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);z-index:5;
  width:36px;height:36px;display:grid;place-items:center;padding:0;
  border:0;background:transparent;color:var(--staus-faint);border-radius:8px;cursor:pointer}
.pw-toggle svg{width:20px;height:20px;display:block}
.pw-toggle:hover{color:var(--staus-ink);background:rgba(23,26,31,.05)}
.pw-toggle.is-on{color:var(--staus-red)}

@media (prefers-reduced-motion:reduce){
  .pw-bars>span,.pw-rule,.pw-rule .pw-ico{transition:none}
}