/*
|--------------------------------------------------------------------------
| EDUCONTROL PREVIEW THEME V2
|--------------------------------------------------------------------------
| Ajustes visuales para preview.educontrol.cl
| Objetivo: sidebar compacto, barra comercial menos invasiva y dashboard más limpio.
|--------------------------------------------------------------------------
*/

:root {
    --ec-blue-dark: #071B4A;
    --ec-blue: #0D6EFD;
    --ec-blue-2: #0B3B91;
    --ec-sky: #22A7F0;
    --ec-green: #63C132;
    --ec-yellow: #FFB703;
    --ec-orange: #F97316;
    --ec-bg: #F4F7FB;
    --ec-card: #FFFFFF;
    --ec-text: #1E293B;
    --ec-muted: #64748B;
    --ec-border: #E2E8F0;
}

/* =========================
   BASE
========================= */
body {
    background: var(--ec-bg) !important;
    color: var(--ec-text) !important;
}

h1, h2, h3, h4 {
    color: var(--ec-blue-dark) !important;
}

a {
    color: var(--ec-blue);
}

/* =========================
   BANNER PREVIEW
========================= */
.preview-banner {
    min-height: 48px !important;
    padding: 7px 24px !important;
    background: linear-gradient(90deg, var(--ec-blue-dark), var(--ec-blue-2), var(--ec-blue)) !important;
    box-shadow: 0 4px 14px rgba(7, 27, 74, .16) !important;
}

.preview-banner__icon {
    width: 34px !important;
    height: 34px !important;
}

.preview-banner__text strong {
    font-size: 13px !important;
}

.preview-banner__text small {
    font-size: 12px !important;
}

/* =========================
   HEADER
========================= */
.app-header {
    background: linear-gradient(135deg, var(--ec-blue-dark), #0B3B91, var(--ec-blue)) !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 26px rgba(7, 27, 74, .18) !important;
}

.app-header strong,
.app-header small,
.app-header span,
.app-header a {
    color: #ffffff !important;
}

.app-logo {
    background: rgba(255, 255, 255, .14) !important;
    border-radius: 16px !important;
    padding: 6px !important;
}

.app-logo img {
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* =========================
   SIDEBAR COMPACTO
========================= */
.app-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--ec-border) !important;
    box-shadow: 8px 0 30px rgba(15, 23, 42, .06) !important;
}

/* Corrige bloque superior cortado */
.sidebar-title {
    min-height: auto !important;
    height: auto !important;
    padding: 14px 14px !important;
    margin: 10px 12px 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #EAF6FF, #F0FFF4) !important;
    border: 1px solid #DCEBFF !important;
    overflow: visible !important;
}

.sidebar-title strong {
    display: block !important;
    color: var(--ec-blue-dark) !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    white-space: normal !important;
}

.sidebar-title small {
    display: block !important;
    margin-top: 6px !important;
    color: var(--ec-muted) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.sidebar-section {
    margin-top: 18px !important;
    padding: 0 18px !important;
    color: var(--ec-blue) !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

.sidebar-menu a {
    color: #334155 !important;
    border-radius: 14px !important;
    margin: 3px 10px !important;
    padding: 11px 14px !important;
    transition: all .18s ease !important;
}

.sidebar-menu a:hover {
    background: #EAF6FF !important;
    color: var(--ec-blue-dark) !important;
    transform: translateX(3px);
}

.sidebar-menu a.active,
.sidebar-menu a[aria-current="page"] {
    background: linear-gradient(135deg, var(--ec-blue), var(--ec-sky)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(13, 110, 253, .24) !important;
}

.sidebar-toggle {
    background: var(--ec-blue) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(13, 110, 253, .24) !important;
}

/* =========================
   DASHBOARD / CONTENEDORES
========================= */

/* Quita rosado heredado en paneles principales */
main,
.app-main,
.content,
.page-content,
.dashboard,
.dashboard-wrap,
.dashboard-container,
.panel-principal,
.card-main {
    background: transparent !important;
}

/* Contenedores grandes con fondo limpio */
.app-content > section,
.app-content > div,
main > section,
main > div {
    border-color: #E6EEF7 !important;
}

/* Tarjeta de bienvenida grande */
main h1,
.app-content h1,
.page-content h1 {
    color: var(--ec-blue-dark) !important;
}

/* Tarjetas generales */
.card,
.panel,
.box,
.module-card,
.dashboard-card,
.stat-card,
.content-card,
.main-card,
section.card,
.form-card {
    background: var(--ec-card) !important;
    border-color: var(--ec-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
}

/* Dashboard cards con línea superior */
.dashboard-card,
.stat-card,
.card:has(strong),
.card:has(h3) {
    position: relative;
    overflow: hidden;
}

.dashboard-card::before,
.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg, var(--ec-blue), var(--ec-sky));
}

/* Si el navegador no soporta :has, igual deja las tarjetas limpias */
.card {
    border-top: 4px solid rgba(13,110,253,.10) !important;
}

/* Accesos rápidos */
a[href*="dashboard"],
a[href*="alerta"],
a[href*="reportes"],
a[href*="libro_clases"],
a[href*="pie"] {
    text-decoration: none !important;
}

/* =========================
   BOTONES
========================= */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
a.btn {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.btn-primary,
button.primary,
input[type="submit"],
.btn-guardar,
.btn-success {
    background: linear-gradient(135deg, var(--ec-blue), var(--ec-sky)) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(13, 110, 253, .22) !important;
}

.btn-secondary,
.btn-light,
button.secondary {
    background: #EAF6FF !important;
    color: var(--ec-blue-dark) !important;
    border: 1px solid #D9EAFF !important;
}

/* =========================
   FORMULARIOS Y TABLAS
========================= */
input,
select,
textarea {
    border-color: #CBD5E1 !important;
    border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--ec-blue) !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .13) !important;
}

table {
    background: #ffffff !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

thead,
table thead tr,
th {
    background: #EAF6FF !important;
    color: var(--ec-blue-dark) !important;
}

td, th {
    border-color: #E2E8F0 !important;
}

tbody tr:hover {
    background: #F8FBFF !important;
}

/* =========================
   ALERTAS
========================= */
.alert-success,
.success,
.estado-activo {
    background: #DCFCE7 !important;
    color: #14532D !important;
    border-color: #86EFAC !important;
}

.alert-warning,
.warning {
    background: #FFF7DD !important;
    color: #7C2D12 !important;
    border-color: #FFE08A !important;
}

.alert-danger,
.error,
.danger {
    background: #FEE2E2 !important;
    color: #7F1D1D !important;
    border-color: #FCA5A5 !important;
}

/* =========================
   BARRA COMERCIAL V2
========================= */
.preview-commercial-bar {
    bottom: 14px !important;
    width: min(620px, calc(100% - 28px)) !important;
    padding: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 12px 38px rgba(7, 27, 74, 0.18) !important;
    backdrop-filter: blur(14px) !important;
}

.preview-commercial-btn {
    padding: 10px 15px !important;
    font-size: 13px !important;
}

.preview-commercial-btn.primary {
    background: linear-gradient(135deg, var(--ec-blue), var(--ec-green)) !important;
}

/* Evita que la barra tape tanto contenido */
body {
    padding-bottom: 92px !important;
}

/* =========================
   MODALES
========================= */
.preview-module-box,
.preview-commercial-box {
    border-radius: 28px !important;
}

.preview-module-actions a,
.preview-commercial-btn.primary,
.module-info-primary {
    background: linear-gradient(135deg, var(--ec-blue), var(--ec-green)) !important;
    color: #ffffff !important;
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #EEF4FA;
}

::-webkit-scrollbar-thumb {
    background: #B7CCE0;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #86A7C5;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
    .preview-commercial-bar {
        width: min(520px, calc(100% - 24px)) !important;
    }
}

@media (max-width: 700px) {
    .preview-banner {
        padding: 7px 14px !important;
    }

    .preview-commercial-bar {
        border-radius: 22px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: calc(100% - 24px) !important;
    }

    .preview-commercial-btn {
        width: 100% !important;
    }

    body {
        padding-bottom: 180px !important;
    }
}