/* ==========================================================================
   CONECTA2NIC - Tema compartido (sitio público y panel)
   Tokens de marca + personalización de Bootstrap 5.3 + modo claro/oscuro.
   Colores extraídos de assets/img/logo-full.png (#1A5B93) y
   assets/img/logo-full-yellow.png (#FCC018).
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* Marca */
    --c2n-blue:        #1A5B93;
    --c2n-blue-700:    #154A78;
    --c2n-blue-800:    #0F3A60;
    --c2n-blue-900:    #0A2A47;
    --c2n-blue-50:     #EAF1F8;
    --c2n-yellow:      #FCC018;
    --c2n-yellow-600:  #E5AC0B;
    --c2n-yellow-50:   #FFF7DC;
    --c2n-ink:         #0F172A;

    /* Superficies */
    --c2n-surface:     #FFFFFF;
    --c2n-surface-alt: #F8FAFC;
    --c2n-muted:       #475569;
    --c2n-subtle:      #64748B;
    --c2n-link:        #1A5B93;

    /* Forma y movimiento */
    --c2n-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --c2n-shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10);
    --c2n-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --c2n-fast: 150ms;
    --c2n-base: 200ms;

    /* Bootstrap */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-bg: #FFFFFF;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #0F172A;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-emphasis-color: #0F172A;
    --bs-secondary-color: #475569;
    --bs-tertiary-color: #64748B;
    --bs-secondary-bg: #F1F5F9;
    --bs-tertiary-bg: #F8FAFC;
    --bs-border-color: #E2E8F0;
    --bs-border-color-translucent: rgba(15, 23, 42, 0.08);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.625rem;
    --bs-border-radius-xl: 0.875rem;

    --bs-primary: #1A5B93;
    --bs-primary-rgb: 26, 91, 147;
    --bs-primary-text-emphasis: #0F3A60;
    --bs-primary-bg-subtle: #EAF1F8;
    --bs-primary-border-subtle: #BFD4E8;
    --bs-warning: #FCC018;
    --bs-warning-rgb: 252, 192, 24;
    --bs-warning-text-emphasis: #6B4E00;
    --bs-warning-bg-subtle: #FFF7DC;
    --bs-warning-border-subtle: #F7DD8B;
    --bs-success: #047857;
    --bs-success-rgb: 4, 120, 87;
    --bs-danger: #B91C1C;
    --bs-danger-rgb: 185, 28, 28;

    --bs-link-color: #1A5B93;
    --bs-link-color-rgb: 26, 91, 147;
    --bs-link-hover-color: #0F3A60;
    --bs-link-hover-color-rgb: 15, 58, 96;
    --bs-focus-ring-color: rgba(26, 91, 147, 0.25);
    --bs-heading-color: #0F172A;
}

[data-bs-theme="dark"] {
    --c2n-surface:     #111827;
    --c2n-surface-alt: #0F172A;
    --c2n-muted:       #CBD5E1;
    --c2n-subtle:      #94A3B8;
    --c2n-link:        #8CBBE6;
    --c2n-blue-50:     rgba(26, 91, 147, 0.22);
    --c2n-yellow-50:   rgba(252, 192, 24, 0.12);
    --c2n-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --c2n-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55);

    --bs-body-bg: #0B1120;
    --bs-body-bg-rgb: 11, 17, 32;
    --bs-body-color: #F8FAFC;
    --bs-body-color-rgb: 248, 250, 252;
    --bs-emphasis-color: #F8FAFC;
    --bs-secondary-color: #CBD5E1;
    --bs-tertiary-color: #94A3B8;
    --bs-secondary-bg: #1E293B;
    --bs-tertiary-bg: #111827;
    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-heading-color: #F8FAFC;

    --bs-primary-text-emphasis: #A9CCEE;
    --bs-primary-bg-subtle: rgba(26, 91, 147, 0.22);
    --bs-primary-border-subtle: rgba(90, 150, 210, 0.35);
    --bs-warning-text-emphasis: #FCD567;
    --bs-warning-bg-subtle: rgba(252, 192, 24, 0.12);
    --bs-warning-border-subtle: rgba(252, 192, 24, 0.3);

    --bs-link-color: #8CBBE6;
    --bs-link-color-rgb: 140, 187, 230;
    --bs-link-hover-color: #B7D5F1;
    --bs-link-hover-color-rgb: 183, 213, 241;
    --bs-focus-ring-color: rgba(140, 187, 230, 0.3);
    color-scheme: dark;
}

/* Base ---------------------------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; transition: background-color var(--c2n-base) var(--c2n-ease), color var(--c2n-base) var(--c2n-ease); }
h1, h2, .display-font { font-family: 'Exo 2', var(--bs-font-sans-serif); font-weight: 700; letter-spacing: -0.01em; }
h3, h4, h5, h6 { font-weight: 600; }
.text-secondary { color: var(--bs-secondary-color) !important; }
.icon { flex-shrink: 0; vertical-align: -0.2em; }
[x-cloak] { display: none !important; }
::selection { background: var(--c2n-yellow); color: var(--c2n-ink); }

/* Logos por tema */
.logo-on-dark { display: none; }
[data-bs-theme="dark"] .logo-on-light { display: none; }
[data-bs-theme="dark"] .logo-on-dark { display: inline-block; }

/* Selector de tema */
.theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Botones ------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.5625rem;
    --bs-btn-font-size: 0.9375rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: color var(--c2n-fast) var(--c2n-ease), background-color var(--c2n-fast) var(--c2n-ease),
                border-color var(--c2n-fast) var(--c2n-ease), box-shadow var(--c2n-fast) var(--c2n-ease);
}
.btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-size: 0.8125rem; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.75rem; --bs-btn-font-size: 1rem; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--c2n-blue);
    --bs-btn-border-color: var(--c2n-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--c2n-blue-700);
    --bs-btn-hover-border-color: var(--c2n-blue-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--c2n-blue-800);
    --bs-btn-active-border-color: var(--c2n-blue-800);
    --bs-btn-disabled-bg: var(--c2n-blue);
    --bs-btn-disabled-border-color: var(--c2n-blue);
    --bs-btn-focus-shadow-rgb: 26, 91, 147;
}

/* CTA principal: amarillo de marca con texto oscuro (contraste AAA) */
.btn-accent {
    --bs-btn-color: #0F172A;
    --bs-btn-bg: var(--c2n-yellow);
    --bs-btn-border-color: var(--c2n-yellow);
    --bs-btn-hover-color: #0F172A;
    --bs-btn-hover-bg: var(--c2n-yellow-600);
    --bs-btn-hover-border-color: var(--c2n-yellow-600);
    --bs-btn-active-color: #0F172A;
    --bs-btn-active-bg: #D39E06;
    --bs-btn-active-border-color: #D39E06;
    --bs-btn-disabled-color: #0F172A;
    --bs-btn-disabled-bg: var(--c2n-yellow);
    --bs-btn-disabled-border-color: var(--c2n-yellow);
    --bs-btn-focus-shadow-rgb: 252, 192, 24;
}

.btn-outline-primary {
    --bs-btn-color: var(--c2n-blue);
    --bs-btn-border-color: var(--c2n-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--c2n-blue);
    --bs-btn-hover-border-color: var(--c2n-blue);
    --bs-btn-active-bg: var(--c2n-blue-700);
    --bs-btn-active-border-color: var(--c2n-blue-700);
    --bs-btn-focus-shadow-rgb: 26, 91, 147;
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8CBBE6; --bs-btn-border-color: rgba(140, 187, 230, 0.5); }

/* Neutro con borde fino */
.btn-quiet {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: #CBD5E1;
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: #CBD5E1;
    --bs-btn-focus-shadow-rgb: 26, 91, 147;
}
[data-bs-theme="dark"] .btn-quiet { --bs-btn-hover-border-color: rgba(255,255,255,0.18); --bs-btn-active-border-color: rgba(255,255,255,0.18); }

.btn-icon { --bs-btn-padding-x: 0; width: 2.5rem; height: 2.5rem; }
.btn-icon.btn-sm { width: 2rem; height: 2rem; }

/* Estado de carga (aria-busy lo pone Alpine) */
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
    content: ''; position: absolute; width: 1rem; height: 1rem;
    border: 2px solid currentColor; border-color: rgba(255,255,255,0.45); border-top-color: #fff;
    border-radius: 50%; animation: c2n-spin 600ms linear infinite;
}
.btn-accent[aria-busy="true"]::after, .btn-quiet[aria-busy="true"]::after { border-color: rgba(15,23,42,0.25); border-top-color: #0F172A; }
@keyframes c2n-spin { to { transform: rotate(360deg); } }

/* Formularios --------------------------------------------------------------- */
.form-control, .form-select {
    border-color: #CBD5E1;
    transition: border-color var(--c2n-fast) var(--c2n-ease), box-shadow var(--c2n-fast) var(--c2n-ease);
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: rgba(255,255,255,0.14); background-color: #0F172A; }
.form-control:focus, .form-select:focus { border-color: var(--c2n-blue); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }
.form-control::placeholder { color: #94A3B8; }
.form-label { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.375rem; }
.form-text { color: var(--c2n-subtle); }
.form-check-input:checked { background-color: var(--c2n-blue); border-color: var(--c2n-blue); }
.form-check-input:focus { border-color: var(--c2n-blue); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }
.form-switch .form-check-input { width: 2.25em; }

/* Componentes Bootstrap ----------------------------------------------------- */
.card { --bs-card-border-color: var(--bs-border-color); --bs-card-bg: var(--c2n-surface); --bs-card-cap-bg: transparent; }
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--c2n-blue);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-box-shadow: var(--c2n-shadow-md);
    --bs-dropdown-bg: var(--c2n-surface);
    box-shadow: var(--bs-dropdown-box-shadow);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--c2n-blue); }
.pagination { --bs-pagination-active-bg: var(--c2n-blue); --bs-pagination-active-border-color: var(--c2n-blue); --bs-pagination-color: var(--bs-link-color); --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }
.offcanvas { --bs-offcanvas-bg: var(--c2n-surface); --bs-offcanvas-border-color: var(--bs-border-color); }
.modal { --bs-modal-bg: var(--c2n-surface); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--bs-border-color); --bs-table-hover-bg: rgba(26, 91, 147, 0.035); }
[data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(255, 255, 255, 0.03); }
.badge { font-weight: 600; letter-spacing: 0.01em; }
.text-bg-accent { background-color: var(--c2n-yellow) !important; color: var(--c2n-ink) !important; }
.alert { --bs-alert-border-radius: var(--bs-border-radius); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}