:root {
    /* ─────────────────────────────
       COLORES BASE
    ───────────────────────────── */
    --color-primary: #f26a00;
    --color-primary-dark: #c75000;
    --color-primary-soft: #fff3e8;

    --color-success: #17904b;
    --color-success-rgb: 26, 160, 83;

    --color-secondary: #0D0D0D;

    --color-muted-blue: #6f8998;

    --color-dark: #151515;
    --color-gray: #6c757d;

    --color-light: #f7f7f7;
    --color-surface: #f4f6f8;

    --color-white: #ffffff;

    --color-whatsapp: #25d366;
    --color-whatsapp-dark: #128c7e;

    /* ─────────────────────────────
       BRAND
    ───────────────────────────── */
    --brand-accent: var(--color-primary);
    --brand-accent-dark: var(--color-primary-dark);

    --brand-dark: var(--color-secondary);

    --brand-muted: var(--color-muted-blue);

    /* ─────────────────────────────
       BOOTSTRAP OVERRIDES
    ───────────────────────────── */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 242, 106, 0;

    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);

    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: 13, 13, 13;

    --bs-dark: var(--color-dark);

    --bs-body-bg: #ffffff;
    --bs-body-color: #333333;

    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-dark);

    --bs-border-radius: 1rem;
    --bs-border-radius-sm: .75rem;
    --bs-border-radius-lg: 1.25rem;

    --bs-font-sans-serif: 'Inter', sans-serif;
    --bs-body-font-family: 'Inter', sans-serif;

    --bs-box-shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);
    --bs-box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
    --bs-box-shadow-lg: 0 16px 40px rgba(0, 0, 0, .12);

    /* ─────────────────────────────
       BOTONES
    ───────────────────────────── */
    --btn-brand-text: #ffffff;

    --btn-brand-radius: 28px;

    --btn-brand-padding-y: 10px;
    --btn-brand-padding-x: 20px;

    --btn-brand-font-size: 16px;
    --btn-brand-font-weight: 700;

    --btn-brand-transition: .35s;
}

/* ─────────────────────────────
   BASE
───────────────────────────── */

body {
    font-family: var(--bs-body-font-family);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    overflow-x: hidden;
}

main {
    position: relative;
}

a {
    text-decoration: none;
    transition: all .35s;
}

a:hover {
    color: var(--color-primary);
}

/* ─────────────────────────────
   BOTONES
───────────────────────────── */

.btn {
    border-radius: var(--btn-brand-radius);
    font-size: var(--btn-brand-font-size);
    font-weight: var(--btn-brand-font-weight);
    padding: var(--btn-brand-padding-y) var(--btn-brand-padding-x);
    line-height: 1;
    transition:
        all var(--btn-brand-transition),
        transform .3s;
}

.btn:hover,
.btn:focus {
    transform: scale(1.05);
}

/* PRIMARY */

.btn-primary {
    --bs-btn-color: var(--btn-brand-text);

    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);

    --bs-btn-hover-color: var(--btn-brand-text);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);

    --bs-btn-active-color: var(--btn-brand-text);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);

    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

/* SECONDARY */

.btn-secondary,
.btn-brand-secondary {
    --bs-btn-color: #ffffff;

    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: #ffffff;

    --bs-btn-hover-color: #ffffff;

    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: #ffffff;

    --bs-btn-active-color: #ffffff;

    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: #ffffff;
}

/* OUTLINE PRIMARY */

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);

    --bs-btn-border-color: var(--color-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);

    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

/* ─────────────────────────────
   TEXTOS / BACKGROUNDS
───────────────────────────── */

.text-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-soft-primary {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .1) !important;
}

.bg-soft-secondary {
    color: var(--bs-secondary);
    background-color: rgba(var(--bs-secondary-rgb), .1) !important;
}

.bg-soft-success {
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), .1) !important;
}

.bg-soft-danger {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), .1) !important;
}

.bg-soft-warning {
    color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), .1) !important;
}

.bg-soft-info {
    color: var(--bs-info);
    background-color: rgba(var(--bs-info-rgb), .1) !important;
}

.bg-soft-light {
    color: var(--bs-dark);
    background-color: rgba(var(--bs-light-rgb), .65) !important;
}

.bg-soft-dark {
    color: var(--bs-dark);
    background-color: rgba(var(--bs-dark-rgb), .1) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

/* ─────────────────────────────
   FORMULARIOS
───────────────────────────── */

.form-control,
.form-select {
    border-radius: .9rem;
    border-color: #dcdcdc;
    min-height: 48px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 .2rem rgba(242, 106, 0, .15);
}

/* ─────────────────────────────
   TABLAS
───────────────────────────── */

.table {
    --bs-table-bg: transparent;
}

.table thead th {
    background: var(--color-primary-soft);
    color: var(--color-dark);
    border-bottom: 0;
    font-weight: 600;
}

/* ─────────────────────────────
   BADGES
───────────────────────────── */

.badge.text-bg-primary {
    background: var(--color-primary) !important;
}

/* ─────────────────────────────
   DROPDOWNS
───────────────────────────── */

.dropdown-menu {
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--bs-box-shadow);
}

.dropdown-item:active {
    background: var(--color-primary);
}

/* ─────────────────────────────
   PAGINACION
───────────────────────────── */

.page-link {
    color: var(--color-primary);
}

.page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* ─────────────────────────────
   ALERTS
───────────────────────────── */

.alert-primary {
    background: var(--color-primary-soft);

    border-color:
        rgba(242, 106, 0, .2);

    color: var(--color-primary-dark);
}

/* ─────────────────────────────
   MODALES
───────────────────────────── */

.modal-content {
    border: 0;
    border-radius: 1.5rem;
    box-shadow: var(--bs-box-shadow-lg);
}

/* ─────────────────────────────
   HELPERS
───────────────────────────── */

.surface-soft {
    background: var(--color-light);
}

.section-soft {
    background: var(--color-surface);
}

.text-muted-custom {
    color: var(--color-gray);
}

.rounded-xl {
    border-radius: 1.5rem;
}

.shadow-soft {
    box-shadow: var(--bs-box-shadow);
}