﻿/* =========================================================
   Mi Aula - soporte modo claro
   Archivo dedicado: wwwroot/css/miaula-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"]) .mi-aula-page {
    color: #0f172a !important;
}

: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.10), transparent 34%), linear-gradient(180deg, #f8fbff, #eaf2fb) !important;
}

/* ===== Hero ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mi-aula-hero {
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mi-aula-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"]) .mi-aula-hero h1 {
    color: #0f172a !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"]) .mi-aula-hero 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"]) .mi-aula-hero-card {
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 46%), linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(219, 234, 254, 0.84)) !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mi-aula-hero-card span {
        color: #0f172a !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mi-aula-hero-card small {
        color: #527097 !important;
    }

/* ===== Mensajes ===== */

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

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

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

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .panel-header p {
    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"]) .panel-header h2 {
    color: #0f172a !important;
}

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

/* ===== Inputs ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mi-aula-page input,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mi-aula-page textarea {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.36) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mi-aula-page 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"]) .mi-aula-page textarea:focus {
        border-color: rgba(37, 99, 235, 0.60) !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !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"]) .ghost-btn {
    color: #1e3a8a !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
    box-shadow: 0 10px 24px 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"]) .danger-btn,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .mini-danger {
    color: #991b1b !important;
    background: rgba(254, 226, 226, 0.76) !important;
    border-color: rgba(248, 113, 113, 0.30) !important;
}

/* ===== Tarjetas de listas ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .class-card {
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 42%), rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .class-card:hover {
        background: rgba(255, 255, 255, 0.96) !important;
        border-color: rgba(37, 99, 235, 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"]) .class-card.selected {
        background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 42%), rgba(239, 246, 255, 0.96) !important;
        border-color: rgba(37, 99, 235, 0.54) !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .class-card h3 {
        color: #0f172a !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .class-card 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"]) .class-meta {
    background: rgba(239, 246, 255, 0.86) !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"]) .class-meta span {
        color: #0f172a !important;
    }

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

/* ===== Pills y acciones premium ===== */

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

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .premium-action {
    color: #1e3a8a !important;
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 42%), rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .premium-action small {
        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"]) .action-ready {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 42%), rgba(239, 246, 255, 0.92) !important;
    border-color: rgba(37, 99, 235, 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"]) .logbook-danger,
:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .planning-danger {
    color: #991b1b !important;
    background: rgba(254, 226, 226, 0.76) !important;
    border-color: rgba(248, 113, 113, 0.32) !important;
}

/* ===== Tabla alumnos ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .students-table-wrap {
    border-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .students-table {
    background: rgba(255, 255, 255, 0.92) !important;
}

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .students-table th {
        color: #1e3a8a !important;
        background: rgba(219, 234, 254, 0.72) !important;
        border-bottom-color: rgba(148, 163, 184, 0.22) !important;
    }

    :is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .students-table td {
        color: #0f172a !important;
        border-bottom-color: rgba(148, 163, 184, 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"]) .students-table tr:hover td {
        background: rgba(239, 246, 255, 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"]) .muted {
    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"]) .source-pill.manual {
    color: #334155 !important;
    background: rgba(226, 232, 240, 0.80) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .source-pill.classroom {
    color: #1e3a8a !important;
    background: rgba(219, 234, 254, 0.86) !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"]) .empty-state {
    color: #64748b !important;
    background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 42%), rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

/* ===== Modal Classroom claro ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .classroom-modal-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"]) .classroom-modal {
    background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.10), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.98)) !important;
    border-color: rgba(148, 163, 184, 0.28) !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"]) .classroom-modal-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"]) .classroom-course-card strong {
    color: #0f172a !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .classroom-modal-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"]) .classroom-course-card 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"]) .classroom-course-card {
    background: rgba(255, 255, 255, 0.86) !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"]) .classroom-course-card.selected {
        background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 42%), rgba(239, 246, 255, 0.94) !important;
        border-color: rgba(34, 197, 94, 0.42) !important;
    }

/* ===== Visor Bitácora / Planeación claro ===== */

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .miaula-logbook-overlay {
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.20), transparent 42%), rgba(226, 232, 240, 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"]) .miaula-logbook-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.28) !important;
    box-shadow: 0 34px 100px rgba(15, 23, 42, 0.20) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .miaula-logbook-header {
    background: linear-gradient(90deg, rgba(219, 234, 254, 0.90), rgba(237, 233, 254, 0.82)) !important;
    border-bottom-color: rgba(148, 163, 184, 0.22) !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .miaula-logbook-header-main h2 {
    color: #0f172a !important;
}

:is(html[data-theme="light"], body[data-theme="light"], html.light, body.light, html.theme-light, body.theme-light, [data-bs-theme="light"]) .miaula-logbook-eyebrow {
    color: #1e3a8a !important;
    background: rgba(219, 234, 254, 0.84) !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"]) .miaula-logbook-chip {
    color: #334155 !important;
    background: rgba(255, 255, 255, 0.82) !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"]) .miaula-logbook-chip.soft {
        color: #5b21b6 !important;
        background: rgba(237, 233, 254, 0.84) !important;
        border-color: rgba(124, 58, 237, 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"]) .miaula-logbook-body {
    background: rgba(241, 245, 249, 0.82) !important;
}
