/* =========================================================
   UNIPARCHADO — LIQUID GLASS + BENTO V2
   Capa visual global. No contiene lógica de producto.
   ========================================================= */

:root {
    --liquid-bg-deep: rgba(2, 6, 16, 0.99);
    --liquid-bg-mid: rgba(5, 12, 24, 0.94);

    --liquid-glass: rgba(8, 17, 31, 0.64);
    --liquid-glass-soft: rgba(255, 255, 255, 0.030);
    --liquid-glass-hover: rgba(255, 255, 255, 0.050);
    --liquid-glass-strong: rgba(6, 14, 27, 0.76);

    --liquid-border: rgba(255, 255, 255, 0.095);
    --liquid-border-hi: rgba(255, 255, 255, 0.16);
    --liquid-inner: rgba(255, 255, 255, 0.042);

    --liquid-cyan: #72e4ff;
    --liquid-blue: #83baff;
    --liquid-mint: #74f0c4;
    --liquid-amber: #ffd36a;
    --liquid-red: #ff7d88;

    --liquid-text: rgba(255, 255, 255, 0.96);
    --liquid-muted: rgba(213, 225, 244, 0.66);
    --liquid-faint: rgba(213, 225, 244, 0.46);

    --liquid-radius-sm: 16px;
    --liquid-radius: 22px;
    --liquid-radius-lg: 28px;
    --liquid-radius-xl: 34px;

    --liquid-blur: 24px;
    --liquid-blur-strong: 34px;

    --liquid-shadow:
        0 22px 58px rgba(0, 0, 0, 0.38),
        0 8px 22px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);

    --liquid-shadow-hover:
        0 28px 70px rgba(0, 0, 0, 0.42),
        0 10px 26px rgba(35, 118, 186, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --liquid-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --text-main: var(--liquid-text);
    --text-muted: var(--liquid-muted);
    --accent-cyan: var(--liquid-cyan);
    --accent-emerald: var(--liquid-mint);
    --accent-amber: var(--liquid-amber);

    --card-bg: var(--liquid-glass);
    --card-bg-strong: var(--liquid-glass-strong);
    --nav-bg: rgba(8, 18, 34, 0.62);

    /* Mantiene compatibilidad con el CSS heredado, donde estas variables
       representan la declaración completa de borde. */
    --glass-border: 1px solid var(--liquid-border);
    --glass-border-strong: 1px solid var(--liquid-border-hi);
}

:root[data-theme="light"] {
    --liquid-bg-deep: rgba(226, 236, 249, 0.98);
    --liquid-bg-mid: rgba(241, 246, 253, 0.92);
    --liquid-glass: rgba(255, 255, 255, 0.48);
    --liquid-glass-soft: rgba(255, 255, 255, 0.38);
    --liquid-glass-hover: rgba(255, 255, 255, 0.58);
    --liquid-glass-strong: rgba(255, 255, 255, 0.66);
    --liquid-border: rgba(255, 255, 255, 0.74);
    --liquid-border-hi: rgba(255, 255, 255, 0.94);
    --liquid-inner: rgba(255, 255, 255, 0.52);
    --liquid-text: rgba(12, 26, 47, 0.95);
    --liquid-muted: rgba(45, 61, 85, 0.68);
    --liquid-faint: rgba(45, 61, 85, 0.50);
    --nav-bg: rgba(240, 246, 255, 0.60);
}

/* -------------------------
   Fondo ambiental dinámico
   ------------------------- */

html {
    background: rgba(3, 9, 21, 1);
}

body {
    background-color: rgba(2, 6, 15, 1);
    background-image:
        radial-gradient(circle at 9% -4%, rgba(32, 139, 214, 0.10) 0%, transparent 30%),
        radial-gradient(circle at 91% 4%, rgba(72, 81, 190, 0.085) 0%, transparent 29%),
        radial-gradient(circle at 80% 74%, rgba(42, 176, 145, 0.035) 0%, transparent 30%),
        radial-gradient(circle at 20% 82%, rgba(43, 73, 160, 0.035) 0%, transparent 28%),
        linear-gradient(180deg, rgba(5, 13, 27, 1) 0%, rgba(2, 7, 17, 1) 62%, rgba(1, 4, 11, 1) 100%);
    background-attachment: fixed;
}

:root[data-theme="light"] body {
    background-color: rgba(228, 238, 251, 1);
    background-image:
        radial-gradient(circle at 8% 0%, rgba(66, 173, 255, 0.22), transparent 31%),
        radial-gradient(circle at 88% 7%, rgba(118, 132, 255, 0.18), transparent 30%),
        radial-gradient(circle at 50% 92%, rgba(88, 240, 207, 0.13), transparent 32%),
        linear-gradient(180deg, rgba(236, 244, 255, 1), rgba(219, 232, 248, 1));
}

/* -------------------------
   Contenedor principal Bento
   ------------------------- */

.app-container {
    max-width: 1180px;
    padding: clamp(16px, 2.4vw, 30px);
}

.app-header {
    margin-bottom: 18px;
}

.app-header h1 {
    font-size: clamp(1.9rem, 3.3vw, 2.65rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.app-header .muted-text {
    margin-top: 6px;
    font-size: 0.98rem;
}

/* -------------------------
   Material Liquid Glass
   ------------------------- */

.glass-card,
.glass-nav,
.uniparchado-dialog-fallback,
.uniparchado-swal,
.swal2-popup.uniparchado-swal,
.marketing-consent-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* Base translúcida: nunca fondo opaco. */
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.062) 24%,
            rgba(255, 255, 255, 0.025) 62%,
            rgba(117, 183, 255, 0.035) 100%
        ),
        var(--liquid-glass) !important;

    /* Desenfoque profundo tipo material de sistema Apple. */
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(175%) !important;
    backdrop-filter: blur(var(--liquid-blur)) saturate(175%) !important;

    /* Bisel reflectante de exactamente 1px. */
    border: 1px solid var(--liquid-border) !important;
    border-radius: var(--liquid-radius-lg) !important;

    /* Elevación suave y difusa. */
    box-shadow: var(--liquid-shadow) !important;
}

.glass-card::before,
.glass-nav::before,
.uniparchado-dialog-fallback::before,
.uniparchado-swal::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.19) 0%,
            rgba(255, 255, 255, 0.075) 9%,
            rgba(255, 255, 255, 0.015) 28%,
            transparent 48%
        );
}

.glass-card::after,
.glass-nav::after,
.uniparchado-dialog-fallback::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    pointer-events: none;
    border-radius: calc(var(--liquid-radius-lg) - 1px);
    border: 1px solid rgba(255, 255, 255, 0.055);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 42%, transparent 75%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 42%, transparent 75%);
}

@media (hover: hover) and (pointer: fine) {
    .glass-card {
        transition:
            transform 260ms var(--liquid-ease),
            border-color 260ms var(--liquid-ease),
            box-shadow 260ms var(--liquid-ease),
            background 260ms var(--liquid-ease);
    }

    .glass-card:hover {
        transform: translateY(-2px);
        border-color: var(--liquid-border-hi) !important;
        box-shadow: var(--liquid-shadow-hover) !important;
    }
}

/* -------------------------
   Botones
   ------------------------- */

button,
.button {
    border-radius: var(--liquid-radius-sm) !important;
    transition:
        transform 180ms var(--liquid-ease),
        filter 180ms var(--liquid-ease),
        box-shadow 180ms var(--liquid-ease),
        border-color 180ms var(--liquid-ease),
        background 180ms var(--liquid-ease);
}

.btn-secondary,
.button-ghost,
.semester-tab,
.calendar-month-button {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
        rgba(255, 255, 255, 0.025) !important;
    color: var(--liquid-text) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 22px rgba(0,0,0,.12);
}

.btn-secondary:hover,
.button-ghost:hover,
.semester-tab:hover {
    border-color: rgba(114, 228, 255, 0.30) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)),
        rgba(114, 228, 255, 0.035) !important;
    transform: translateY(-1px);
}

.btn-primary,
.button-primary {
    color: rgba(4, 17, 29, 0.94) !important;
    background:
        linear-gradient(180deg, rgba(185, 245, 255, 0.98), rgba(103, 215, 241, 0.91)) !important;
    border: 1px solid rgba(220, 252, 255, 0.70) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 10px 24px rgba(74, 206, 239, 0.18);
}

.btn-primary:hover,
.button-primary:hover {
    filter: brightness(1.035) saturate(1.04);
    transform: translateY(-1px);
}

.btn-danger {
    border: 1px solid rgba(255, 125, 136, 0.20) !important;
    background:
        linear-gradient(180deg, rgba(255, 125, 136, 0.11), rgba(255, 125, 136, 0.045)) !important;
    color: var(--liquid-red) !important;
}

/* -------------------------
   Inputs y controles
   ------------------------- */

input,
select,
textarea,
.uniparchado-dialog-input,
.swal2-input {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--liquid-radius-sm) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
        rgba(5, 15, 29, 0.28) !important;
    color: var(--liquid-text) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 6px 18px rgba(0,0,0,.08);
}

input:focus,
select:focus,
textarea:focus,
.uniparchado-dialog-input:focus,
.swal2-input:focus {
    border-color: rgba(114, 228, 255, 0.42) !important;
    box-shadow:
        0 0 0 4px rgba(114, 228, 255, 0.075),
        inset 0 1px 0 rgba(255,255,255,.075) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--liquid-text) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(11, 25, 43, 0.96) inset !important;
    caret-color: var(--liquid-text);
}

/* -------------------------
   Dashboard: Bento real
   ------------------------- */

#view-dashboard {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

#view-dashboard > .app-header {
    grid-column: 1 / -1;
}

#view-dashboard > .semester-overview {
    grid-column: 1 / -1;
    margin: 0;
}

#view-dashboard > .parchometro-dashboard-card {
    grid-column: span 12;
    margin: 0;
}

#view-dashboard > .semester-section {
    grid-column: span 7;
    margin: 0;
    padding: 22px;
    border: 1px solid var(--liquid-border);
    border-radius: var(--liquid-radius-lg);
    background:
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.028)),
        var(--liquid-glass);
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(170%);
    backdrop-filter: blur(var(--liquid-blur)) saturate(170%);
    box-shadow: var(--liquid-shadow);
}

#view-dashboard > .dashboard-upcoming-card {
    grid-column: span 5;
    margin: 0;
}

#view-dashboard > .add-course-container {
    grid-column: span 4;
    margin: 0;
}

#view-dashboard > .courses-grid {
    grid-column: span 8;
    margin: 0;
    align-content: start;
}

.dashboard-header {
    align-items: end;
}

.dashboard-card-actions {
    gap: 10px;
}

.dashboard-card-actions .btn-secondary,
.dashboard-card-actions .btn-primary {
    width: auto;
    min-height: 46px;
    padding-inline: 16px;
}

.semester-overview {
    padding: clamp(20px, 2.6vw, 30px) !important;
}

.semester-overview-header {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.085);
}

.semester-overview-title-row h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    letter-spacing: -0.035em;
}

.semester-current-badge {
    border: 1px solid rgba(114, 228, 255, 0.28);
    background: rgba(114, 228, 255, 0.075);
    color: var(--liquid-cyan);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.semester-overview .semester-summary,
.semester-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
    margin-top: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.summary-col {
    min-height: 116px;
    padding: 16px 14px !important;
    align-items: flex-start !important;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.115);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.028)),
        rgba(9, 22, 40, 0.28);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    backdrop-filter: blur(18px) saturate(155%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 10px 24px rgba(0,0,0,.11);
}

.summary-col .label {
    font-size: 0.72rem !important;
    letter-spacing: .10em;
    text-align: left !important;
    color: var(--liquid-muted);
}

.summary-col .value {
    margin-top: 8px;
    font-size: clamp(2rem, 4vw, 2.7rem) !important;
    line-height: 1;
    letter-spacing: -0.045em;
}

.summary-col .value.accent {
    color: var(--liquid-cyan);
    text-shadow: 0 0 22px rgba(114, 228, 255, 0.16);
}

.parchometro-dashboard-card,
.dashboard-upcoming-card,
.add-course-container {
    padding: 22px !important;
}

.parchometro-summary-grid {
    gap: 12px !important;
}

.parchometro-summary-item,
.parchometro-detail-item,
.prediction-item,
.goal-setting-block,
.comparison-stat,
.calendar-summary-card,
.simulator-result-card,
.simulator-goal-card,
.account-detail {
    border: 1px solid rgba(255,255,255,.105) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        rgba(7, 18, 34, 0.22) !important;
    -webkit-backdrop-filter: blur(15px) saturate(145%);
    backdrop-filter: blur(15px) saturate(145%);
}

.parchometro-summary-item {
    min-height: 96px;
    padding: 15px !important;
}

.parchometro-summary-item strong {
    font-size: 1.75rem;
}

.parchometro-focus-card {
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.027) !important;
}

.semester-tab {
    border-radius: 999px !important;
}

.semester-tab.active {
    border-color: rgba(114, 228, 255, 0.30) !important;
    background: rgba(114, 228, 255, 0.10) !important;
    color: var(--liquid-cyan) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* Materias: Bento de dos columnas en desktop. */
.courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
}

.course-card {
    min-height: 150px;
    align-items: stretch !important;
    padding: 18px !important;
}

.course-card .course-click-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-click-area h3 {
    color: var(--liquid-text) !important;
    font-size: 1.12rem !important;
}

.course-parchometro-inline {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,.075);
}

/* -------------------------
   Progreso: Bento analítico
   ------------------------- */

.analytics-summary-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.analytics-summary-grid > .analytics-metric-card {
    grid-column: span 3;
    min-height: 160px;
}

.analytics-summary-grid > .analytics-progress-card {
    grid-column: span 12;
    min-height: 118px;
}

.analytics-metric-card {
    justify-content: flex-end !important;
    padding: 20px !important;
}

.analytics-metric-value {
    font-size: clamp(2rem, 4vw, 2.65rem) !important;
    letter-spacing: -0.045em;
}

.analytics-metric-value.accent {
    color: var(--liquid-cyan);
}

.analytics-two-column,
.analytics-charts-grid,
.analytics-lists-section {
    gap: 14px !important;
}

.analytics-chart-card,
.goals-card,
.semester-comparison-card {
    padding: 22px !important;
}

.goal-setting-block {
    padding: 16px;
}

.goal-result-box,
.analytics-ranking-item {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.025) !important;
}

/* -------------------------
   Calendario: Bento
   ------------------------- */

.calendar-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.calendar-summary-card {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px !important;
}

.calendar-summary-card strong {
    margin-top: 7px;
    font-size: 2.25rem;
    letter-spacing: -0.04em;
}

.calendar-card {
    margin-top: 14px;
    padding: 22px !important;
}

.calendar-grid {
    gap: 7px !important;
}

.calendar-day {
    border-radius: 16px !important;
    border-color: rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.025) !important;
}

.calendar-reminders-grid {
    gap: 14px !important;
}

.calendar-reminder-card {
    padding: 20px !important;
}

/* -------------------------
   Cuenta: Bento
   ------------------------- */

.account-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.account-grid > .account-profile-card {
    grid-column: span 4;
    grid-row: span 2;
}

.account-grid > .account-details-card {
    grid-column: span 4;
}

.account-grid > .account-data-card,
.account-grid > .account-feedback-card,
.account-grid > .account-session-card,
.account-grid > .danger-zone {
    grid-column: span 6;
}

.account-profile-card,
.account-details-card,
.danger-zone {
    margin: 0 !important;
    padding: 20px !important;
}

.account-avatar {
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 34px rgba(0,0,0,.22) !important;
}

.account-detail {
    padding: 12px 13px !important;
    margin-top: 8px;
}

/* -------------------------
   Materia / notas
   ------------------------- */

#view-course {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

#view-course > .app-header {
    grid-column: 1 / -1;
}

#view-course > .course-settings-card {
    grid-column: span 7;
    margin: 0;
}

#view-course > .prediction-box {
    grid-column: span 5;
    margin: 0;
    border-left: 1px solid var(--liquid-border) !important;
}

#view-course > .course-parchometro-card {
    grid-column: 1 / -1;
    margin: 0;
}

#view-course > .grades-section-header,
#view-course > .grades-header,
#view-course > #grades-list {
    grid-column: 1 / -1;
}

.course-settings-card,
.prediction-box,
.course-parchometro-card {
    padding: 22px !important;
}

.course-parchometro-grid {
    gap: 12px !important;
}

.parchometro-detail-item {
    padding: 16px !important;
}

.grade-row {
    padding: 10px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background: rgba(255,255,255,.018);
}

/* -------------------------
   Gemelo académico / herramientas
   ------------------------- */

.simulator-selector-card,
.simulation-builder-card,
.simulator-result-card,
.simulator-goal-card,
.importer-card,
.copilot-card,
.time-planner-card,
.academic-inbox-card {
    border-radius: var(--liquid-radius-lg) !important;
}

.simulator-results-grid,
.academic-twin-impact-grid,
.simulator-goals-grid {
    gap: 14px !important;
}

.simulator-result-card,
.simulator-goal-card {
    min-height: 130px;
    padding: 18px !important;
}

.simulator-result-card strong,
.simulator-goal-card strong {
    font-size: 1.75rem;
    letter-spacing: -0.035em;
}

/* -------------------------
   Barra inferior flotante
   ------------------------- */

.glass-nav {
    width: min(760px, calc(100% - 24px)) !important;
    min-height: 72px !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%);
    padding: 8px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
        rgba(9, 20, 38, 0.56) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.13) !important;
}

.nav-btn {
    min-width: 0 !important;
    flex: 1;
    min-height: 55px;
    border-radius: 19px !important;
    transition:
        background 180ms var(--liquid-ease),
        color 180ms var(--liquid-ease),
        transform 180ms var(--liquid-ease);
}

.nav-btn.active {
    color: var(--liquid-cyan) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.045)),
        rgba(114,228,255,.035);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 20px rgba(0,0,0,.13);
}

.nav-btn i {
    font-size: 1.35rem !important;
}

/* -------------------------
   Diálogos
   ------------------------- */

.uniparchado-dialog-backdrop,
.swal2-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.uniparchado-dialog-fallback,
.uniparchado-swal,
.swal2-popup.uniparchado-swal {
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
        rgba(10, 24, 44, 0.68) !important;
    -webkit-backdrop-filter: blur(34px) saturate(185%) !important;
    backdrop-filter: blur(34px) saturate(185%) !important;
}

/* -------------------------
   Skeletons: menos “bloque gris”
   ------------------------- */

.skeleton,
.skeleton-value,
.skeleton-line,
.skeleton-pill {
    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,.045) 18%,
            rgba(255,255,255,.105) 38%,
            rgba(255,255,255,.045) 62%
        ) !important;
    background-size: 220% 100% !important;
    border-radius: 999px !important;
}

/* -------------------------
   Landing: Bento + liquid glass
   ------------------------- */

.landing-header {
    max-width: 1220px !important;
    margin: 12px auto 0 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        rgba(7, 18, 34, 0.58) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.hero {
    max-width: 1220px !important;
}

.hero-product img,
.showcase-gallery img {
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.steps-grid,
.features-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.steps-grid > article {
    grid-column: span 4;
}

.features-grid > article {
    grid-column: span 4;
    min-height: 210px;
}

.features-grid > article:nth-child(1),
.features-grid > article:nth-child(4),
.features-grid > article:nth-child(8) {
    grid-column: span 8;
}

.step-card,
.features-grid article,
.plan-card,
.faq-list details,
.final-cta {
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.028)),
        rgba(13, 27, 48, 0.44) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    box-shadow:
        0 24px 68px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.11) !important;
}

.plan-card-pro {
    border-color: rgba(114,228,255,.28) !important;
}

.final-cta {
    overflow: hidden;
}

/* -------------------------
   Responsive
   ------------------------- */

@media (max-width: 980px) {
    #view-dashboard > .semester-section,
    #view-dashboard > .dashboard-upcoming-card,
    #view-dashboard > .add-course-container,
    #view-dashboard > .courses-grid {
        grid-column: 1 / -1;
    }

    .courses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-summary-grid > .analytics-metric-card {
        grid-column: span 6;
    }

    .analytics-summary-grid > .analytics-progress-card {
        grid-column: 1 / -1;
    }

    .account-grid > .account-profile-card,
    .account-grid > .account-details-card,
    .account-grid > .account-data-card,
    .account-grid > .account-feedback-card,
    .account-grid > .account-session-card,
    .account-grid > .danger-zone {
        grid-column: span 6;
    }

    #view-course > .course-settings-card,
    #view-course > .prediction-box {
        grid-column: 1 / -1;
    }

    .features-grid > article,
    .features-grid > article:nth-child(1),
    .features-grid > article:nth-child(4),
    .features-grid > article:nth-child(8) {
        grid-column: span 6;
    }
}

@media (max-width: 700px) {
    .app-container {
        padding: 12px;
        padding-top: max(12px, calc(12px + env(safe-area-inset-top)));
        padding-bottom: 110px;
    }

    #view-dashboard {
        gap: 12px;
    }

    .dashboard-header {
        align-items: stretch;
    }

    .dashboard-card-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .dashboard-card-actions .btn-secondary,
    .dashboard-card-actions .btn-primary {
        width: 100%;
    }

    .dashboard-card-actions .btn-primary:last-child {
        grid-column: 1 / -1;
    }

    .semester-overview .semester-summary,
    .semester-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .summary-col {
        min-height: 98px;
        padding: 13px !important;
        border-radius: 18px;
    }

    .summary-col .value {
        font-size: 1.9rem !important;
    }

    .semester-overview-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .semester-navigation {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .semester-nav-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .courses-grid,
    .calendar-summary-grid,
    .account-grid,
    .analytics-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .analytics-summary-grid > .analytics-metric-card,
    .analytics-summary-grid > .analytics-progress-card,
    .account-grid > .account-profile-card,
    .account-grid > .account-details-card,
    .account-grid > .account-data-card,
    .account-grid > .account-feedback-card,
    .account-grid > .account-session-card,
    .account-grid > .danger-zone {
        grid-column: 1 / -1 !important;
    }

    .analytics-metric-card {
        min-height: 125px !important;
    }

    .calendar-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .glass-card {
        border-radius: 22px !important;
    }

    .glass-nav {
        width: calc(100% - 20px) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        border-radius: 24px !important;
    }

    .nav-btn {
        min-height: 52px;
        font-size: .66rem !important;
    }

    .nav-btn i {
        font-size: 1.25rem !important;
    }

    .steps-grid,
    .features-grid {
        grid-template-columns: 1fr !important;
    }

    .steps-grid > article,
    .features-grid > article,
    .features-grid > article:nth-child(1),
    .features-grid > article:nth-child(4),
    .features-grid > article:nth-child(8) {
        grid-column: auto !important;
    }

    .landing-header {
        margin: 8px 10px 0 !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 470px) {
    .semester-overview .semester-summary,
    .semester-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .summary-col {
        align-items: flex-start !important;
        padding: 12px !important;
    }

    .calendar-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glass-card,
    button,
    .button,
    .nav-btn {
        transition: none !important;
    }
}


/* La barra inferior ahora flota; reservamos el espacio real que ocupa. */
body.nav-visible {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}

/* Estados de foco visibles sin romper la estética. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(114, 228, 255, 0.72);
    outline-offset: 3px;
}

/* En touch evitamos hover fantasma y conservamos rendimiento. */
@media (hover: none) {
    .glass-card:hover {
        transform: none;
    }
}


/* =========================================================
   DARK MODE CALIBRADO
   Menos brillo lechoso, más profundidad y contraste.
   ========================================================= */

:root:not([data-theme="light"]) .glass-card,
:root:not([data-theme="light"]) .glass-nav,
:root:not([data-theme="light"]) .uniparchado-dialog-fallback,
:root:not([data-theme="light"]) .uniparchado-swal,
:root:not([data-theme="light"]) .swal2-popup.uniparchado-swal,
:root:not([data-theme="light"]) .marketing-consent-banner {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.052) 0%,
            rgba(255, 255, 255, 0.022) 24%,
            rgba(255, 255, 255, 0.009) 62%,
            rgba(83, 151, 210, 0.016) 100%
        ),
        var(--liquid-glass) !important;
    border-color: rgba(255, 255, 255, 0.095) !important;
}

:root:not([data-theme="light"]) .glass-card::before,
:root:not([data-theme="light"]) .glass-nav::before,
:root:not([data-theme="light"]) .uniparchado-dialog-fallback::before,
:root:not([data-theme="light"]) .uniparchado-swal::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.070) 0%,
            rgba(255, 255, 255, 0.025) 10%,
            rgba(255, 255, 255, 0.006) 28%,
            transparent 48%
        );
}

:root:not([data-theme="light"]) .summary-col,
:root:not([data-theme="light"]) .parchometro-summary-item,
:root:not([data-theme="light"]) .parchometro-detail-item,
:root:not([data-theme="light"]) .prediction-item,
:root:not([data-theme="light"]) .goal-setting-block,
:root:not([data-theme="light"]) .comparison-stat,
:root:not([data-theme="light"]) .calendar-summary-card,
:root:not([data-theme="light"]) .simulator-result-card,
:root:not([data-theme="light"]) .simulator-goal-card,
:root:not([data-theme="light"]) .account-detail {
    border-color: rgba(255, 255, 255, 0.070) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.010)
        ),
        rgba(5, 13, 26, 0.50) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

:root:not([data-theme="light"]) .summary-col {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.038),
            rgba(255, 255, 255, 0.010)
        ),
        rgba(6, 14, 28, 0.60) !important;
}

:root:not([data-theme="light"]) .semester-overview-header,
:root:not([data-theme="light"]) .course-parchometro-inline {
    border-color: rgba(255, 255, 255, 0.055) !important;
}

:root:not([data-theme="light"]) .parchometro-focus-card,
:root:not([data-theme="light"]) .grade-row,
:root:not([data-theme="light"]) .goal-result-box,
:root:not([data-theme="light"]) .analytics-ranking-item,
:root:not([data-theme="light"]) .calendar-day {
    background: rgba(255, 255, 255, 0.015) !important;
    border-color: rgba(255, 255, 255, 0.055) !important;
}

:root:not([data-theme="light"]) .btn-secondary,
:root:not([data-theme="light"]) .button-ghost,
:root:not([data-theme="light"]) .semester-tab,
:root:not([data-theme="light"]) .calendar-month-button {
    border-color: rgba(255, 255, 255, 0.085) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        ),
        rgba(4, 12, 24, 0.32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 20px rgba(0, 0, 0, 0.16);
}

:root:not([data-theme="light"]) .glass-nav {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.050),
            rgba(255,255,255,.014)
        ),
        rgba(5, 13, 27, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.44),
        inset 0 1px 0 rgba(255,255,255,.055) !important;
}

:root:not([data-theme="light"]) .nav-btn.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.060),
            rgba(255,255,255,.020)
        ),
        rgba(65, 182, 220, 0.035);
}

:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) .uniparchado-dialog-input,
:root:not([data-theme="light"]) .swal2-input {
    border-color: rgba(255, 255, 255, 0.075) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.030),
            rgba(255,255,255,.010)
        ),
        rgba(3, 10, 21, 0.50) !important;
}


/* =========================================================
   LIGHT MODE CALIBRADO V2
   Vidrio claro, no gris cementerio. Menos sombra, más aire.
   ========================================================= */

:root[data-theme="light"] {
    --liquid-glass: rgba(255, 255, 255, 0.56);
    --liquid-glass-soft: rgba(255, 255, 255, 0.34);
    --liquid-glass-hover: rgba(255, 255, 255, 0.70);
    --liquid-glass-strong: rgba(255, 255, 255, 0.68);
    --liquid-border: rgba(255, 255, 255, 0.78);
    --liquid-border-hi: rgba(255, 255, 255, 0.96);
    --liquid-text: rgba(16, 27, 47, 0.96);
    --liquid-muted: rgba(66, 82, 108, 0.70);
    --liquid-faint: rgba(66, 82, 108, 0.50);
    --liquid-shadow:
        0 18px 48px rgba(43, 63, 92, 0.11),
        0 4px 14px rgba(43, 63, 92, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --liquid-shadow-hover:
        0 22px 56px rgba(43, 63, 92, 0.14),
        0 6px 18px rgba(43, 63, 92, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

:root[data-theme="light"] body {
    background-color: #eef5ff !important;
    background-image:
        radial-gradient(circle at 10% -4%, rgba(93, 181, 255, 0.16) 0%, transparent 31%),
        radial-gradient(circle at 92% 5%, rgba(119, 126, 255, 0.10) 0%, transparent 28%),
        radial-gradient(circle at 78% 78%, rgba(73, 214, 178, 0.065) 0%, transparent 30%),
        linear-gradient(180deg, #f1f6ff 0%, #f7faff 54%, #eef4fb 100%) !important;
}

:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .glass-nav,
:root[data-theme="light"] .uniparchado-dialog-fallback,
:root[data-theme="light"] .uniparchado-swal,
:root[data-theme="light"] .swal2-popup.uniparchado-swal {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.47) 45%,
            rgba(240, 247, 255, 0.33) 100%
        ),
        rgba(255, 255, 255, 0.34) !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
    box-shadow: var(--liquid-shadow) !important;
}

:root[data-theme="light"] .glass-card::before,
:root[data-theme="light"] .glass-nav::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.76) 0%,
            rgba(255, 255, 255, 0.28) 12%,
            transparent 42%
        );
    opacity: 0.62;
}

:root[data-theme="light"] .summary-col,
:root[data-theme="light"] .parchometro-summary-item,
:root[data-theme="light"] .parchometro-detail-item,
:root[data-theme="light"] .prediction-item,
:root[data-theme="light"] .goal-setting-block,
:root[data-theme="light"] .comparison-stat,
:root[data-theme="light"] .calendar-summary-card,
:root[data-theme="light"] .simulator-result-card,
:root[data-theme="light"] .simulator-goal-card,
:root[data-theme="light"] .account-detail,
:root[data-theme="light"] .importer-row {
    background:
        linear-gradient(145deg, rgba(255,255,255,.62), rgba(245,249,255,.40)),
        rgba(231, 238, 248, 0.32) !important;
    border-color: rgba(124, 145, 174, 0.17) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 8px 22px rgba(53, 73, 104, 0.055) !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .uniparchado-dialog-input,
:root[data-theme="light"] .swal2-input {
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,249,254,.56)),
        rgba(255,255,255,.45) !important;
    border-color: rgba(117, 139, 168, 0.22) !important;
    color: #162238 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 4px 12px rgba(49, 68, 96, .035) !important;
}

:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .button-ghost,
:root[data-theme="light"] .semester-tab,
:root[data-theme="light"] .calendar-month-button {
    background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(244,248,254,.50)),
        rgba(255,255,255,.40) !important;
    border-color: rgba(117,139,168,.18) !important;
    color: #243149 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 8px 20px rgba(51, 69, 95, .055) !important;
}

:root[data-theme="light"] .glass-nav {
    background:
        linear-gradient(180deg, rgba(255,255,255,.70), rgba(239,245,253,.48)),
        rgba(255,255,255,.42) !important;
    border-color: rgba(255,255,255,.88) !important;
    box-shadow:
        0 20px 54px rgba(55, 72, 101, .15),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

:root[data-theme="light"] .summary-col .value:not(.accent),
:root[data-theme="light"] .parchometro-summary-item strong {
    color: #172238 !important;
}

:root[data-theme="light"] .summary-col .value.accent {
    color: #0792ad !important;
    text-shadow: none !important;
}

/* =========================================================
   NAVBAR LÍQUIDA + INDICADOR DESLIZABLE
   ========================================================= */

.glass-nav {
    position: fixed;
    touch-action: pan-y;
    overflow: visible !important;
}

.nav-liquid-indicator {
    position: absolute;
    z-index: 0;
    top: 8px;
    left: 0;
    height: calc(100% - 16px);
    border-radius: 19px;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
        rgba(87, 190, 225, 0.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 24px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    backdrop-filter: blur(22px) saturate(175%);
    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        width 320ms cubic-bezier(.22,1,.36,1),
        background 180ms ease;
}

.nav-liquid-indicator.is-instant {
    transition: none !important;
}

.glass-nav.is-dragging .nav-liquid-indicator {
    transition:
        transform 90ms linear,
        width 90ms linear;
    background:
        linear-gradient(180deg, rgba(125,235,255,.17), rgba(255,255,255,.045)),
        rgba(81, 191, 227, 0.075);
}

.glass-nav .nav-btn {
    position: relative;
    z-index: 1;
    background: transparent !important;
    box-shadow: none !important;
}

.glass-nav .nav-btn.active {
    background: transparent !important;
}

.glass-nav .nav-btn.nav-drag-target {
    color: var(--liquid-cyan) !important;
    transform: translateY(-1px);
}

:root[data-theme="light"] .nav-liquid-indicator {
    background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(230,243,251,.64)),
        rgba(255,255,255,.56);
    border-color: rgba(255,255,255,.92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 9px 24px rgba(61, 83, 115, .11);
}

/* Selector cuando un PDF trae varias materias. */
.importer-detected-courses {
    margin: 0 0 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(114, 228, 255, 0.16);
    border-radius: 20px;
    background: rgba(114, 228, 255, 0.035);
}

.importer-detected-courses[hidden] {
    display: none !important;
}

.importer-detected-courses p {
    margin-top: 3px;
    font-size: .82rem;
}

@media (max-width: 700px) {
    .importer-detected-courses {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PERFORMANCE PASS — GLASS SIN FREÍR LA GPU
   El blur vive en las superficies grandes. Los controles internos heredan
   la ilusión visual sin crear decenas de capas compositoras costosas.
   ========================================================= */

.summary-col,
.parchometro-summary-item,
.parchometro-detail-item,
.prediction-item,
.goal-setting-block,
.comparison-stat,
.calendar-summary-card,
.simulator-result-card,
.simulator-goal-card,
.account-detail,
.importer-row,
.grade-row,
.btn-secondary,
.button-ghost,
.semester-tab,
.calendar-month-button,
input,
select,
textarea {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.course-card,
.importer-row,
.calendar-reminder-card,
.parchometro-focus-card {
    contain: layout paint style;
}

.importer-row,
.course-card {
    content-visibility: auto;
    contain-intrinsic-size: 88px;
}

/* =========================================================
   NAVBAR MÁS LÍQUIDA
   ========================================================= */

.nav-liquid-indicator {
    overflow: hidden;
    isolation: isolate;
    transform-origin: center center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(255,255,255,.045),
        0 12px 32px rgba(32, 159, 206, .16),
        0 4px 12px rgba(0,0,0,.16);
}

.nav-liquid-indicator::before {
    content: "";
    position: absolute;
    inset: -45%;
    border-radius: 50%;
    background:
        conic-gradient(
            from 210deg,
            rgba(255,255,255,0) 0deg,
            rgba(118,234,255,.20) 70deg,
            rgba(255,255,255,.18) 115deg,
            rgba(255,255,255,0) 190deg,
            rgba(76,196,231,.12) 270deg,
            rgba(255,255,255,0) 360deg
        );
    filter: blur(10px);
    animation: liquid-nav-flow 6s linear infinite;
    opacity: .72;
}

.nav-liquid-indicator::after {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    top: 7%;
    height: 31%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
    filter: blur(2px);
    opacity: .75;
}

.glass-nav.is-dragging .nav-liquid-indicator {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.26),
        0 14px 36px rgba(52, 198, 235, .22),
        0 4px 14px rgba(0,0,0,.18);
}

.glass-nav.is-pressing .nav-liquid-indicator {
    filter: brightness(1.06) saturate(1.08);
}

@keyframes liquid-nav-flow {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-liquid-indicator::before { animation: none !important; }
}

/* Preview de tarjetas: un poquito de vida antes de exportarlas. */
.share-card-preview-shell {
    perspective: 1200px;
}

.share-card-preview-shell canvas {
    transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms ease;
    transform: translateZ(0);
}

@media (hover:hover) and (pointer:fine) {
    .share-card-preview-shell:hover canvas {
        transform: translateY(-4px) rotateX(1.2deg) rotateY(-1.2deg);
        box-shadow: 0 28px 70px rgba(0,0,0,.28);
    }
}


/* =========================================================
   IMPORTADOR — CLASIFICACIÓN DOCUMENTAL
   ========================================================= */

.importer-detection-card {
    padding: 22px;
    border-color: rgba(114, 228, 255, 0.14) !important;
}

.importer-detection-kicker {
    display: inline-block;
    margin-bottom: 5px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--liquid-cyan);
}

.importer-detection-icon {
    font-size: 2rem;
    color: var(--liquid-cyan);
    opacity: .82;
}

.importer-detection-content {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 15px 16px;
    border: 1px solid rgba(114, 228, 255, 0.12);
    border-radius: 18px;
    background: rgba(114, 228, 255, 0.028);
}

.importer-detection-content strong {
    font-size: .98rem;
    color: var(--text-main);
}

.importer-detection-content span {
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-muted);
}

:root[data-theme="light"] .importer-detection-content {
    border-color: rgba(28, 155, 190, 0.13);
    background: rgba(54, 196, 228, 0.045);
}


/* =========================================================
   IMPORTADOR V4 — MODELO ACADÉMICO
   ========================================================= */

.importer-v4-preview {
    display: grid;
    gap: 18px;
}

.import-v4-eyebrow {
    display: inline-block;
    margin-bottom: 4px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--liquid-cyan);
}

.import-v4-select-all,
.import-v4-current,
.import-v4-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.import-v4-select-all input,
.import-v4-current input,
.import-v4-check input {
    width: 18px;
    height: 18px;
    accent-color: #67e8f9;
}

.import-v4-groups {
    display: grid;
    gap: 18px;
}

.import-v4-semester {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.095);
    border-radius: 22px;
    background: rgba(255,255,255,.025);
}

.import-v4-semester-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .5fr);
    gap: 14px;
    align-items: end;
}

.import-v4-semester-name {
    width: 100%;
    margin-top: 5px;
    font-size: 1.05rem;
    font-weight: 800;
}

.import-v4-existing,
.import-v4-semester-meta label,
.import-v4-course-fields label,
.import-v4-scale-box label {
    display: grid;
    gap: 6px;
}

.import-v4-existing > span,
.import-v4-semester-meta label > span,
.import-v4-course-fields label > span,
.import-v4-scale-box label > span {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.import-v4-semester-meta {
    display: grid;
    grid-template-columns: 100px 130px minmax(120px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.import-v4-current {
    min-height: 44px;
    padding-inline: 8px;
}

.import-v4-course-list {
    display: grid;
    gap: 10px;
}

.import-v4-course {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background: rgba(0,0,0,.08);
}

.import-v4-check {
    align-self: start;
    padding-top: 11px;
}

.import-v4-course-main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.import-v4-course-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-v4-course-title input {
    min-width: 0;
    flex: 1;
    font-weight: 700;
}

.import-v4-code {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(103,232,249,.18);
    background: rgba(103,232,249,.07);
    color: var(--liquid-cyan);
    font-size: .7rem;
    font-weight: 800;
}

.import-v4-course-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 10px;
}

.import-v4-warning {
    margin: 0;
    color: #fbbf24;
    font-size: .78rem;
    line-height: 1.45;
}

.import-v4-evals {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 8px;
}

.import-v4-evals summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
}

.import-v4-eval-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.import-v4-eval-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) 150px 100px 100px;
    gap: 8px;
}

.import-v4-scale-box {
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 16px;
    align-items: end;
    padding: 14px 16px;
    border: 1px solid rgba(250,204,21,.20);
    border-radius: 18px;
    background: rgba(250,204,21,.055);
}

.import-v4-scale-box:not([hidden]) {
    display: grid;
}

.import-v4-scale-box p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .82rem;
}

.import-v4-savebar {
    position: sticky;
    bottom: 86px;
    z-index: 4;
    padding: 14px;
    border-radius: 18px;
    background: rgba(6,13,27,.78);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255,255,255,.11);
}

.status-planeada,
.course-status-badge.status-planeada {
    color: #93c5fd;
    border-color: rgba(147,197,253,.24);
    background: rgba(147,197,253,.08);
}

@media (max-width: 880px) {
    .import-v4-semester-head,
    .import-v4-scale-box {
        grid-template-columns: 1fr;
    }

    .import-v4-semester-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-v4-course-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-v4-eval-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .import-v4-semester {
        padding: 12px;
        border-radius: 18px;
    }

    .import-v4-semester-meta,
    .import-v4-course-fields,
    .import-v4-eval-row {
        grid-template-columns: 1fr;
    }

    .import-v4-course {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .import-v4-savebar {
        bottom: 76px;
    }
}


/* =========================================================
   IMPORTADOR V5 — CALIDAD / RELEASE
   ========================================================= */

.import-quality-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
}

.import-quality-card[hidden] {
    display: none;
}

.import-quality-score {
    display: flex;
    align-items: baseline;
    min-width: 76px;
    gap: 2px;
}

.import-quality-score strong {
    font-size: 1.6rem;
    line-height: 1;
}

.import-quality-score span {
    color: var(--text-muted);
    font-size: .78rem;
}

.import-quality-title {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.import-quality-title span {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    background: rgba(255,255,255,.055);
    color: var(--text-muted);
}

.import-quality-copy p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.48;
}

.import-quality-card[data-level="alta"] {
    border-color: rgba(52,211,153,.22);
    background: rgba(52,211,153,.045);
}

.import-quality-card[data-level="media"] {
    border-color: rgba(250,204,21,.22);
    background: rgba(250,204,21,.045);
}

.import-quality-card[data-level="baja"] {
    border-color: rgba(248,113,113,.22);
    background: rgba(248,113,113,.045);
}

@media (max-width: 560px) {
    .import-quality-card {
        grid-template-columns: 1fr;
    }
}


/* Mobile consent banner must not create horizontal overflow. */
.marketing-consent-banner {
    position: fixed !important;
    width: auto !important;
    max-width: none !important;
}