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

/* ============================================================
   Speak Up Virtual - Guía de marca
   Variables de marca + tokens que se adaptan al tema.
   ============================================================ */

:root {
    --su-navy: #0F2D52;
    --su-navy-rgb: 15, 45, 82;
    --su-blue: #4A80B8;
    --su-light: #8BB8DA;
    --su-red: #E53935;
    --su-text: #333333;
}

/* ---------- Tema claro (predeterminado de la marca) ---------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: #0F2D52;
    --bs-primary-rgb: 15, 45, 82;
    --bs-link-color: #0F2D52;
    --bs-link-color-rgb: 15, 45, 82;
    --bs-link-hover-color: #4A80B8;
    --bs-body-color: #333333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-body-bg: #F5F7FA;
    --bs-border-color: #E2E8F0;
    --bs-secondary-color: #64748B;

    --su-surface: #FFFFFF;
    --su-surface-muted: #EEF3F9;
    --su-heading: #0F2D52;
    --su-muted: #64748B;
    --su-soft: #EAF2FA;
    --su-primary: #0F2D52;
    --su-primary-contrast: #FFFFFF;
    --su-info-bg: #3B6EA5;
    --su-danger-bg: #C62828;
}

/* ---------- Tema oscuro ---------- */
[data-bs-theme="dark"] {
    --bs-primary: #4A80B8;
    --bs-primary-rgb: 74, 128, 184;
    --bs-link-color: #8BB8DA;
    --bs-link-color-rgb: 139, 184, 218;
    --bs-link-hover-color: #FFFFFF;
    --bs-body-color: #E4E9F0;
    --bs-body-color-rgb: 228, 233, 240;
    --bs-body-bg: #121826;
    --bs-border-color: #2B3444;
    --bs-secondary-color: #A7B1C2;

    --su-surface: #1B2230;
    --su-surface-muted: #222B3B;
    --su-heading: #EAF0F8;
    --su-muted: #A7B1C2;
    --su-soft: #202A3C;
    --su-primary: #3B6EA5;
    --su-primary-contrast: #FFFFFF;
    --su-info-bg: #3B6EA5;
    --su-danger-bg: #C62828;

    /* Superficies de Bootstrap dentro de tarjetas/modales */
    --bs-card-bg: #1B2230;
    --bs-modal-bg: #1B2230;
    --bs-tertiary-bg: #1B2230;
}

/* ============================================================
   Base
   ============================================================ */

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.fw-semibold, .fw-bold,
.su-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--su-heading);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.text-su-navy { color: var(--su-heading) !important; }
.text-su-blue { color: var(--su-blue) !important; }
.text-su-muted { color: var(--su-muted) !important; }
.bg-su-navy { background-color: var(--su-navy) !important; color: #fff; }
.bg-su-light { background-color: var(--su-soft) !important; }
.rounded-12 { border-radius: 12px; }

/* ============================================================
   Sidebar (siempre azul marino de marca)
   ============================================================ */

.su-sidebar {
    background-color: var(--su-navy) !important;
    background-image: linear-gradient(180deg, #0F2D52 0%, #123763 100%) !important;
}
.su-sidebar .brand-link,
.su-sidebar .brand-link .brand-text,
.su-sidebar .brand-link:hover {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
.su-sidebar .nav-sidebar .nav-link,
.su-sidebar .nav-sidebar .nav-link p,
.su-sidebar .sidebar-search {
    color: rgba(255, 255, 255, 0.88) !important;
}
.su-sidebar .nav-sidebar .nav-link:hover,
.su-sidebar .nav-sidebar .nav-link:focus {
    background-color: rgba(139, 184, 218, 0.18) !important;
    color: #ffffff !important;
}
.su-sidebar .nav-sidebar .nav-link.active {
    background-color: #2F6299 !important;
    color: #ffffff !important;
}
.su-sidebar .nav-header {
    color: var(--su-light) !important;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 600;
    opacity: .95;
}
.su-sidebar .nav-sidebar .nav-link .nav-icon {
    color: var(--su-light) !important;
}
.su-sidebar .nav-sidebar .nav-link.active .nav-icon {
    color: #ffffff !important;
}
.su-sidebar .nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
}

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

.btn-primary {
    --bs-btn-bg: var(--su-primary);
    --bs-btn-border-color: var(--su-primary);
    --bs-btn-color: var(--su-primary-contrast);
    --bs-btn-hover-bg: #16406f;
    --bs-btn-hover-border-color: #16406f;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #0b2340;
    --bs-btn-active-border-color: #0b2340;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-hover-bg: #5b92c9;
    --bs-btn-hover-border-color: #5b92c9;
    --bs-btn-active-bg: #3f74aa;
    --bs-btn-active-border-color: #3f74aa;
}
.btn-secondary {
    --bs-btn-bg: var(--su-surface);
    --bs-btn-color: var(--su-heading);
    --bs-btn-border-color: var(--su-primary);
    --bs-btn-hover-bg: var(--su-soft);
    --bs-btn-hover-color: var(--su-heading);
    --bs-btn-hover-border-color: var(--su-primary);
    --bs-btn-active-bg: var(--su-soft);
    --bs-btn-active-color: var(--su-heading);
    --bs-btn-active-border-color: var(--su-primary);
    font-weight: 600;
}
.btn-accent {
    background-color: var(--su-danger-bg);
    border-color: var(--su-danger-bg);
    color: #fff;
    font-weight: 600;
}
.btn-accent:hover { background-color: #a71d1d; border-color: #a71d1d; color: #fff; }
.btn, .form-control, .form-select { min-height: 44px; border-radius: .5rem; }
.btn-sm, .btn-group-sm > .btn { min-height: 34px; }

/* ============================================================
   Tarjetas / tablas / superficies
   ============================================================ */

.card {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background-color: var(--su-surface);
    box-shadow: 0 1px 2px rgba(15, 45, 82, 0.06);
}
[data-bs-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.card-primary.card-outline { border-top-color: var(--su-primary); }
.card-header {
    background-color: var(--su-surface);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--su-heading);
}
.list-group-item {
    background-color: var(--su-surface);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
.table thead th {
    background-color: var(--su-surface-muted);
    color: var(--su-heading);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
}
.table td, .table th { vertical-align: middle; }
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: var(--su-soft);
    --bs-table-hover-color: var(--bs-body-color);
}

/* ============================================================
   Small boxes (indicadores)
   ============================================================ */

.small-box {
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 45, 82, 0.12);
    color: #fff;
}
.small-box .inner h3,
.small-box .inner p,
.small-box .small-box-icon,
.small-box-footer {
    color: #fff !important;
}
.small-box .small-box-icon {
    color: rgba(255, 255, 255, 0.4) !important;
}
.small-box.bg-primary { background-color: var(--su-navy) !important; }
.small-box.bg-info { background-color: var(--su-info-bg) !important; }
.small-box.bg-danger { background-color: var(--su-danger-bg) !important; }
.small-box.bg-secondary {
    background-color: var(--su-light) !important;
    color: var(--su-navy);
}
.small-box.bg-secondary .inner h3,
.small-box.bg-secondary .inner p,
.small-box.bg-secondary .small-box-icon,
.small-box.bg-secondary .small-box-footer {
    color: var(--su-navy) !important;
}
.small-box.bg-secondary .small-box-icon {
    color: rgba(15, 45, 82, 0.3) !important;
}

/* ============================================================
   Navbar / header
   ============================================================ */

.app-header { border-bottom: 1px solid var(--bs-border-color); }
.navbar-brand { font-family: 'Montserrat', sans-serif; }
.app-content-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
}

/* ============================================================
   Formularios
   ============================================================ */

.form-label { font-weight: 600; color: var(--su-heading); }
.form-control:focus, .form-select:focus {
    border-color: var(--su-blue);
    box-shadow: 0 0 0 .2rem rgba(74, 128, 184, .25);
}
.form-text { color: var(--su-muted); }

/* ============================================================
   Auth
   ============================================================ */

body.login-page,
body.register-page,
body.lockscreen-page,
body.error-page {
    font-family: 'Poppins', system-ui, sans-serif;
    background: linear-gradient(135deg, #0F2D52 0%, #4A80B8 100%) !important;
    color: #ffffff;
}
body.login-page .login-logo a,
body.register-page .register-logo a,
body.login-page .login-logo,
body.register-page .register-logo {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
body.login-page .login-logo a,
body.register-page .register-logo a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
body.login-page .card,
body.register-page .card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 18px 45px rgba(15, 45, 82, .35);
    background-color: #ffffff;
    color: #333333;
}
body.login-page .card-header h3.card-title,
body.register-page .card-header h3.card-title {
    font-family: 'Montserrat', sans-serif;
    color: #0F2D52;
    font-weight: 600;
}
body.login-page .card .form-label,
body.register-page .card .form-label { color: #0F2D52; }
body.login-page .card a,
body.register-page .card a { color: #0F2D52; }
.su-auth-logo { max-width: 220px; }
.text-su-navy { color: var(--su-heading) !important; }