/* ============================================================
   WaService · Panel de administración
   Sistema visual basado en el Libro de Marca de Icarus Apps
   Azul Icarus #1f2bff · Sky Blue #246bff · Aether Cyan #19c2d6
   Tipografía: Montserrat
   ============================================================ */

:root {
    /* --- Colores de marca --- */
    --icarus-blue: #1f2bff;
    --sky-blue: #246bff;
    --aether-cyan: #19c2d6;
    --icarus-gradient: linear-gradient(135deg, #1f2bff 0%, #246bff 50%, #19c2d6 100%);
    --admin-gradient: linear-gradient(135deg, #00004c 0%, #060970 55%, #07215d 100%);

    /* --- Escala primaria (Icarus Blue) --- */
    --primary-50: #fbf8ff;
    --primary-100: #cfcfff;
    --primary-200: #a3a6ff;
    --primary-300: #777dff;
    --primary-400: #4b54ff;
    --primary-500: #1f2bff;
    --primary-600: #1922db;
    --primary-700: #131ab7;
    --primary-800: #0c1194;
    --primary-900: #060970;
    --primary-950: #00004c;

    /* --- Escala secundaria (Sky Blue) --- */
    --sky-50: #faf8ff;
    --sky-100: #cfdcff;
    --sky-200: #a4c0ff;
    --sky-300: #7aa3ff;
    --sky-400: #4f87ff;
    --sky-500: #246bff;
    --sky-600: #1d58d6;
    --sky-700: #1646ae;
    --sky-800: #0e3385;
    --sky-900: #07215d;
    --sky-950: #000e34;

    /* --- Escala de acento (Aether Cyan) --- */
    --cyan-50: #f6feff;
    --cyan-100: #caf2f7;
    --cyan-200: #71dae6;
    --cyan-300: #45cede;
    --cyan-500: #19c2d6;
    --cyan-600: #149fb0;
    --cyan-700: #0f7c8a;
    --cyan-800: #0a5a63;
    --cyan-900: #05373d;
    --cyan-950: #001417;

    --ink: #07215d; /* títulos */
    --surface: #f4f6ff; /* fondo general */

    /* --- Overrides de Bootstrap --- */
    --bs-primary: #1f2bff;
    --bs-primary-rgb: 31,43,255;
    --bs-link-color: #1f2bff;
    --bs-link-color-rgb: 31,43,255;
    --bs-link-hover-color: #131ab7;
    --bs-link-hover-color-rgb: 19,26,183;
    --bs-body-color: #2b2f45;
    --bs-body-font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-border-radius: .6rem;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    font-family: var(--bs-body-font-family);
    color: var(--bs-body-color);
    background-color: var(--surface);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}

/* Foco accesible en azul de marca */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    border-color: var(--sky-400);
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem rgba(36, 107, 255, .5);
}

/* ---------- Utilidades de marca ---------- */
.text-brand { color: var(--icarus-blue) !important; }
.text-acc { color: var(--icarus-blue) !important; }
.bg-brand-gradient { background: var(--icarus-gradient) !important; }
.text-gradient {
    background: var(--icarus-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--icarus-blue); /* fallback */
}

/* ---------- Mapeo de "primary" al azul Icarus ---------- */
.btn-primary {
    --bs-btn-bg: #1f2bff;
    --bs-btn-border-color: #1f2bff;
    --bs-btn-hover-bg: #131ab7;
    --bs-btn-hover-border-color: #131ab7;
    --bs-btn-active-bg: #0c1194;
    --bs-btn-active-border-color: #0c1194;
    --bs-btn-disabled-bg: #1f2bff;
    --bs-btn-disabled-border-color: #1f2bff;
}

.bg-primary { background-color: var(--icarus-blue) !important; }
.text-primary { color: var(--icarus-blue) !important; }
.text-bg-primary { background-color: var(--icarus-blue) !important; color: #fff !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--icarus-blue) !important; }
.link-primary { color: var(--icarus-blue) !important; }

/* ---------- Botones de marca / acento (gradiente) ---------- */
.btn-acc, .btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    background: var(--icarus-gradient);
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(31, 43, 255, .25);
}
.btn-acc:hover, .btn-brand:hover {
    color: #fff;
    filter: brightness(1.07);
    box-shadow: 0 4px 14px rgba(31, 43, 255, .32);
}
.btn-acc:active, .btn-brand:active { filter: brightness(.94); }

.btn-outline-brand {
    color: var(--icarus-blue);
    border: 1px solid var(--icarus-blue);
    background: transparent;
    font-weight: 600;
}
.btn-outline-brand:hover { background: var(--icarus-blue); color: #fff; }

/* ---------- Navbar de administración (navy de marca) ---------- */
.navbar-adm { background: var(--admin-gradient); }
.navbar-adm .navbar-brand,
.navbar-adm .nav-link { color: rgba(226, 232, 255, .85) !important; }
.navbar-adm .nav-link:hover { color: #fff !important; }
.navbar-adm .nav-link.active { color: #fff !important; border-bottom: 2px solid var(--aether-cyan); }
.navbar-adm .dropdown-menu { border: 0; box-shadow: 0 8px 24px rgba(0, 0, 76, .3); }

/* ---------- Lockup de marca (ala + wordmark) ---------- */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}
.brand-lockup .brand-wing { height: 1.9rem; width: auto; display: block; }
.brand-lockup .brand-name {
    font-family: var(--bs-body-font-family);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -.02em;
    line-height: 1;
}
.brand-name-light { color: #fff; }
.brand-name-color {
    background: var(--icarus-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--icarus-blue); /* fallback */
}
.brand-tag {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aether-cyan);
    border: 1px solid rgba(25, 194, 214, .5);
    border-radius: .4rem;
    padding: .12rem .4rem;
    align-self: center;
}

/* ---------- Tarjetas ---------- */
.card {
    border: 1px solid rgba(6, 9, 112, .08);
    border-radius: .85rem;
}
.card.shadow-sm {
    box-shadow: 0 1px 3px rgba(6, 9, 112, .06), 0 6px 18px rgba(6, 9, 112, .05) !important;
}
.card-metric .display-6 { color: var(--icarus-blue); font-weight: 700; }

/* ---------- Misceláneos ---------- */
.progress-bar { background: var(--icarus-gradient); }
.form-control, .form-select { border-color: #d7ddf0; }
hr { color: rgba(6, 9, 112, .2); }
code, kbd, pre { color: var(--primary-700); }