/*
 * ============================================================
 *  WHITE-LABEL THEME  —  MásComprobantes
 *  Sistema de Facturación
 * ============================================================
 *  Paleta oficial de marca (PDF colorimetría BYMfactura):
 *    Azul      #00AEEF  rgb(0, 174, 239)    → primario
 *    Rojo      #ED1C24  rgb(237, 28, 36)    → peligro / acento
 *    Amarillo  #FAA21B  rgb(250, 162, 27)   → advertencia
 *    Gris-azul #9FABBF  rgb(159, 171, 191)  → neutro / muted
 * ============================================================
 */

/* ── Google Fonts: Nunito Sans (limpia, moderna, legible) ── */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400&display=swap');

:root {
    /* ----------------------------------------------------------
     *  TIPOGRAFÍA
     * ---------------------------------------------------------- */
    --bs-font-sans-serif:  'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    /* ----------------------------------------------------------
     *  COLOR PRINCIPAL — Azul MásComprobantes #00AEEF
     * ---------------------------------------------------------- */
    --bs-primary:          #00AEEF;
    --bs-primary-rgb:      0, 174, 239;

    --bs-link-color:       #00AEEF;
    --bs-link-hover-color: #0092ca;

    /* ----------------------------------------------------------
     *  COLORES DE ESTADO
     * ---------------------------------------------------------- */
    --bs-danger:           #ED1C24;
    --bs-danger-rgb:       237, 28, 36;

    --bs-warning:          #FAA21B;
    --bs-warning-rgb:      250, 162, 27;

    --bs-success:          #34c38f;
    --bs-success-rgb:      52, 195, 143;

    --bs-secondary:        #9FABBF;
    --bs-secondary-rgb:    159, 171, 191;

    /* ----------------------------------------------------------
     *  TOPBAR
     * ---------------------------------------------------------- */
    --bs-header-bg:        #ffffff;
    --bs-header-height:    70px;

    /* ----------------------------------------------------------
     *  SIDEBAR CLARO  (modo por defecto)
     * ---------------------------------------------------------- */
    --bs-sidebar-bg:                    #f2fbff;   /* toque muy suave del azul de marca */
    --bs-sidebar-menu-item-color:       #455060;
    --bs-sidebar-menu-item-hover-color: #00AEEF;
    --bs-sidebar-menu-item-active-color:#00AEEF;
    --bs-sidebar-menu-sub-item-color:   #6c757d;
    --bs-sidebar-width:                 260px;

    /* ----------------------------------------------------------
     *  SIDEBAR OSCURO  (cuando usuario activa dark mode)
     * ---------------------------------------------------------- */
    --bs-sidebar-dark-bg:                    #0a1f2e;   /* azul marino muy oscuro */
    --bs-sidebar-dark-menu-item-color:       #9FABBF;
    --bs-sidebar-dark-menu-item-hover-color: #00AEEF;
    --bs-sidebar-dark-menu-item-active-color:#00AEEF;
    --bs-sidebar-dark-menu-sub-item-color:   #7a9db3;

    /* ----------------------------------------------------------
     *  FOOTER
     * ---------------------------------------------------------- */
    --bs-footer-bg:    #f2fbff;
    --bs-footer-color: #6c757d;
}

/* ─────────────────────────────────────────────────────────────
 *  TIPOGRAFÍA GLOBAL
 * ───────────────────────────────────────────────────────────── */
body,
.navbar,
.vertical-menu,
.page-content,
.footer {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ─────────────────────────────────────────────────────────────
 *  BOTONES — primario
 * ───────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: #00AEEF;
    border-color:     #00AEEF;
    color:            #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active {
    background-color: #0092ca;
    border-color:     #0092ca;
    color:            #ffffff;
}
.btn-soft-primary {
    background-color: rgba(0, 174, 239, 0.12);
    color:            #00AEEF;
    border-color:     transparent;
}
.btn-soft-primary:hover {
    background-color: #00AEEF;
    color:            #ffffff;
}

/* ─────────────────────────────────────────────────────────────
 *  BOTONES — peligro (rojo oficial)
 * ───────────────────────────────────────────────────────────── */
.btn-danger {
    background-color: #ED1C24;
    border-color:     #ED1C24;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #c8151c;
    border-color:     #c8151c;
}
.btn-soft-danger {
    background-color: rgba(237, 28, 36, 0.12);
    color:            #ED1C24;
    border-color:     transparent;
}
.btn-soft-danger:hover {
    background-color: #ED1C24;
    color:            #ffffff;
}

/* ─────────────────────────────────────────────────────────────
 *  BOTONES — warning (amarillo oficial)
 * ───────────────────────────────────────────────────────────── */
.btn-warning {
    background-color: #FAA21B;
    border-color:     #FAA21B;
    color:            #ffffff;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #d98815;
    border-color:     #d98815;
    color:            #ffffff;
}
.btn-soft-warning {
    background-color: rgba(250, 162, 27, 0.12);
    color:            #d98815;
    border-color:     transparent;
}
.btn-soft-warning:hover {
    background-color: #FAA21B;
    color:            #ffffff;
}

/* ─────────────────────────────────────────────────────────────
 *  BADGES / PILLS
 * ───────────────────────────────────────────────────────────── */
.badge.bg-primary    { background-color: #00AEEF !important; }
.badge.bg-danger     { background-color: #ED1C24 !important; }
.badge.bg-warning    { background-color: #FAA21B !important; color: #fff !important; }
.badge.bg-secondary  { background-color: #9FABBF !important; }

.badge-soft-primary   { background-color: rgba(0,   174, 239, 0.15); color: #0092ca; }
.badge-soft-danger    { background-color: rgba(237,  28,  36, 0.15); color: #ED1C24; }
.badge-soft-warning   { background-color: rgba(250, 162,  27, 0.15); color: #d98815; }
.badge-soft-secondary { background-color: rgba(159, 171, 191, 0.20); color: #5a6a7e; }
.badge-soft-success   { background-color: rgba(52,  195, 143, 0.15); color: #34c38f; }

/* ─────────────────────────────────────────────────────────────
 *  TEXTO
 * ───────────────────────────────────────────────────────────── */
.text-primary   { color: #00AEEF !important; }
.text-danger    { color: #ED1C24 !important; }
.text-warning   { color: #FAA21B !important; }
.text-secondary { color: #9FABBF !important; }

/* ─────────────────────────────────────────────────────────────
 *  TOPBAR — logo box
 * ───────────────────────────────────────────────────────────── */
.navbar-brand-box {
    background-color: #ffffff;
}
[data-sidebar="dark"] .navbar-brand-box {
    background-color: #0a1f2e;
}

/* ─────────────────────────────────────────────────────────────
 *  SIDEBAR claro — item activo
 * ───────────────────────────────────────────────────────────── */
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
    color:            #00AEEF;
    background-color: rgba(0, 174, 239, 0.10);
    border-radius:    6px;
}

/* ─────────────────────────────────────────────────────────────
 *  SIDEBAR oscuro — item activo
 * ───────────────────────────────────────────────────────────── */
[data-sidebar="dark"] #sidebar-menu ul li a.active,
[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a {
    color:            #00AEEF;
    background-color: rgba(0, 174, 239, 0.15);
    border-radius:    6px;
}

/* ─────────────────────────────────────────────────────────────
 *  PAGE TITLE
 * ───────────────────────────────────────────────────────────── */
.page-title-box h4 { color: #0a1f2e; }

/* ─────────────────────────────────────────────────────────────
 *  FORM CONTROLS — focus ring en azul de marca
 * ───────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #00AEEF;
    box-shadow:   0 0 0 0.2rem rgba(0, 174, 239, 0.25);
}

/* ─────────────────────────────────────────────────────────────
 *  PAGINACIÓN
 * ───────────────────────────────────────────────────────────── */
.pagination .page-item.active .page-link {
    background-color: #00AEEF;
    border-color:     #00AEEF;
}
.pagination .page-link {
    color: #00AEEF;
}
.pagination .page-link:hover {
    color: #0092ca;
}

/* ─────────────────────────────────────────────────────────────
 *  PROGRESS BARS
 * ───────────────────────────────────────────────────────────── */
.progress-bar { background-color: #00AEEF; }

/* ─────────────────────────────────────────────────────────────
 *  BREADCRUMB activo
 * ───────────────────────────────────────────────────────────── */
.breadcrumb-item.active { color: #00AEEF; }

/* ─────────────────────────────────────────────────────────────
 *  BORDER color primario
 * ───────────────────────────────────────────────────────────── */
.border-primary { border-color: #00AEEF !important; }

/* ─────────────────────────────────────────────────────────────
 *  SELECT2 — focus / selected
 * ───────────────────────────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: #00AEEF;
    box-shadow:   0 0 0 0.2rem rgba(0, 174, 239, 0.25);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #00AEEF;
}

/* ─────────────────────────────────────────────────────────────
 *  INSTALL STEPPER — colores de marca
 * ───────────────────────────────────────────────────────────── */
.install-step.done   .install-step-circle { background: #00AEEF; border-color: #00AEEF; }
.install-step.active .install-step-circle { background: #ED1C24; border-color: #ED1C24;
                                             box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.20); }
.install-step-connector.done              { background: #00AEEF; }

/* ─────────────────────────────────────────────────────────────
 *  SCROLLBAR sutil (Webkit)
 * ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 174, 239, 0.35);
    border-radius:    4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 174, 239, 0.65);
}