/* =========================================================
   Mi Aula - Nombrar lista / Pase de lista
   Modo claro cómodo para lectura prolongada
   Archivo: wwwroot/css/rollcall-theme.css
========================================================= */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-page {
    color: #1f2937 !important;
}

/* Fondo general suave tipo papel */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mired-content {
    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 34%), linear-gradient(180deg, #f8fafc, #f1f5f9 42%, #eee9df) !important;
}

/* ===== Encabezado superior ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-header {
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 42%), linear-gradient(145deg, #ffffff, #edf5ff) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 20px 58px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-kicker {
    color: #2563eb !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-header h1 {
    color: #111827 !important;
    text-shadow: none !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-header span {
    color: #64748b !important;
}

/* ===== Botones ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-secondary {
    color: #1e3a8a !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-secondary:hover:not(:disabled) {
        color: #0f172a !important;
        background: #eff6ff !important;
        border-color: rgba(37, 99, 235, 0.42) !important;
    }

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    box-shadow: 0 18px 44px rgba(37, 99, 235, 0.22) !important;
}

/* ===== Mensaje ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-message {
    color: #1e3a8a !important;
    background: rgba(219, 234, 254, 0.82) !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
}

/* ===== Panel semiautomático ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-assistant-panel {
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 42%), linear-gradient(145deg, #ffffff, #f3f7fc) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 22px 62px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-assistant-kicker {
    color: #1e3a8a !important;
    background: rgba(219, 234, 254, 0.88) !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-assistant-main h2 {
    color: #111827 !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-assistant-main p {
    color: #64748b !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-toggle,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-shortcuts span {
    color: #334155 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-shortcuts b {
    color: #2563eb !important;
}

/* ===== Paneles laterales ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-side,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-detail {
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 42%), rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-side h2,
    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-detail h2 {
        color: #111827 !important;
    }

/* ===== Sesiones ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-session-group {
    background: rgba(248, 250, 252, 0.90) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-session-date strong {
    color: #111827 !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-session-date span {
    color: #64748b !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-pass-item {
    color: #334155 !important;
    background: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-pass-item.active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
        border-color: rgba(37, 99, 235, 0.36) !important;
    }

/* ===== Área principal: lista mate blanco ostión ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-main {
    background: linear-gradient(180deg, #fbf7ef, #f7f1e7) !important;
    border-color: rgba(180, 170, 150, 0.34) !important;
    box-shadow: 0 24px 64px rgba(80, 70, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

/* Encabezado tabla */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-table-head {
    color: #1e3a8a !important;
    background: linear-gradient(90deg, rgba(230, 237, 248, 0.90), rgba(250, 247, 240, 0.94)) !important;
    border-bottom-color: rgba(148, 163, 184, 0.28) !important;
}

/* Filas cómodas */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-row {
    background: rgba(255, 253, 247, 0.82) !important;
    border-bottom-color: rgba(180, 170, 150, 0.24) !important;
    color: #1f2937 !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-row:nth-of-type(even) {
        background: rgba(248, 244, 235, 0.82) !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-row:hover {
        background: rgba(239, 246, 255, 0.86) !important;
    }

    /* Fila activa más visible pero no agresiva */

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-row.keyboard-active {
        outline: 2px solid rgba(37, 99, 235, 0.58) !important;
        outline-offset: -2px !important;
        background: radial-gradient(circle at left, rgba(37, 99, 235, 0.10), transparent 42%), rgba(239, 246, 255, 0.96) !important;
    }

/* Texto alumnos */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-student strong {
    color: #111827 !important;
    font-weight: 900 !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-student small {
    color: #64748b !important;
    font-weight: 750 !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-email,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-email span {
    color: #52637a !important;
    font-weight: 750 !important;
}

/* Avatar */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-avatar {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
    border-color: rgba(37, 99, 235, 0.26) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18) !important;
}

/* Botones de asistencia */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-status-buttons button {
    color: #334155 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-status-buttons button.present.active {
        color: #065f46 !important;
        background: rgba(220, 252, 231, 0.96) !important;
        border-color: rgba(34, 197, 94, 0.52) !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-status-buttons button.late.active {
        color: #92400e !important;
        background: rgba(254, 243, 199, 0.98) !important;
        border-color: rgba(245, 158, 11, 0.52) !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-status-buttons button.absent.active {
        color: #991b1b !important;
        background: rgba(254, 226, 226, 0.98) !important;
        border-color: rgba(239, 68, 68, 0.52) !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-status-buttons button.justified.active {
        color: #075985 !important;
        background: rgba(224, 242, 254, 0.98) !important;
        border-color: rgba(56, 189, 248, 0.52) !important;
    }

/* Contadores T / A / Par */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-counter {
    color: #52637a !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-counter-input {
    color: #111827 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
}

/* ===== Detalle de sesión ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-detail label {
    color: #475569 !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-detail input,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-detail textarea {
    color: #111827 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-detail input:focus,
    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-detail textarea:focus {
        outline: none !important;
        border-color: rgba(37, 99, 235, 0.55) !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    }

/* Donut y resumen */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-summary {
    background: radial-gradient(circle at top, rgba(14, 165, 233, 0.12), transparent 58%), rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-summary strong {
        color: #111827 !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-summary span {
        color: #64748b !important;
    }

/* Estados vacíos */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-empty {
    color: #64748b !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
}

/* ===== Modal guía clara ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-overlay {
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent 42%), rgba(226, 232, 240, 0.78) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-modal {
    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.99)) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.18) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-head h2,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-card.featured h3 {
    color: #111827 !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-head span,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-card.featured p {
    color: #64748b !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-card,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-mini-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .rollcall-help-mini-card p {
        color: #334155 !important;
    }