/* =========================================================
   LATIDO SOLIDARIO — MODO OSCURO OPCIONAL
   Cargar al final de las hojas de estilo.
   ========================================================= */

.theme-toggle-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:25;
  min-height:44px;
  padding:9px 14px 9px 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(21,88,166,.18);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#0c2b52;
  box-shadow:0 12px 34px rgba(7,29,60,.16);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font:700 13px/1 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.theme-toggle-btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(7,29,60,.22)}
.theme-toggle-btn:active{transform:translateY(0)}
.theme-toggle-btn:focus-visible{outline:3px solid rgba(44,125,211,.28);outline-offset:3px}
.theme-toggle-icon{font-size:18px;line-height:1}

html.theme-changing *,html.theme-changing *::before,html.theme-changing *::after{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,fill .22s ease!important;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ls-navy-950:#030912;
  --ls-navy-900:#071425;
  --ls-navy-850:#0a1b31;
  --ls-navy-800:#102946;
  --ls-blue-700:#5ca8f2;
  --ls-blue-600:#70b7ff;
  --ls-blue-500:#87c4ff;
  --ls-red-700:#ff7785;
  --ls-red-600:#ff6272;
  --ls-red-500:#ff7a88;
  --ls-ink:#edf4ff;
  --ls-ink-soft:#c9d6e8;
  --ls-muted:#92a5bd;
  --ls-line:#27394e;
  --ls-line-strong:#354b64;
  --ls-bg:#07111f;
  --ls-bg-warm:#091524;
  --ls-card:rgba(13,28,47,.96);
  --ls-white:#102039;
  --ls-green:#56d5a4;
  --ls-green-bg:#0d3027;
  --ls-amber:#ffd06b;
  --ls-amber-bg:#35290c;
  --ls-red-bg:#38151b;
  --ls-blue-bg:#102b49;
  --ls-gray-bg:#142234;
  --ls-shadow-sm:0 4px 16px rgba(0,0,0,.24);
  --ls-shadow:0 16px 46px rgba(0,0,0,.32);
  --ls-shadow-lg:0 28px 76px rgba(0,0,0,.42);
  background:#07111f;
}

html[data-theme="dark"] body{
  color:var(--ls-ink)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(44,125,211,.12),transparent 30%),
    radial-gradient(circle at 92% 12%,rgba(217,45,63,.08),transparent 26%),
    #07111f!important;
}
html[data-theme="dark"] main,
html[data-theme="dark"] .users-page,
html[data-theme="dark"] .volunteer-portal-page,
html[data-theme="dark"] .auth-page{
  background-color:transparent!important;
  color:var(--ls-ink)!important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] strong,
html[data-theme="dark"] b{color:var(--ls-ink)}
html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted{color:var(--ls-muted)!important}
html[data-theme="dark"] label{color:var(--ls-ink-soft)!important}

/* Superficies principales */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .users-toolbar,
html[data-theme="dark"] .vol-portal-header,
html[data-theme="dark"] .notifications-toolbar,
html[data-theme="dark"] .profile-toolbar{
  background:rgba(8,19,34,.88)!important;
  border-color:var(--ls-line)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .stats article,
html[data-theme="dark"] .master-stats article,
html[data-theme="dark"] .portal-kpis article,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .personal-id-card,
html[data-theme="dark"] .vol-welcome-card,
html[data-theme="dark"] .week-summary-card,
html[data-theme="dark"] .week-day-card,
html[data-theme="dark"] .week-shift-card,
html[data-theme="dark"] .weekly-index-card,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .notification-center-card,
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .profile-subbox,
html[data-theme="dark"] .portal-response,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .confirm-box{
  background:var(--ls-card)!important;
  color:var(--ls-ink)!important;
  border-color:var(--ls-line)!important;
  box-shadow:var(--ls-shadow)!important;
}

/* Formularios */
html[data-theme="dark"] .input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0b1a2c!important;
  color:var(--ls-ink)!important;
  border-color:var(--ls-line-strong)!important;
}
html[data-theme="dark"] .input:hover,
html[data-theme="dark"] input:hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] textarea:hover{border-color:#496582!important}
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  background:#0d2036!important;
  border-color:#5ca8f2!important;
  box-shadow:0 0 0 4px rgba(92,168,242,.13)!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#6f849e!important}
html[data-theme="dark"] option{background:#0b1a2c;color:#edf4ff}

/* Botones */
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .btn.white{
  background:#13253b!important;
  color:#eaf3ff!important;
  border-color:#304760!important;
  box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] .btn.white:hover{background:#18304d!important;border-color:#486886!important}
html[data-theme="dark"] .btn.ghost{
  background:rgba(20,38,61,.72)!important;
  color:#cbd8e9!important;
  border-color:#304760!important;
}
html[data-theme="dark"] .btn.ghost:hover{background:#182e49!important;color:#fff!important}
html[data-theme="dark"] .small-btn,
html[data-theme="dark"] .link{background:#102b49!important;color:#8bc7ff!important;border-color:#244c70!important}
html[data-theme="dark"] .icon-btn{background:#12233a!important;color:#d6e3f3!important}

/* Tablas */
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] table{background:transparent!important}
html[data-theme="dark"] thead th,
html[data-theme="dark"] table th{
  background:#0b1b2e!important;
  color:#bcd0e7!important;
  border-color:var(--ls-line)!important;
}
html[data-theme="dark"] tbody td,
html[data-theme="dark"] table td{border-color:#24364b!important;color:#dfe9f6!important}
html[data-theme="dark"] tbody tr:hover td{background:rgba(40,79,119,.16)!important}

/* Filas, tarjetas internas y listas */
html[data-theme="dark"] .history-row,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .review-name,
html[data-theme="dark"] .elig-row,
html[data-theme="dark"] .portal-service,
html[data-theme="dark"] .portal-notice,
html[data-theme="dark"] .portal-my-report,
html[data-theme="dark"] .staff-report-card,
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .notice-item,
html[data-theme="dark"] .service-request-card,
html[data-theme="dark"] .excuse-card,
html[data-theme="dark"] .appeal-card,
html[data-theme="dark"] .mini-person,
html[data-theme="dark"] .detail-grid>div,
html[data-theme="dark"] .rule-box>div,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .profile-stat{
  background:#0d1d31!important;
  border-color:#293d54!important;
  color:var(--ls-ink)!important;
}
html[data-theme="dark"] .empty,
html[data-theme="dark"] .portal-empty-good,
html[data-theme="dark"] .info-banner,
html[data-theme="dark"] .role-help,
html[data-theme="dark"] .legacy-box{
  background:#0c1b2d!important;
  border-color:#2b4058!important;
  color:#b8c8db!important;
}

/* Segmentos, filtros y selectores */
html[data-theme="dark"] .segment,
html[data-theme="dark"] .choice-cards,
html[data-theme="dark"] .week-buttons,
html[data-theme="dark"] .account-type-grid{
  border-color:var(--ls-line)!important;
}
html[data-theme="dark"] .segment button,
html[data-theme="dark"] .choice-cards button,
html[data-theme="dark"] .week-buttons button,
html[data-theme="dark"] .account-type-card{
  background:#0d1d31!important;
  color:#dce8f6!important;
  border-color:#2a3f57!important;
}
html[data-theme="dark"] .segment button.active,
html[data-theme="dark"] .choice-cards button.active,
html[data-theme="dark"] .week-buttons button.active,
html[data-theme="dark"] .account-type-card.active{
  background:#113456!important;
  border-color:#4b91cf!important;
  color:#fff!important;
}

/* Modales y overlays */
html[data-theme="dark"] .modal{background:rgba(1,7,15,.72)!important}
html[data-theme="dark"] hr,
html[data-theme="dark"] .soft-hr{border-color:#2a3b50!important}

/* Notificaciones */
html[data-theme="dark"] .notifications-popover,
html[data-theme="dark"] .notification-popover,
html[data-theme="dark"] .notifications-dropdown{
  background:#0b1b2d!important;
  border-color:#2d435c!important;
  color:#eef5ff!important;
  box-shadow:0 24px 64px rgba(0,0,0,.48)!important;
}
html[data-theme="dark"] .notification-row,
html[data-theme="dark"] .notification-mini-item{
  background:#0d1d31!important;
  border-color:#273b52!important;
}
html[data-theme="dark"] .notification-row.unread,
html[data-theme="dark"] .notification-mini-item.unread{background:#102b48!important}

/* Semana de servicio */
html[data-theme="dark"] .week-toolbar,
html[data-theme="dark"] .week-selector,
html[data-theme="dark"] .week-day-head,
html[data-theme="dark"] .shift-head,
html[data-theme="dark"] .roster-person,
html[data-theme="dark"] .weekly-indices,
html[data-theme="dark"] .weekly-index-table{
  background:#0d1d31!important;
  border-color:#2b4058!important;
  color:#e7f0fb!important;
}
html[data-theme="dark"] .roster-person:hover{background:#112842!important}
html[data-theme="dark"] .roster-slot-number{background:#173c62!important;color:#dceeff!important}

/* Portal */
html[data-theme="dark"] .vol-welcome-card{
  background:linear-gradient(135deg,#0c2a4c,#103e6c)!important;
  border-color:#1d507e!important;
}
html[data-theme="dark"] .vol-welcome-card h1,
html[data-theme="dark"] .vol-welcome-card p,
html[data-theme="dark"] .vol-welcome-card small{color:#fff!important}

/* Login */
html[data-theme="dark"] .auth-brand-panel{
  background:linear-gradient(155deg,#041228,#0a315a 70%,#0d4677)!important;
}
html[data-theme="dark"] .auth-shell{box-shadow:0 30px 80px rgba(0,0,0,.40)!important}
html[data-theme="dark"] .auth-error{background:#38151b!important;color:#ff9aa5!important;border-color:#6b2932!important}

/* Badges */
html[data-theme="dark"] .badge.gray{background:#1b2a3d!important;color:#aebed0!important}
html[data-theme="dark"] .badge.blue{background:#102f50!important;color:#92caff!important}
html[data-theme="dark"] .badge.green{background:#0c3227!important;color:#74deb5!important}
html[data-theme="dark"] .badge.amber{background:#382a0a!important;color:#ffd57c!important}
html[data-theme="dark"] .badge.red{background:#3a171d!important;color:#ff8e9a!important}

/* Botón flotante */
html[data-theme="dark"] .theme-toggle-btn{
  background:rgba(12,29,49,.95);
  color:#eef6ff;
  border-color:#365474;
  box-shadow:0 14px 38px rgba(0,0,0,.42);
}
html[data-theme="dark"] .theme-toggle-btn:hover{background:#122b47;border-color:#4f779e}

/* Scrollbars discretas */
html[data-theme="dark"] *{scrollbar-color:#36506d #0a1727}
html[data-theme="dark"] *::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] *::-webkit-scrollbar-track{background:#0a1727}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#36506d;border-radius:999px;border:2px solid #0a1727}

@media(max-width:700px){
  .theme-toggle-btn{right:12px;bottom:12px;padding:10px;width:46px;height:46px}
  .theme-toggle-label{display:none}
}

/* =========================================================
   CONTRASTE OSCURO V2 — módulos operativos
   Corrige superficies claras residuales de tablas, semanas,
   excusas, disponibilidad y notificaciones.
   ========================================================= */

html[data-theme="dark"]{
  --dm-surface-0:#07111f;
  --dm-surface-1:#0b1727;
  --dm-surface-2:#0f2034;
  --dm-surface-3:#14283f;
  --dm-surface-4:#19314b;
  --dm-border:#29425e;
  --dm-border-soft:#21364d;
  --dm-text:#edf5ff;
  --dm-text-2:#cbd9e9;
  --dm-text-3:#93a8c0;
  --dm-blue:#72b9ff;
  --dm-blue-strong:#3d9cec;
  --dm-green:#5ed3a5;
  --dm-yellow:#ffd36c;
  --dm-red:#ff7c88;
}

/* Evita texto blanco heredado sobre restos de fondos claros */
html[data-theme="dark"] .users-wrap,
html[data-theme="dark"] .weekly-services-wrap,
html[data-theme="dark"] .notifications-wrap,
html[data-theme="dark"] .excuse-wrap{
  color:var(--dm-text)!important;
}

/* =========================
   TABLA MADRE + VOLUNTARIOS
   ========================= */
html[data-theme="dark"] .master-table,
html[data-theme="dark"] .users-table,
html[data-theme="dark"] #view-volunteers table,
html[data-theme="dark"] #view-master table{
  background:var(--dm-surface-1)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .master-table tbody tr,
html[data-theme="dark"] .users-table tbody tr,
html[data-theme="dark"] #volunteerTable tr,
html[data-theme="dark"] #masterTable tr{
  background:var(--dm-surface-2)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .master-table tbody tr:nth-child(even),
html[data-theme="dark"] .users-table tbody tr:nth-child(even),
html[data-theme="dark"] #volunteerTable tr:nth-child(even),
html[data-theme="dark"] #masterTable tr:nth-child(even){
  background:#0d1c2f!important;
}
html[data-theme="dark"] .master-table tbody tr:hover,
html[data-theme="dark"] .users-table tbody tr:hover,
html[data-theme="dark"] #volunteerTable tr:hover,
html[data-theme="dark"] #masterTable tr:hover{
  background:#17314c!important;
}
html[data-theme="dark"] .master-table td,
html[data-theme="dark"] .users-table td,
html[data-theme="dark"] #volunteerTable td,
html[data-theme="dark"] #masterTable td{
  background:transparent!important;
  color:var(--dm-text-2)!important;
  border-color:var(--dm-border-soft)!important;
}
html[data-theme="dark"] .master-table td b,
html[data-theme="dark"] .users-table td b,
html[data-theme="dark"] #volunteerTable td b,
html[data-theme="dark"] #masterTable td b,
html[data-theme="dark"] .vol-name b{
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .master-table td small,
html[data-theme="dark"] .users-table td small,
html[data-theme="dark"] #volunteerTable td small,
html[data-theme="dark"] #masterTable td small,
html[data-theme="dark"] .vol-name small{
  color:var(--dm-text-3)!important;
}
html[data-theme="dark"] .table-wrap{
  background:var(--dm-surface-1)!important;
  border-color:var(--dm-border)!important;
}

/* =========================
   DISPONIBILIDAD / COLORES
   ========================= */
html[data-theme="dark"] .availability-color-legend>div,
html[data-theme="dark"] .availability-status-row{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .availability-color-legend small,
html[data-theme="dark"] .availability-status-row small{
  color:var(--dm-text-3)!important;
}
html[data-theme="dark"] .color-swatch.no-color{
  background:#d8e1ec!important;
  border-color:#70839a!important;
}
html[data-theme="dark"] .badge.berry{
  background:rgba(180,57,35,.22)!important;
  color:#ff9c84!important;
  border-color:rgba(255,124,96,.34)!important;
}
html[data-theme="dark"] .badge.pause{
  background:rgba(255,70,80,.18)!important;
  color:#ff8d94!important;
  border-color:rgba(255,90,100,.32)!important;
}

/* =========================
   SEMANAS DE SERVICIO
   ========================= */
html[data-theme="dark"] .weekly-selector-card,
html[data-theme="dark"] .weekly-self-status,
html[data-theme="dark"] .week-board{
  background:var(--dm-surface-1)!important;
  border-color:var(--dm-border)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.32)!important;
}
html[data-theme="dark"] .weekly-hero-rule{
  background:#102843!important;
  color:var(--dm-text)!important;
  border:1px solid #31516f!important;
}
html[data-theme="dark"] .weekly-hero-rule strong{color:#fff!important}
html[data-theme="dark"] .weekly-hero-rule span{color:#b7c8da!important}
html[data-theme="dark"] .weekly-view-summary>div{
  background:var(--dm-surface-2)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .weekly-view-summary strong{color:#eaf4ff!important}
html[data-theme="dark"] .weekly-view-summary span{color:#9fb2c7!important}
html[data-theme="dark"] .weekly-self-status.good{
  background:#0d2c27!important;
  border-color:#245a49!important;
}
html[data-theme="dark"] .weekly-self-status.blocked{
  background:#32181d!important;
  border-color:#64323a!important;
}
html[data-theme="dark"] .weekly-self-icon{background:#0b1829!important}

html[data-theme="dark"] .week-board-head{
  background:linear-gradient(180deg,#102138,#0c1a2c)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .week-board-head h2{color:var(--dm-text)!important}
html[data-theme="dark"] .week-board-head p{color:var(--dm-text-3)!important}
html[data-theme="dark"] .current-week-pill{
  background:#12375a!important;
  color:#8ccaff!important;
}
html[data-theme="dark"] .week-days-list{background:var(--dm-surface-1)!important}
html[data-theme="dark"] .week-day-row,
html[data-theme="dark"] .week-day-row.past{
  background:#0d1b2d!important;
  border-color:var(--dm-border)!important;
  opacity:1!important;
}
html[data-theme="dark"] .week-day-row.past{background:#0a1727!important}
html[data-theme="dark"] .week-day-side{border-color:var(--dm-border)!important}
html[data-theme="dark"] .week-day-name{color:#79bfff!important}
html[data-theme="dark"] .week-day-side strong{color:var(--dm-text)!important}
html[data-theme="dark"] .week-day-side small{color:var(--dm-text-3)!important}

html[data-theme="dark"] .week-shift-card{
  background:#142338!important;
  border-color:#385169!important;
}
html[data-theme="dark"] .week-shift-title b{color:#eef6ff!important}
html[data-theme="dark"] .capacity-track{background:#23364a!important}
html[data-theme="dark"] .week-capacity{
  background:#173d60!important;
  color:#a4d5ff!important;
}
html[data-theme="dark"] .week-capacity.near{
  background:#44340f!important;
  color:#ffd97c!important;
}
html[data-theme="dark"] .week-capacity.full,
html[data-theme="dark"] .week-capacity.over{
  background:#431b22!important;
  color:#ff9ba4!important;
}
html[data-theme="dark"] .week-person{
  background:#0e1c2d!important;
  border-color:#2d4258!important;
}
html[data-theme="dark"] .week-person:hover{background:#13273d!important}
html[data-theme="dark"] .week-person.is-me{
  background:#123657!important;
  border-color:#448bc2!important;
}
html[data-theme="dark"] .week-person.shift-leader{
  background:linear-gradient(135deg,#12385a,#10243a)!important;
  border-color:#377bad!important;
  box-shadow:inset 3px 0 0 #56adf0!important;
}
html[data-theme="dark"] .week-person.shift-leader .week-person-info>b,
html[data-theme="dark"] .week-person-info>b{color:#eef6ff!important}
html[data-theme="dark"] .week-person-info small{color:#91a6bd!important}
html[data-theme="dark"] .week-person-avatar,
html[data-theme="dark"] .week-person-number{
  background:#1e4e79!important;
  color:#fff!important;
}
html[data-theme="dark"] .week-person.shift-leader .week-person-number{
  background:#267fc0!important;
  color:#fff!important;
}
html[data-theme="dark"] .week-empty-shift{color:#8499b0!important}
html[data-theme="dark"] .week-empty-shift b{color:#bfd0e2!important}
html[data-theme="dark"] .week-shift-footer{
  background:#0d1a2a!important;
  border-color:#2b4055!important;
}
html[data-theme="dark"] .week-shift-footer>span{color:#95a8bc!important}
html[data-theme="dark"] .week-admin-btn.add{
  background:#153855!important;
  color:#9cd3ff!important;
}
html[data-theme="dark"] .week-admin-btn.remove,
html[data-theme="dark"] .week-remove-person{
  background:#3b1a20!important;
  color:#ff9da5!important;
}
html[data-theme="dark"] .week-admin-btn.restore{
  background:#12372c!important;
  color:#78ddb3!important;
}
html[data-theme="dark"] .week-shift-card.removed{
  background:#101c2b!important;
  border-color:#3b4f63!important;
}
html[data-theme="dark"] .week-removed-body,
html[data-theme="dark"] .week-removed-body b{color:#a8b8c8!important}

/* Asistencia dentro de la semana */
html[data-theme="dark"] .week-attendance-select.pending{
  background:#26384a!important;
  color:#d1dce8!important;
  border-color:#43586d!important;
}
html[data-theme="dark"] .week-attendance-select.present{
  background:#12372c!important;
  color:#72dfb1!important;
  border-color:#2b664f!important;
}
html[data-theme="dark"] .week-attendance-select.absent{
  background:#3b1a20!important;
  color:#ff9ca4!important;
  border-color:#6d343c!important;
}
html[data-theme="dark"] .week-attendance-select.excused{
  background:#3f310f!important;
  color:#ffd67a!important;
  border-color:#6d5620!important;
}

/* Índices de la semana */
html[data-theme="dark"] .weekly-metrics{
  background:linear-gradient(180deg,#0d1c2f,#0a1728)!important;
  border-color:var(--dm-border)!important;
}
html[data-theme="dark"] .weekly-metrics-head h3{color:var(--dm-text)!important}
html[data-theme="dark"] .metrics-pending{
  background:#42330e!important;
  color:#ffd66f!important;
}
html[data-theme="dark"] .metrics-table{
  background:#0b1828!important;
  border-color:#385069!important;
}
html[data-theme="dark"] .metric-row:not(:last-child){border-color:#2d4258!important}
html[data-theme="dark"] .metric-name{
  background:#26394c!important;
  color:#eaf3fb!important;
  border-color:#3c5268!important;
}
html[data-theme="dark"] .metric-value{
  background:#102033!important;
  color:#ffffff!important;
  border-color:#31465b!important;
}
html[data-theme="dark"] .metric-note{
  background:#0c1a2b!important;
  color:#96aabe!important;
  border-color:#31465b!important;
}

/* Selector administrativo de voluntarios */
html[data-theme="dark"] .weekly-volunteer-modal-box{background:#0d1c2f!important}
html[data-theme="dark"] .weekly-vol-choice{
  background:#102136!important;
  border-color:#2f465e!important;
}
html[data-theme="dark"] .weekly-vol-choice:hover{
  background:#173550!important;
  border-color:#5b9bc8!important;
}
html[data-theme="dark"] .weekly-vol-choice b{color:#f1f7ff!important}
html[data-theme="dark"] .weekly-vol-choice small{color:#9aacc0!important}

/* =========================
   EXCUSAS
   ========================= */
html[data-theme="dark"] .excuse-kpis article{
  background:#102033!important;
  border-color:#2d4259!important;
  box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] .excuse-kpis small{color:#90a8c1!important}
html[data-theme="dark"] .excuse-kpis b{color:#f2f7ff!important}
html[data-theme="dark"] .excuse-kpis span{color:#a5b6c9!important}
html[data-theme="dark"] .excuse-service-meta span,
html[data-theme="dark"] .excuse-service-meta b{
  background:#14263a!important;
  border-color:#30465c!important;
  color:#d9e5f2!important;
}
html[data-theme="dark"] .excuse-card-state{color:#93a6ba!important}
html[data-theme="dark"] .excuse-description{
  background:#0e1c2d!important;
  border-color:#2b4056!important;
}
html[data-theme="dark"] .excuse-description small{color:#8ea4bb!important}
html[data-theme="dark"] .excuse-description p{color:#d9e5f2!important}
html[data-theme="dark"] .excuse-privacy-note{
  background:#0d1c2d!important;
  border-color:#2d4258!important;
  color:#a9bbcd!important;
}
html[data-theme="dark"] .excuse-deadline-note,
html[data-theme="dark"] .excuse-review-message{
  background:#34280e!important;
  border-color:#665221!important;
  color:#f2d888!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .excuse-review-message h3{color:#ffe29a!important}
html[data-theme="dark"] .excuse-review-message p{color:#d9c997!important}
html[data-theme="dark"] .excuse-appeal-box,
html[data-theme="dark"] .excuse-appeal-box.existing,
html[data-theme="dark"] .staff-appeal-panel{
  background:#102237!important;
  border-color:#304a64!important;
}
html[data-theme="dark"] .excuse-appeal-title b,
html[data-theme="dark"] .appeal-panel-head h4{color:#edf5ff!important}
html[data-theme="dark"] .excuse-appeal-title small,
html[data-theme="dark"] .appeal-panel-head small{color:#94a9bf!important}
html[data-theme="dark"] .appeal-body{
  background:#0b1828!important;
  border-color:#2d4258!important;
  color:#d6e2ee!important;
}
html[data-theme="dark"] .field-help{color:#8fa4ba!important}

/* =========================
   NOTIFICACIONES
   ========================= */
html[data-theme="dark"] .notifications-page{
  --notif-bg:#07111f;
  --notif-text:#eaf3ff;
  --notif-muted:#9eb0c3;
  --notif-border:#294058;
  background:#07111f!important;
}
html[data-theme="dark"] .notifications-summary article{
  background:#102033!important;
  border-color:#2c435b!important;
  box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] .notifications-summary small{color:#91a8c0!important}
html[data-theme="dark"] .notifications-summary b{color:#f2f7ff!important}
html[data-theme="dark"] .notification-card{
  background:#0f1f32!important;
  border-color:#2c4359!important;
  box-shadow:0 8px 26px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .notification-card.unread{
  background:linear-gradient(90deg,#123454,#0f1f32 28%)!important;
  border-left-color:#5bb0f0!important;
}
html[data-theme="dark"] .notification-card-icon,
html[data-theme="dark"] .notification-preview-icon{
  background:#173a59!important;
  color:#d9ecff!important;
}
html[data-theme="dark"] .notification-card h3{color:#edf5ff!important}
html[data-theme="dark"] .notification-card p{color:#b5c5d5!important}
html[data-theme="dark"] .notification-meta{color:#8298af!important}
html[data-theme="dark"] .notification-panel{
  background:#0c192a!important;
  border-color:#2e465f!important;
}
html[data-theme="dark"] .notification-panel-head{
  background:linear-gradient(135deg,#102239,#0c1929)!important;
  border-color:#2e465f!important;
}
html[data-theme="dark"] .notification-panel-head b{color:#eef6ff!important}
html[data-theme="dark"] .notification-preview-item,
html[data-theme="dark"] .notification-preview-item.unread{
  background:#0d1c2e!important;
  color:#e8f1fb!important;
  border-color:#23394f!important;
}
html[data-theme="dark"] .notification-preview-item.unread{background:#112a43!important}
html[data-theme="dark"] .notification-preview-item:hover{background:#173650!important}
html[data-theme="dark"] .notification-preview-main p{color:#aebfd0!important}
html[data-theme="dark"] .notification-preview-main small{color:#8095ab!important}
html[data-theme="dark"] .notification-panel-foot{
  background:#0a1727!important;
  border-color:#273e56!important;
}
html[data-theme="dark"] .notification-empty{color:#9bb0c5!important}
html[data-theme="dark"] .notification-panel-head .notification-clear-all{
  background:#39191f!important;
  color:#ff9ca5!important;
  border-color:#63313a!important;
}
html[data-theme="dark"] .notifications-actions #clearNotificationsBtn{
  background:#25161c!important;
  color:#ff9ba5!important;
  border-color:#593039!important;
}

/* =========================
   CARDS / FILTROS GENERALES
   ========================= */
html[data-theme="dark"] .card,
html[data-theme="dark"] .generator-config,
html[data-theme="dark"] .master-import-card,
html[data-theme="dark"] .cohort-card,
html[data-theme="dark"] .excuse-filter-card{
  background:#0e1d30!important;
  border-color:#2b4158!important;
}
html[data-theme="dark"] .stats article,
html[data-theme="dark"] .master-stats article,
html[data-theme="dark"] .portal-kpis article,
html[data-theme="dark"] .profile-stat,
html[data-theme="dark"] .kpi{
  background:linear-gradient(180deg,#112338,#0d1b2d)!important;
  border-color:#2e455d!important;
}
html[data-theme="dark"] .stats b,
html[data-theme="dark"] .master-stats b,
html[data-theme="dark"] .portal-kpis b,
html[data-theme="dark"] .profile-stat b,
html[data-theme="dark"] .kpi b{color:#f2f7ff!important}
html[data-theme="dark"] .stats small,
html[data-theme="dark"] .master-stats small,
html[data-theme="dark"] .portal-kpis small,
html[data-theme="dark"] .profile-stat small,
html[data-theme="dark"] .kpi small{color:#91a8bf!important}
html[data-theme="dark"] .stats span,
html[data-theme="dark"] .master-stats span{color:#879cb2!important}

/* Pequeños bloques que todavía arrastraban blanco del tema claro */
html[data-theme="dark"] .profile-readonly-grid>div,
html[data-theme="dark"] .detail-grid>div,
html[data-theme="dark"] .rule-box>div,
html[data-theme="dark"] .review-name,
html[data-theme="dark"] .history-row,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .mini-person,
html[data-theme="dark"] .schedule-day,
html[data-theme="dark"] .schedule-group,
html[data-theme="dark"] .confirm-detail{
  background:#102033!important;
  border-color:#2b4259!important;
  color:#dfeaf5!important;
}

/* Scrollbars discretas en modo oscuro */
html[data-theme="dark"] *{
  scrollbar-color:#38536e #0a1726;
}
html[data-theme="dark"] *::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] *::-webkit-scrollbar-track{background:#0a1726}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#38536e;border-radius:999px;border:2px solid #0a1726}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:#4d6c8a}

/* =========================================================
   PIE DE PÁGINA INSTITUCIONAL GLOBAL
   ========================================================= */
.latido-site-footer{
  width:100%;
  box-sizing:border-box;
  margin-top:38px;
  padding:0 22px 26px;
  color:#60708a;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.latido-site-footer__inner{
  width:100%;
  box-sizing:border-box;
  min-height:74px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 22px;
  border-top:1px solid rgba(15,72,135,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(247,250,254,.74));
  border-radius:0 0 18px 18px;
}
.latido-site-footer__rights,
.latido-site-footer__credits{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  font-size:12.5px;
  line-height:1.55;
  letter-spacing:.01em;
}
.latido-site-footer__rights strong,
.latido-site-footer__credits strong{
  color:#17375f;
  font-weight:800;
}
.latido-site-footer__mark{
  font-weight:800;
  color:#1768b0;
}
.latido-site-footer__separator{
  color:#9cadc0;
  font-weight:800;
}
.latido-site-footer__credits{
  justify-content:flex-end;
  text-align:right;
}
.latido-site-footer__credits span{
  color:#8391a6;
  font-weight:650;
}

/* Login: el pie queda debajo de la tarjeta y no dentro de ella. */
body.auth-page > .latido-site-footer{
  max-width:1180px;
  margin:22px auto 0;
  padding-bottom:24px;
}

/* Mantiene el pie alineado con el contenido cuando el menú lateral cambia de ancho. */
.app > main > .latido-site-footer{
  margin-top:42px;
}

@media (max-width:760px){
  .latido-site-footer{
    margin-top:26px;
    padding:0 12px 18px;
  }
  .latido-site-footer__inner{
    padding:17px 15px;
    align-items:flex-start;
    border-radius:14px;
  }
  .latido-site-footer__rights,
  .latido-site-footer__credits{
    width:100%;
    justify-content:center;
    text-align:center;
    font-size:12px;
  }
}

html[data-theme="dark"] .latido-site-footer{
  color:#8fa4bd;
}
html[data-theme="dark"] .latido-site-footer__inner{
  border-top-color:#2a4059;
  background:linear-gradient(180deg,rgba(15,31,51,.36),rgba(8,21,37,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .latido-site-footer__rights strong,
html[data-theme="dark"] .latido-site-footer__credits strong{
  color:#dceaff!important;
}
html[data-theme="dark"] .latido-site-footer__mark{
  color:#70b7ff;
}
html[data-theme="dark"] .latido-site-footer__separator{
  color:#526a84;
}
html[data-theme="dark"] .latido-site-footer__credits span{
  color:#8fa4bd;
}

/* =========================================================
   GENERAR LISTA — CONTRASTE COMPLETO EN MODO OSCURO
   2026-08-10
   ========================================================= */
html[data-theme="dark"] #view-generator .checks label{
  background:#102238!important;
  border-color:#35506b!important;
  color:#e8f2ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] #view-generator .checks label:hover{
  background:#142a43!important;
  border-color:#4b6c8e!important;
}
html[data-theme="dark"] #view-generator .checks input{
  accent-color:#ff5e6d!important;
}

/* Barra superior de la lista generada (semana + exportaciones). */
html[data-theme="dark"] #generatedSchedule .export-bar{
  background:linear-gradient(180deg,#12263d,#0e1f33)!important;
  border:1px solid #304a64!important;
  border-radius:14px!important;
  padding:13px 14px!important;
  color:#eef6ff!important;
}
html[data-theme="dark"] #generatedSchedule .export-bar b,
html[data-theme="dark"] #generatedSchedule .export-bar strong{
  color:#f4f8ff!important;
}
html[data-theme="dark"] #generatedSchedule .export-bar .muted,
html[data-theme="dark"] #generatedSchedule .export-bar small{
  color:#a9bdd2!important;
}

/* Días y turnos de la lista. */
html[data-theme="dark"] #generatedSchedule .schedule-day{
  background:#0c1b2d!important;
  border-color:#2e4862!important;
}
html[data-theme="dark"] #generatedSchedule .schedule-day>h4{
  background:linear-gradient(90deg,#0d4175,#1263a3)!important;
  color:#fff!important;
}
html[data-theme="dark"] #generatedSchedule .shift-row{
  background:#0d1d30!important;
  border-color:#2d465f!important;
}
html[data-theme="dark"] #generatedSchedule .shift-title{
  background:#142940!important;
  color:#f1f7ff!important;
  border:1px solid #35516c!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  min-height:40px!important;
  padding:9px 11px!important;
}
html[data-theme="dark"] #generatedSchedule .schedule-group{
  background:#102238!important;
  border-color:#304a64!important;
  color:#e6f0fb!important;
}
html[data-theme="dark"] #generatedSchedule .schedule-group h5,
html[data-theme="dark"] #generatedSchedule .schedule-group.old h5,
html[data-theme="dark"] #generatedSchedule .schedule-group.new h5{
  color:#8ec8ff!important;
}

/* Nombres asignados y vacantes: contraste legible sobre el fondo oscuro. */
html[data-theme="dark"] #generatedSchedule .person-chip{
  background:#183a5d!important;
  color:#edf7ff!important;
  border:1px solid #315d83!important;
}
html[data-theme="dark"] #generatedSchedule .person-chip.leader{
  background:#154a70!important;
  color:#fff!important;
  border-color:#5ca9e7!important;
  box-shadow:0 0 0 1px rgba(92,169,231,.12)!important;
}
html[data-theme="dark"] #generatedSchedule .person-chip.vacant{
  background:#3a2a12!important;
  color:#ffd58a!important;
  border-color:#6b4a18!important;
}

/* Editor manual: los cupos y sus turnos usan el mismo contraste. */
html[data-theme="dark"] #generatedSchedule .manual-slot-btn,
html[data-theme="dark"] #generatedSchedule .manual-slot,
html[data-theme="dark"] #generatedSchedule button.manual-slot-btn{
  background:#12283f!important;
  color:#eaf4ff!important;
  border-color:#35536f!important;
}

@media(max-width:760px){
  html[data-theme="dark"] #generatedSchedule .shift-title{
    border-radius:9px!important;
  }
}


/* =========================================================
   DISPONIBILIDAD DEL VOLUNTARIO — CONTRASTE EN MODO OSCURO
   2026-08-10
   ========================================================= */
html[data-theme="dark"] #volunteerModal .availability-heading{
  color:#eef6ff!important;
}
html[data-theme="dark"] #volunteerModal .availability-editor{
  background:#0c1d30!important;
  border-color:#38516b!important;
}
html[data-theme="dark"] #volunteerModal .avail-editor-row{
  border-color:#38516b!important;
  background:#0f2238!important;
}
html[data-theme="dark"] #volunteerModal .avail-editor-row>div{
  color:#dceaff!important;
}
html[data-theme="dark"] #volunteerModal .avail-editor-row>div:first-child{
  background:#173654!important;
  color:#f4f8ff!important;
  border-right:1px solid #38516b!important;
  text-shadow:none!important;
}
html[data-theme="dark"] #volunteerModal .avail-editor-row label{
  color:#e5effb!important;
}
html[data-theme="dark"] #volunteerModal .avail-editor-row input[type="checkbox"]{
  accent-color:#69b6ff!important;
}

/* =========================================================
   RESPONSIVE MÓVIL GLOBAL — LATIDO SOLIDARIO
   2026-08-10
   Optimización táctil para teléfonos y pantallas pequeñas.
   ========================================================= */
@media screen and (max-width:1024px){
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-padding-top:112px;
  }
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .app,
  .app.sidebar-collapsed{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }

  /* Navegación: barra superior táctil y desplazable. */
  .sidebar,
  .app.sidebar-collapsed .sidebar{
    position:sticky!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:8px 10px 9px!important;
    display:block!important;
    z-index:1000!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 8px 24px rgba(9,38,76,.10)!important;
    transform:none!important;
    overflow:visible!important;
  }
  .sidebar .brand,
  .app.sidebar-collapsed .brand{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    padding:0 48px 7px 2px!important;
    margin:0 0 7px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    border:0!important;
    border-bottom:1px solid rgba(120,146,178,.18)!important;
  }
  .sidebar .brand img,
  .app.sidebar-collapsed .brand img{
    width:38px!important;
    height:38px!important;
    max-height:38px!important;
    flex:0 0 38px!important;
    margin:0!important;
    object-fit:contain!important;
  }
  .sidebar .brand-copy,
  .app.sidebar-collapsed .brand-copy{
    display:block!important;
    width:auto!important;
    max-width:calc(100% - 50px)!important;
    min-width:0!important;
    height:auto!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    pointer-events:auto!important;
    transform:none!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:12px!important;
  }
  .sidebar .byline,
  .app.sidebar-collapsed .byline,
  .sidebar .local-note,
  .app.sidebar-collapsed .local-note{display:none!important}

  .sidebar nav,
  .app.sidebar-collapsed .sidebar nav{
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    gap:6px!important;
    margin:0!important;
    padding:0 2px 2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar nav::-webkit-scrollbar{display:none!important}
  .sidebar .nav,
  .app.sidebar-collapsed .sidebar .nav{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    min-height:42px!important;
    height:auto!important;
    padding:9px 11px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    border-radius:11px!important;
    font-size:11px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    scroll-snap-align:start;
  }
  .sidebar .nav span,
  .sidebar .nav .nav-icon,
  .app.sidebar-collapsed .sidebar .nav .nav-icon{
    width:auto!important;
    min-width:18px!important;
    max-width:none!important;
    height:auto!important;
    font-size:15px!important;
    flex:0 0 auto!important;
  }
  .sidebar .nav-label,
  .app.sidebar-collapsed .sidebar .nav-label{
    display:inline!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .sidebar-toggle{top:8px!important;right:9px!important;width:36px!important;height:36px!important}

  main,
  body.staff-sidebar-ready .staff-module-main{
    width:100%!important;
    min-width:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.staff-sidebar-ready .staff-module-main{padding-bottom:34px!important}

  .topbar,
  .users-toolbar,
  .critical-header,
  .critical-toolbar,
  .notifications-toolbar,
  .reports-toolbar,
  .profile-topbar,
  .weekly-main-toolbar{
    min-height:0!important;
    height:auto!important;
    padding-top:14px!important;
    padding-bottom:12px!important;
    align-items:flex-start!important;
    gap:10px!important;
    flex-wrap:wrap!important;
  }
  .topbar h1{font-size:23px!important;line-height:1.18!important}
  .overline{font-size:10px!important;letter-spacing:.11em!important}

  .hero,
  .weekly-hero,
  .reports-hero,
  .critical-hero,
  .profile-hero-card,
  .vol-welcome-card{
    border-radius:18px!important;
    padding:20px!important;
  }
  .hero h2{font-size:24px!important}

  .card,
  .portal-card,
  .report-control-card,
  .weekly-selector-card,
  .critical-toolbar-card,
  .user-form-card,
  .profile-card{
    padding:15px!important;
    border-radius:15px!important;
  }

  .section-head,
  .card-head,
  .modal-head,
  .cohort-title{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .section-head>div:first-child,
  .card-head>div:first-child{min-width:0!important;flex:1 1 220px!important}

  .header-actions,
  .actions,
  .report-control-actions,
  .notifications-actions,
  .historical-actions{
    gap:8px!important;
  }

  .btn,
  button,
  .nav,
  select,
  input[type="checkbox"],
  input[type="radio"]{
    touch-action:manipulation;
  }
  .btn{min-height:42px!important}
  .input,
  input,
  select,
  textarea{
    max-width:100%!important;
  }

  /* Grillas principales se adaptan sin comprimir el contenido. */
  .stats,
  .kpis,
  .portal-kpis,
  .critical-stats,
  .report-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .dashboard-grid,
  .grid-2,
  .attendance-panels,
  .eligibility-grid,
  .users-grid,
  .portal-grid,
  .profile-layout,
  .archive-import-grid,
  .report-control-grid,
  .monthly-control-fields,
  .critical-candidates{
    grid-template-columns:1fr!important;
  }
  .choice-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  .filters,
  .excuse-filters,
  .service-request-filters{
    width:100%!important;
    grid-template-columns:minmax(0,1fr) minmax(150px,.45fr)!important;
    gap:8px!important;
  }

  .segment,
  .critical-tabs,
  .report-mode-tabs{
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .segment::-webkit-scrollbar,
  .critical-tabs::-webkit-scrollbar,
  .report-mode-tabs::-webkit-scrollbar{display:none}

  /* Tablas: scroll horizontal contenido, nunca toda la página. */
  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--line);
    border-radius:12px;
  }
  .table-wrap table{margin:0!important}
  table{max-width:none!important}
  th,td{white-space:normal!important}

  /* Modales usables con teclado y pantallas pequeñas. */
  .modal,
  .weekly-volunteer-modal,
  .self-assign-confirm-modal,
  .report-excuse-modal{
    padding:10px!important;
    align-items:center!important;
  }
  .modal-box,
  .weekly-volunteer-modal-box,
  .self-assign-confirm-box,
  .report-excuse-modal-box,
  .critical-modal-box{
    width:min(100%,760px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:92dvh!important;
    overflow:auto!important;
    border-radius:18px!important;
    overscroll-behavior:contain;
  }

  /* Página de semanas. */
  .week-day-row{min-width:0!important}
  .week-person{min-width:0!important}
  .week-person-name{min-width:0!important;overflow-wrap:anywhere}
  .week-person-tools{max-width:100%!important}
  .weekly-selector-row{gap:10px!important}
  .weekly-selector-field{min-width:0!important;width:100%!important}
  .weekly-volunteer-choices{max-height:48dvh!important;overflow:auto!important}

  /* Reportes y páginas externas Staff. */
  .attendance-reports-wrap,
  .weekly-services-wrap,
  .critical-wrap,
  .notifications-wrap,
  .users-wrap,
  .excuse-wrap,
  .profile-wrap,
  .vol-portal-wrap{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Formularios y tarjetas de portal. */
  .personal-id-card,
  .critical-user-card{min-width:0!important;max-width:100%!important}
  .portal-textarea,textarea{resize:vertical!important}

  /* El toggle no debe tapar formularios inferiores. */
  .theme-toggle-btn{
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    z-index:25!important;
  }
}

@media screen and (max-width:760px){
  html{scroll-padding-top:100px}

  .sidebar,
  .app.sidebar-collapsed .sidebar{
    padding:7px 8px 8px!important;
  }
  .sidebar .brand,
  .app.sidebar-collapsed .brand{
    padding-bottom:6px!important;
    margin-bottom:6px!important;
  }
  .sidebar .brand img,
  .app.sidebar-collapsed .brand img{width:34px!important;height:34px!important;flex-basis:34px!important}
  .sidebar .nav,
  .app.sidebar-collapsed .sidebar .nav{min-height:40px!important;padding:8px 10px!important;font-size:10.5px!important}

  main,
  body.staff-sidebar-ready .staff-module-main{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .topbar{padding:12px 2px 10px!important}
  .topbar h1{font-size:21px!important}
  .hero,
  .weekly-hero,
  .reports-hero,
  .critical-hero,
  .profile-hero-card,
  .vol-welcome-card{padding:17px!important;border-radius:16px!important}
  .hero h2{font-size:21px!important}
  .hero p{font-size:13px!important;line-height:1.55!important}

  .card,
  .portal-card,
  .report-control-card,
  .weekly-selector-card,
  .critical-toolbar-card,
  .user-form-card,
  .profile-card{padding:13px!important}

  .dashboard-grid,
  .grid-2,
  .attendance-panels,
  .choice-cards,
  .quotas,
  .eligibility-grid,
  .profile-stats,
  .form-grid.two,
  .form-grid.three,
  .multi-role-grid,
  .critical-member,
  .self-confirm-service-grid,
  .reports-hero-formulas,
  .recurrence-grid,
  .historical-kpis,
  .monthly-excuse-row{
    grid-template-columns:1fr!important;
  }
  .span-2{grid-column:auto!important}

  .filters,
  .excuse-filters,
  .service-request-filters{
    grid-template-columns:1fr!important;
  }
  .filters .input,
  .filters select,
  .critical-search{width:100%!important;min-width:0!important}

  .section-head,
  .card-head,
  .modal-head,
  .cohort-title,
  .weekly-board-head,
  .weekly-metrics-head,
  .historical-card-head,
  .excuse-section-head{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .section-head .actions,
  .card-head .actions,
  .modal-head .actions,
  .weekly-board-head .actions{
    width:100%!important;
  }

  .header-actions,
  .actions,
  .report-control-actions,
  .notifications-actions,
  .historical-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .header-actions>.btn,
  .actions>.btn,
  .report-control-actions>.btn,
  .notifications-actions>.btn,
  .historical-actions>.btn{width:100%!important;min-width:0!important}

  /* iOS/Android: evita zoom automático al enfocar campos. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .input{font-size:16px!important}

  .table-wrap{
    margin-left:0!important;
    margin-right:0!important;
    border-radius:10px!important;
  }
  table{min-width:720px!important}
  th,td{padding:9px 8px!important;font-size:11.5px!important}
  th{font-size:9.5px!important}

  /* Disponibilidad semanal: cuatro columnas que sí caben. */
  .availability-editor{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .avail-editor-row{
    min-width:0!important;
    grid-template-columns:82px repeat(3,minmax(58px,1fr))!important;
    font-size:10.5px!important;
  }
  .avail-editor-row>div{min-width:0!important;padding:8px 4px!important;text-align:center!important}
  .avail-editor-row>div:first-child{text-align:left!important;padding-left:8px!important}

  .schedule-groups{grid-template-columns:1fr!important}
  .schedule-group+.schedule-group{border-left:0!important;border-top:1px solid var(--line)!important}
  .shift-title{font-size:12px!important}
  .person-chip{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}

  .week-admin-actions,
  .week-shift-footer,
  .weekly-selector-row,
  .critical-header,
  .critical-toolbar,
  .notifications-toolbar,
  .reports-toolbar,
  .profile-topbar{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .week-admin-btn,
  .week-pick-btn{width:100%!important}

  .latido-site-footer{padding-left:0!important;padding-right:0!important}
  .latido-site-footer__inner{border-radius:12px!important}
}

@media screen and (max-width:520px){
  main,
  body.staff-sidebar-ready .staff-module-main{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .sidebar .brand-copy,
  .app.sidebar-collapsed .brand-copy{font-size:11px!important}
  .sidebar .nav,
  .app.sidebar-collapsed .sidebar .nav{padding:8px 9px!important}

  .stats,
  .kpis,
  .portal-kpis,
  .critical-stats,
  .report-kpis{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  .stats article,.kpi{padding:11px!important}
  .stats b,.kpi b{font-size:21px!important}

  .header-actions,
  .actions,
  .report-control-actions,
  .notifications-actions,
  .historical-actions{
    grid-template-columns:1fr!important;
  }

  .btn{width:100%!important;justify-content:center!important;text-align:center!important}
  .segment button{min-height:38px!important;padding:7px 10px!important}

  .modal,
  .weekly-volunteer-modal,
  .self-assign-confirm-modal,
  .report-excuse-modal{padding:6px!important}
  .modal-box,
  .weekly-volunteer-modal-box,
  .self-assign-confirm-box,
  .report-excuse-modal-box,
  .critical-modal-box{
    max-width:calc(100vw - 12px)!important;
    max-height:94dvh!important;
    border-radius:15px!important;
  }

  .self-confirm-head{grid-template-columns:38px 1fr 30px!important;padding-left:12px!important;padding-right:12px!important}
  .self-confirm-service-grid{padding-left:12px!important;padding-right:12px!important}
  .self-confirm-person,.self-confirm-check{margin-left:12px!important;margin-right:12px!important}
  .self-confirm-notices{padding-left:12px!important;padding-right:12px!important}

  .theme-toggle-btn{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    padding:0!important;
    border-radius:50%!important;
  }
  .theme-toggle-btn .theme-toggle-label{display:none!important}

  /* Login y perfil ocupan el ancho útil sin pegarse al borde. */
  body.auth-page .auth-shell,
  body.auth-page .auth-card,
  .profile-account-card{max-width:100%!important}
}

@media screen and (max-width:380px){
  .stats,
  .kpis,
  .portal-kpis,
  .critical-stats,
  .report-kpis{grid-template-columns:1fr!important}
  .avail-editor-row{grid-template-columns:72px repeat(3,minmax(52px,1fr))!important}
  .sidebar .nav-label{display:none!important}
  .sidebar .nav,
  .app.sidebar-collapsed .sidebar .nav{min-width:42px!important;width:42px!important;padding:8px!important}
}

/* Modo oscuro: la barra móvil conserva el mismo lenguaje visual. */
@media screen and (max-width:1024px){
  html[data-theme="dark"] .sidebar,
  html[data-theme="dark"] .app.sidebar-collapsed .sidebar{
    border-bottom-color:#263d56!important;
    box-shadow:0 8px 26px rgba(0,0,0,.28)!important;
  }
  html[data-theme="dark"] .table-wrap{border-color:#304960!important}
}


/* =========================================================
   CONTROL DE TEMA — INTEGRACIÓN SIN SUPERPOSICIONES
   El botón se acopla a la cabecera cuando existe. Solo queda
   flotante como respaldo en vistas sin una barra de acciones.
   ========================================================= */
body .theme-toggle-btn.theme-toggle-inline{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  top:auto!important;
  left:auto!important;
  z-index:auto!important;
  flex:0 0 auto;
  margin:0!important;
}
body .theme-toggle-btn.theme-toggle-floating{
  z-index:25!important;
}
body .auth-card>.theme-toggle-btn.theme-toggle-inline{
  margin-top:14px!important;
}

/* En pantallas táctiles el control acoplado conserva un tamaño cómodo,
   pero nunca abandona el flujo para cubrir contenido. */
@media screen and (max-width:760px){
  body .theme-toggle-btn.theme-toggle-inline{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    padding:0!important;
  }
}