@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   VARIABLES — tema oscuro (default) / claro ([data-theme="light"])
   ══════════════════════════════════════════════════════════════════ */
:root {
    /* Fondos */
    --bg-deep:    #070b14;
    --bg:         #0d1117;
    --s1:         #161b27;
    --s2:         #1c2333;
    --s3:         #232d42;

    /* Bordes */
    --border:     rgba(255,255,255,.08);
    --border-h:   rgba(255,255,255,.16);

    /* Texto */
    --text:       #e6edf3;
    --muted:      #9aa4b2;
    --subtle:     #6c7683;

    /* Acento */
    --indigo:     #2f81f7;
    --indigo-d:   #1f6feb;
    --indigo-l:   #58a6ff;

    /* Estados */
    --green:      #3fb950;
    --yellow:     #d29922;
    --red:        #f85149;
    --blue:       #58a6ff;

    /* Tokens funcionales */
    --bg-nav:     rgba(7,11,20,.88);
    --row-hover:  rgba(255,255,255,.03);
    --shadow-md:  0 4px 24px rgba(0,0,0,.40);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.50);

    /* Tamaños */
    --radius:     12px;
    --radius-sm:  8px;
    --ease:       cubic-bezier(.4,0,.2,1);
    --t:          .2s var(--ease);
}

/* ── Tema claro ─────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg-deep:    #f0f4f8;
    --bg:         #ffffff;
    --s1:         #f6f8fa;
    --s2:         #eaeef2;
    --s3:         #d0d7de;
    --border:     rgba(0,0,0,.08);
    --border-h:   rgba(0,0,0,.16);
    --text:       #1f2328;
    --muted:      #636c76;
    --subtle:     #8c959f;
    --indigo-l:   #0969da;
    --green:      #1a7f37;
    --yellow:     #9a6700;
    --red:        #cf222e;
    --blue:       #0969da;
    --bg-nav:     rgba(255,255,255,.92);
    --row-hover:  rgba(0,0,0,.025);
    --shadow-md:  0 4px 24px rgba(0,0,0,.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.15);
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background var(--t), color var(--t);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--indigo); }

/* ── Navbar ──────────────────────────────────────────────────────── */
.dev-navbar {
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 24px;
}

.dev-navbar .navbar-brand {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    gap: 10px;
    letter-spacing: -.2px;
    text-decoration: none;
}

.dev-navbar .badge-dev {
    background: rgba(47,129,247,.2);
    color: var(--indigo-l);
    border: 1px solid rgba(47,129,247,.35);
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
}

.dev-navbar .nav-link {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: color var(--t), background var(--t);
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.dev-navbar .nav-link:hover { color: var(--text); background: var(--s2); }
.dev-navbar .nav-link.active { color: var(--indigo-l); background: var(--s2); }

.dev-navbar .dropdown-menu {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
}

.dev-navbar .dropdown-item {
    color: var(--muted);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    transition: color var(--t), background var(--t);
    text-decoration: none;
    display: block;
}

.dev-navbar .dropdown-item:hover       { color: var(--text); background: var(--s3); }
.dev-navbar .dropdown-item.text-danger { color: var(--red) !important; }
.dev-navbar .dropdown-item.text-danger:hover { background: rgba(248,81,73,.1); }
.dev-navbar .dropdown-divider { border-color: var(--border); margin: 4px 0; }

/* Botón tema */
.btn-theme {
    background: var(--s2);
    border: 1px solid var(--border);
    color: var(--muted);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--t), background var(--t), border-color var(--t);
    font-size: 15px;
    padding: 0;
}
.btn-theme:hover { color: var(--text); background: var(--s3); border-color: var(--border-h); }

/* ── Cards ───────────────────────────────────────────────────────── */
/* Igual que .table: Bootstrap fija `color: var(--bs-body-color)` (su
   propio texto oscuro por default) en .card, y .card-body/.card-title
   heredan de --bs-card-color/--bs-card-title-color — variables propias de
   Bootstrap que nunca pisábamos. Cualquier texto SIN color explícito
   propio (ej: una label suelta) terminaba oscuro sobre fondo oscuro. */
.card {
    --bs-card-color:       var(--text);
    --bs-card-cap-color:   var(--text);
    --bs-card-title-color: var(--text);
    --bs-card-subtitle-color: var(--muted);
    background: var(--s1);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.card:hover { border-color: var(--border-h); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 14px 18px;
}

.card-body   { padding: 18px; }
.card-footer { padding: 14px 18px; border-top: 1px solid var(--border); background: transparent; }

/* Card clickeable */
.card-hover {
    cursor: pointer;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card-hover:hover {
    border-color: var(--indigo);
    box-shadow: 0 0 0 1px var(--indigo), var(--shadow-md);
    transform: translateY(-2px);
}
.card-hover.selected {
    border-color: var(--indigo);
    box-shadow: 0 0 0 1px var(--indigo), 0 0 20px rgba(47,129,247,.15);
}

/* ── Formularios ─────────────────────────────────────────────────── */
.form-control,
.form-select {
    background: var(--s2);
    border: 1px solid var(--border-h);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color var(--t), box-shadow var(--t), background var(--t), color var(--t);
}

.form-control:focus,
.form-select:focus {
    background: var(--s2);
    border-color: var(--indigo);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(47,129,247,.25);
    outline: none;
}

.form-control::placeholder { color: var(--subtle); }
.form-label  { color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: 6px; letter-spacing: .2px; }
.form-text   { color: var(--subtle); font-size: 11px; margin-top: 4px; }
.form-check-label { color: var(--text); font-size: 13px; }

/* Toggle switch */
.form-check-input[type=checkbox] {
    width: 36px; height: 20px;
    background-color: var(--s3);
    border: 1px solid var(--border-h);
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
}

.form-check-input[type=checkbox]::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform var(--t), background var(--t);
}

.form-check-input[type=checkbox]:checked {
    background: rgba(47,129,247,.3);
    border-color: var(--indigo);
}

.form-check-input[type=checkbox]:checked::after {
    transform: translateX(16px);
    background: var(--indigo);
}

.form-check-input[type=checkbox]:focus {
    box-shadow: 0 0 0 3px rgba(47,129,247,.2);
    outline: none;
}

/* Radio button */
.form-check-input[type=radio] {
    width: 18px; height: 18px;
    background: var(--bg);
    border: 2px solid var(--border-h);
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    position: relative;
}

.form-check-input[type=radio]:checked { background: var(--indigo); border-color: var(--indigo); }
.form-check-input[type=radio]:checked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* ── Botones ─────────────────────────────────────────────────────── */
.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all var(--t);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:disabled, .btn.loading { opacity: .6; cursor: not-allowed; pointer-events: none; }

.btn-indigo {
    background: linear-gradient(135deg, var(--indigo), var(--indigo-l));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(47,129,247,.3);
}
.btn-indigo:hover {
    background: linear-gradient(135deg, var(--indigo-d), var(--indigo));
    box-shadow: 0 4px 16px rgba(47,129,247,.45);
    transform: translateY(-1px);
    color: #fff;
}
.btn-indigo:active { transform: translateY(0); box-shadow: none; }

.btn-outline-secondary {
    background: transparent;
    color: var(--muted);
    border-color: var(--border);
}
.btn-outline-secondary:hover { background: var(--s2); color: var(--text); border-color: var(--border-h); }

/* Botón de opción simple (toggle de 2-3 alternativas tipo "Sólido/Degradé")
   con estado .active manejado a mano por JS — evita depender de
   .btn-check/:checked de Bootstrap, cuyas variables de color activo
   (--bs-btn-active-bg) no siguen nuestro tema oscuro. */
.btn-outline-secondary.active {
    background: rgba(47,129,247,.15);
    color: var(--indigo-l);
    border-color: var(--indigo);
}

.btn-outline-danger { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-outline-danger:hover { background: rgba(248,81,73,.1); color: var(--red); border-color: var(--red); }

.btn-outline-success { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-outline-success:hover { background: rgba(63,185,80,.1); color: var(--green); border-color: var(--green); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-w  { width: 100%; justify-content: center; }

/* Spinner en botón */
.btn .spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    display: none;
}
.btn.loading .spinner  { display: inline-block; }
.btn.loading .btn-icon { display: none; }

/* ── Tablas ──────────────────────────────────────────────────────── */
/* Bootstrap fija --bs-table-bg en cada celda a partir de --bs-body-bg
   (blanco por defecto, una variable propia de Bootstrap que nuestro tema
   nunca pisa) — sin esto, cualquier <table class="table"> se ve clara
   aunque el resto de la página esté en modo oscuro. */
.table {
    --bs-table-bg:            transparent;
    --bs-table-color:         var(--text);
    --bs-table-border-color:  var(--border);
    --bs-table-striped-bg:    var(--row-hover);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg:      var(--row-hover);
    --bs-table-hover-color:   var(--text);
    --bs-table-active-bg:     var(--s2);
    --bs-table-active-color:  var(--text);
    color: var(--text);
    font-size: 13px;
    margin: 0;
    border-collapse: collapse;
    width: 100%;
}

.table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
    white-space: nowrap;
    background: transparent;
}

.table td {
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: var(--row-hover); }

/* DataTables (CDN) liga el color de sus overlays de stripe/hover a
   [data-bs-theme], pero acá el switch de tema usa [data-theme] — se
   remapean sus variables a mano para que el overlay aclare/oscurezca en
   la dirección correcta según el tema activo. */
:root, [data-theme="dark"] {
    --dt-row-stripe: 255, 255, 255;
    --dt-row-hover:  255, 255, 255;
}
[data-theme="light"] {
    --dt-row-stripe: 0, 0, 0;
    --dt-row-hover:  0, 0, 0;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 99px;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-on   { background: rgba(63,185,80,.15);  color: var(--green);  border: 1px solid rgba(63,185,80,.3);  }
.badge-off  { background: rgba(248,81,73,.12);  color: var(--red);    border: 1px solid rgba(248,81,73,.25); }
.badge-warn { background: rgba(210,153,34,.15); color: var(--yellow); border: 1px solid rgba(210,153,34,.3); }
.badge-blue { background: rgba(88,166,255,.12); color: var(--blue);   border: 1px solid rgba(88,166,255,.25);}

/* ── Agenda: timeline visual de turnos por expositor ────────────────── */
.timeline-track { position:relative; height:28px; background:rgba(154,164,178,.12); border-radius:6px; overflow:hidden; }
.timeline-block { position:absolute; top:0; height:100%; border-radius:3px; }
.timeline-block.tl-disponible { background:rgba(63,185,80,.35); border:1px solid var(--green); }
.timeline-block.tl-reservado  { background:rgba(88,166,255,.35); border:1px solid var(--blue); }
.timeline-block.tl-bloqueado  { background:rgba(248,81,73,.35); border:1px solid var(--red); }
.timeline-break {
    position:absolute; top:0; height:100%; border-radius:3px; opacity:.4;
    background-image: repeating-linear-gradient(45deg, var(--muted) 0 6px, transparent 6px 12px);
}
.timeline-label { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Listas (Bootstrap .list-group) ─────────────────────────────────
   Mismo problema que .table: Bootstrap fija --bs-list-group-bg a partir
   de --bs-body-bg (blanco), que acá nunca se pisa. */
.list-group-item {
    --bs-list-group-bg:            var(--s2);
    --bs-list-group-color:         var(--text);
    --bs-list-group-border-color:  var(--border);
    --bs-list-group-action-hover-bg: var(--s3);
    --bs-list-group-action-active-bg: var(--s3);
}

/* ── Alertas (Bootstrap .alert) ──────────────────────────────────────
   Idem: los colores por variante (--bs-alert-bg, --bs-alert-color) son
   claros por default y no siguen nuestro tema. */
.alert {
    --bs-alert-bg:            var(--s2);
    --bs-alert-color:         var(--text);
    --bs-alert-border-color:  var(--border);
    border-radius: var(--radius);
}
.alert-info    { --bs-alert-color: var(--blue); }
.alert-warning { --bs-alert-color: var(--yellow); }
.alert-danger  { --bs-alert-color: var(--red); }
.alert-success { --bs-alert-color: var(--green); }

/* ── Toast system ────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-item {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    min-width: 260px;
    max-width: 340px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    cursor: pointer;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform .35s var(--ease), opacity .35s var(--ease);
    position: relative;
    overflow: hidden;
    color: var(--text);
}

.toast-item.show { transform: translateX(0); opacity: 1; }

.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast-msg  { font-size: 13px; font-weight: 500; flex: 1; }
.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    width: 100%;
    border-radius: 0 0 var(--radius) var(--radius);
}

.toast-success .toast-icon { color: var(--green); }
.toast-success .toast-progress { background: var(--green); }
.toast-error   .toast-icon { color: var(--red); }
.toast-error   .toast-progress { background: var(--red); }
.toast-info    .toast-icon { color: var(--indigo-l); }
.toast-info    .toast-progress { background: var(--indigo); }
.toast-warn    .toast-icon { color: var(--yellow); }
.toast-warn    .toast-progress { background: var(--yellow); }

/* ── Animaciones ─────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-up { opacity: 0; animation: fadeUp .35s var(--ease) forwards; }

/* ── Modales ─────────────────────────────────────────────────────── */
.modal-content {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.modal-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-body   { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; }

.modal-backdrop { background: rgba(0,0,0,.7); }

.btn-close-white { filter: invert(1) brightness(.7); }
.btn-close-white:hover { filter: invert(1); }

[data-theme="light"] .btn-close-white { filter: none; opacity: .6; }
[data-theme="light"] .btn-close-white:hover { filter: none; opacity: 1; }

/* ── Info toggle (aclaraciones colapsables) ──────────────────────────
   Botón chico para mostrar/ocultar texto explicativo (de qué fuente/color
   se trata, con qué campo relaciona, rutas de archivos, etc.) que no hace
   falta tener siempre a la vista. */
.info-toggle {
    background: transparent; border: none; color: var(--muted);
    font-size: 11.5px; padding: 2px 0; display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer; text-decoration: none;
}
.info-toggle:hover { color: var(--indigo-l); }
.info-toggle .bi { transition: transform var(--t); }
.info-toggle[aria-expanded="true"] .bi-chevron-right { transform: rotate(90deg); }
.info-text { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ── Misc ────────────────────────────────────────────────────────── */
.section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    margin-bottom: 10px;
}

.page-header { margin-bottom: 24px; }
.page-header h4 { font-weight: 700; font-size: 20px; letter-spacing: -.3px; color: var(--text); }
.page-header small { color: var(--muted); font-size: 13px; }

code {
    background: var(--s3);
    color: var(--indigo-l);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Bootstrap overrides */
.navbar-toggler {
    border-color: var(--border);
    padding: 6px 10px;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28200,200,200,.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850,50,50,.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.container-fluid { max-width: 1400px; }

/* Login page */
.login-wrap {
    min-height: 100vh;
    background: var(--bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t);
}

.login-card {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px;
    width: 380px;
    box-shadow: var(--shadow-lg);
}

.login-card h5 { color: var(--text); font-weight: 700; }
.login-card .text-secondary { color: var(--muted) !important; }

/* ── Accordion (SuperAdmin) ─────────────────────────────────────────
   Bootstrap no trae estilos propios para modo oscuro: sin esto, el
   accordion se renderiza con su fondo claro por defecto y el ícono de
   flecha (un SVG oscuro embebido) queda invisible sobre fondo oscuro. */
.accordion {
    --bs-accordion-color: var(--text);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--border);
    --bs-accordion-border-radius: var(--radius);
    --bs-accordion-inner-border-radius: var(--radius);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-btn-bg: var(--s2);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e6edf3' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2358a6ff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(47,129,247,.25);
    --bs-accordion-active-color: var(--indigo-l);
    --bs-accordion-active-bg: var(--s3);
}
.accordion-item {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    overflow: hidden;
    margin-bottom: 10px;
}
.accordion-item:not(:last-of-type) { border-bottom: 1px solid var(--border); }
.accordion-button { font-weight: 600; font-size: 13px; }
.accordion-button:not(.collapsed) { border-bottom: 1px solid var(--border); }
.accordion-body { background: var(--bg); color: var(--text); }

[data-theme="light"] .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f2328' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230969da' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Select nativo: mismo problema con la flecha del <select>. */
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e6edf3' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="light"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f2328' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}