/* ============================================================
   HTEC Facturación — Unified Brand Design System
   Single source of truth for all colors, typography & tokens
   ============================================================ */

:root {
    /* ── Brand palette ─────────────────────────────── */
    --brand:              #1560E8;   /* primary actions, CTAs */
    --brand-dark:         #1049BF;   /* hover / active state  */
    --brand-darker:       #0D3899;   /* pressed / focus ring  */
    --brand-light:        #E8F1FD;   /* backgrounds, tinted   */
    --brand-rgb:          21, 96, 232;

    /* ── Accent (teal-green) ─────────────────────── */
    --accent:             #00C4A0;
    --accent-dark:        #009E81;
    --accent-light:       #E0FAF5;
    --accent-rgb:         0, 196, 160;

    /* ── Semantic ────────────────────────────────── */
    --color-success:      #10B981;
    --color-success-bg:   #D1FAE5;
    --color-warning:      #F59E0B;
    --color-warning-bg:   #FEF3C7;
    --color-danger:       #EF4444;
    --color-danger-bg:    #FEE2E2;
    --color-info:         #0891B2;
    --color-info-bg:      #E0F2FE;

    /* ── Dark backgrounds (for hero / POS sidebar) ─ */
    --dark:               #0D1B2A;
    --dark2:              #152338;
    --dark3:              #1E3050;

    /* ── Neutral surface ─────────────────────────── */
    --surface:            #F4F7FC;
    --surface-2:          #EDF1F9;
    --border:             #D4DCF0;

    /* ── Text ────────────────────────────────────── */
    --text:               #1A2533;
    --text-muted:         #64748B;
    --text-light:         #94A3B8;

    /* ── Radius / Shadow tokens ──────────────────── */
    --radius-sm:          6px;
    --radius:             10px;
    --radius-lg:          14px;
    --radius-xl:          20px;
    --shadow-card:        0 2px 10px rgba(21, 96, 232, 0.08);
    --shadow-hover:       0 6px 20px rgba(21, 96, 232, 0.15);

    /* ── Bootstrap / Phoenix overrides ──────────── */
    --bs-primary:         #1560E8;
    --bs-primary-rgb:     21, 96, 232;
    --bs-primary-bg-subtle: #E8F1FD;
    --bs-primary-border-subtle: #BFCFF9;
    --bs-success:         #10B981;
    --bs-success-rgb:     16, 185, 129;
    --bs-warning:         #F59E0B;
    --bs-danger:          #EF4444;
    --bs-info:            #0891B2;
    --phoenix-primary:    #1560E8;
    --phoenix-primary-rgb: 21, 96, 232;
}

/* ─────────────────────────────────────────────────────────────
   Brand button overrides
───────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.3) !important;
}

.btn-outline-primary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

/* Success button */
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: #0DA374 !important;
    border-color: #0DA374 !important;
    color: #fff !important;
}

/* Danger button */
.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* Info button */
.btn-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
    color: #fff !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #0774A6 !important;
    border-color: #0774A6 !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}
.btn-outline-danger:hover {
    background-color: var(--color-danger) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   Badge overrides
───────────────────────────────────────────────────────────── */
.bg-primary   { background-color: var(--brand) !important; }
.bg-success   { background-color: var(--color-success) !important; }
.bg-warning   { background-color: var(--color-warning) !important; }
.bg-danger    { background-color: var(--color-danger) !important; }
.bg-info      { background-color: var(--color-info) !important; }
.text-primary { color: var(--brand) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-info    { color: var(--color-info) !important; }
.border-primary { border-color: var(--brand) !important; }

/* ─────────────────────────────────────────────────────────────
   Badge bg-info text-dark fix (contrast)
───────────────────────────────────────────────────────────── */
.badge.bg-info { color: #fff !important; }

/* ─────────────────────────────────────────────────────────────
   Form focus ring
───────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.2) !important;
}

/* ─────────────────────────────────────────────────────────────
   Navbar brand
───────────────────────────────────────────────────────────── */
.navbar-brand .brand-sv {
    color: var(--brand) !important;
}
.navbar-brand .brand-name {
    color: inherit;
}

/* ─────────────────────────────────────────────────────────────
   Card header standard style — replaces all gray gradients
───────────────────────────────────────────────────────────── */
.card-header.brand-header {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff !important;
    font-weight: 600;
    border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────
   Page header block (used in Productos, MantSubEmpresas, etc.)
───────────────────────────────────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark3) 100%) !important;
    color: #fff !important;
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(13, 27, 42, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   Hover card effect — unified
───────────────────────────────────────────────────────────── */
.hover-card {
    transition: all 0.25s ease;
}
.hover-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--brand) !important;
}

/* ─────────────────────────────────────────────────────────────
   Breadcrumb & nav wizard active
───────────────────────────────────────────────────────────── */
.nav-wizard .nav-link.active .nav-item-circle {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* ─────────────────────────────────────────────────────────────
   Modal header standard  (bg-primary is already overridden)
───────────────────────────────────────────────────────────── */
.modal-header.bg-primary {
    background: linear-gradient(135deg, var(--dark) 0%, var(--brand) 100%) !important;
}
.modal-header.brand-header-modal {
    background: linear-gradient(135deg, var(--dark) 0%, var(--brand) 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
}
.modal-header.brand-header-modal .btn-close {
    filter: invert(1);
}

/* ─────────────────────────────────────────────────────────────
   Link color
───────────────────────────────────────────────────────────── */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* ─────────────────────────────────────────────────────────────
   Scrollbar (Webkit) — subtle brand tint
───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb), 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-rgb), 0.45); }