/* ================================================================
   ÚLTIMA APUESTA — Amanecer Renovado
   Esperanza · Energía positiva · Nuevo comienzo
   Paleta elegida por el cliente (opción 02)
   ================================================================ */

/* ── 1. Design Tokens (fuente de verdad) ────────────────────────── */
:root {
    /* Brand colors */
    --color-primary:         #EA580C; /* orange-600  — botones, links, progreso */
    --color-primary-hover:   #C2410C; /* orange-700  — estados hover/active     */
    --color-primary-light:   #FFEDD5; /* orange-100  — fondos sutiles            */
    --color-primary-dark:    #9A3412; /* orange-800  — pressed state             */
    --color-primary-rgb:     234, 88, 12;

    --color-secondary:       #D97706; /* amber-600   — elementos secundarios     */
    --color-secondary-hover: #B45309; /* amber-700                               */
    --color-secondary-light: #FEF3C7; /* amber-100                               */

    --color-accent:          #65A30D; /* lime-600    — highlights, badges        */
    --color-accent-light:    #ECFCCB; /* lime-100                                */

    --color-neutral:         #57534E; /* stone-600   — bordes, elementos neutros */

    /* Semantic */
    --color-success:         #16A34A; /* green-600   — metas alcanzadas          */
    --color-success-hover:   #15803D; /* green-700                               */
    --color-success-light:   #DCFCE7; /* green-100                               */

    --color-danger:          #DC2626; /* red-600     — alertas, recaída          */
    --color-danger-hover:    #B91C1C; /* red-700                                 */
    --color-danger-light:    #FEE2E2; /* red-100                                 */

    --color-warning:         #CA8A04; /* yellow-600  — advertencias              */
    --color-warning-hover:   #92400E; /* amber-800                               */
    --color-warning-light:   #FEF9C3; /* yellow-100                              */

    --color-info:            #0284C7; /* sky-600     — informativos              */
    --color-info-hover:      #0369A1; /* sky-700                                 */
    --color-info-light:      #E0F2FE; /* sky-100                                 */

    /* Surfaces */
    --bg-primary:            #FFF7ED; /* orange-50   — fondo general             */
    --bg-card:               #FFFFFF; /* blanco puro — tarjetas / superficies    */

    /* Typography */
    --text-primary:          #1C1917; /* stone-950   — texto principal           */
    --text-muted:            #78716C; /* stone-500   — texto secundario/ayuda    */

    /* Sidebar warm-dark */
    --sidebar-bg:            #1C1917; /* stone-950 */
    --sidebar-border:        #292524; /* stone-900 */
    --sidebar-text:          #D6D3D1; /* stone-300 */
    --sidebar-muted:         #78716C; /* stone-500 */
    --sidebar-icon:          #A8A29E; /* stone-400 */
}

/* ── 2. Bootstrap 5 Variable Overrides ─────────────────────────── */
:root {
    /* Primary */
    --bs-primary:                  #EA580C;
    --bs-primary-rgb:              234, 88, 12;
    --bs-primary-text-emphasis:    #7C2D12;
    --bs-primary-bg-subtle:        #FFEDD5;
    --bs-primary-border-subtle:    #FED7AA;

    /* Links */
    --bs-link-color:               #EA580C;
    --bs-link-color-rgb:           234, 88, 12;
    --bs-link-hover-color:         #C2410C;
    --bs-link-hover-color-rgb:     194, 65, 12;

    /* Success */
    --bs-success:                  #16A34A;
    --bs-success-rgb:              22, 163, 74;
    --bs-success-text-emphasis:    #14532D;
    --bs-success-bg-subtle:        #DCFCE7;
    --bs-success-border-subtle:    #BBF7D0;

    /* Danger */
    --bs-danger:                   #DC2626;
    --bs-danger-rgb:               220, 38, 38;
    --bs-danger-text-emphasis:     #7F1D1D;
    --bs-danger-bg-subtle:         #FEE2E2;
    --bs-danger-border-subtle:     #FECACA;

    /* Warning */
    --bs-warning:                  #CA8A04;
    --bs-warning-rgb:              202, 138, 4;
    --bs-warning-text-emphasis:    #713F12;
    --bs-warning-bg-subtle:        #FEF9C3;
    --bs-warning-border-subtle:    #FEF08A;

    /* Info */
    --bs-info:                     #0284C7;
    --bs-info-rgb:                 2, 132, 199;
    --bs-info-text-emphasis:       #0C4A6E;
    --bs-info-bg-subtle:           #E0F2FE;
    --bs-info-border-subtle:       #BAE6FD;

    /* Body */
    --bs-body-bg:                  #FFF7ED;
    --bs-body-color:               #1C1917;
    --bs-secondary-color:          #78716C;
    --bs-secondary-bg:             #FFF7ED;
    --bs-card-bg:                  #FFFFFF;
    --bs-border-color:             #FED7AA;
    --bs-border-color-translucent: rgba(234, 88, 12, 0.10);
}

/* ── 3. Metronic (KT) Variable Overrides ────────────────────────── */
:root,
[data-theme="light"] {
    /* Primary */
    --kt-primary:                  #EA580C;
    --kt-primary-active:           #C2410C;
    --kt-primary-light:            #FFEDD5;
    --kt-primary-light-inverse:    #EA580C;
    --kt-primary-inverse:          #FFFFFF;
    --kt-primary-clarity:          rgba(234, 88, 12, 0.20);

    /* Secondary (mapped to amber) */
    --kt-secondary:                #D97706;
    --kt-secondary-active:         #B45309;
    --kt-secondary-light:          #FEF3C7;
    --kt-secondary-inverse:        #FFFFFF;

    /* Success */
    --kt-success:                  #16A34A;
    --kt-success-active:           #15803D;
    --kt-success-light:            #DCFCE7;
    --kt-success-inverse:          #FFFFFF;
    --kt-success-clarity:          rgba(22, 163, 74, 0.20);

    /* Danger */
    --kt-danger:                   #DC2626;
    --kt-danger-active:            #B91C1C;
    --kt-danger-light:             #FEE2E2;
    --kt-danger-inverse:           #FFFFFF;
    --kt-danger-clarity:           rgba(220, 38, 38, 0.20);

    /* Warning */
    --kt-warning:                  #CA8A04;
    --kt-warning-active:           #92400E;
    --kt-warning-light:            #FEF9C3;
    --kt-warning-inverse:          #1C1917;
    --kt-warning-clarity:          rgba(202, 138, 4, 0.20);

    /* Info */
    --kt-info:                     #0284C7;
    --kt-info-active:              #0369A1;
    --kt-info-light:               #E0F2FE;
    --kt-info-inverse:             #FFFFFF;
    --kt-info-clarity:             rgba(2, 132, 199, 0.20);

    /* Text scale (warm stone instead of cool slate) */
    --kt-text-muted:               #78716C;
    --kt-gray-100:                 #FFF7ED;
    --kt-gray-200:                 #FEE0C0;
    --kt-gray-300:                 #FED7AA;
    --kt-gray-400:                 #A8A29E;
    --kt-gray-500:                 #78716C;
    --kt-gray-600:                 #57534E;
    --kt-gray-700:                 #44403C;
    --kt-gray-800:                 #292524;
    --kt-gray-900:                 #1C1917;

    /* App background */
    --kt-app-bg-color:             #FFF7ED;
    --kt-app-blank-bg-color:       #FFF7ED;
}

/* ── 4. Buttons ──────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                   #EA580C;
    --bs-btn-border-color:         #EA580C;
    --bs-btn-hover-bg:             #C2410C;
    --bs-btn-hover-border-color:   #C2410C;
    --bs-btn-active-bg:            #9A3412;
    --bs-btn-active-border-color:  #9A3412;
    --bs-btn-color:                #FFFFFF;
    --bs-btn-hover-color:          #FFFFFF;
    --bs-btn-active-color:         #FFFFFF;
    --bs-btn-disabled-bg:          #FED7AA;
    --bs-btn-disabled-border-color:#FED7AA;
    --bs-btn-disabled-color:       #9A3412;
}

.btn-secondary {
    --bs-btn-bg:                   #D97706;
    --bs-btn-border-color:         #D97706;
    --bs-btn-hover-bg:             #B45309;
    --bs-btn-hover-border-color:   #B45309;
    --bs-btn-color:                #FFFFFF;
    --bs-btn-hover-color:          #FFFFFF;
}

.btn-light-primary {
    --bs-btn-bg:                   #FFEDD5;
    --bs-btn-color:                #EA580C;
    --bs-btn-border-color:         transparent;
    --bs-btn-hover-bg:             #EA580C;
    --bs-btn-hover-color:          #FFFFFF;
    --bs-btn-hover-border-color:   transparent;
    --bs-btn-active-bg:            #C2410C;
    --bs-btn-active-color:         #FFFFFF;
}

.btn-light-success {
    --bs-btn-bg:                   #DCFCE7;
    --bs-btn-color:                #15803D;
    --bs-btn-border-color:         transparent;
    --bs-btn-hover-bg:             #16A34A;
    --bs-btn-hover-color:          #FFFFFF;
}

.btn-light-danger {
    --bs-btn-bg:                   #FEE2E2;
    --bs-btn-color:                #B91C1C;
    --bs-btn-border-color:         transparent;
    --bs-btn-hover-bg:             #DC2626;
    --bs-btn-hover-color:          #FFFFFF;
}

.btn-light-warning {
    --bs-btn-bg:                   #FEF9C3;
    --bs-btn-color:                #92400E;
    --bs-btn-border-color:         transparent;
    --bs-btn-hover-bg:             #CA8A04;
    --bs-btn-hover-color:          #1C1917;
}

.btn-light-info {
    --bs-btn-bg:                   #E0F2FE;
    --bs-btn-color:                #0369A1;
    --bs-btn-border-color:         transparent;
    --bs-btn-hover-bg:             #0284C7;
    --bs-btn-hover-color:          #FFFFFF;
}

.btn-active-primary:hover,
.btn-active-primary.active,
.show > .btn-active-primary {
    background-color: #EA580C !important;
    color: #FFFFFF !important;
    border-color: #EA580C !important;
}

.btn-active-color-primary:hover,
.btn-active-color-primary.active {
    color: #EA580C !important;
}

.btn-active-light-primary:hover,
.btn-active-light-primary.active {
    background-color: #FFEDD5 !important;
    color: #EA580C !important;
}

/* ── 5. Typography & Links ───────────────────────────────────────── */
.text-primary          { color: #EA580C !important; }
.text-hover-primary:hover { color: #EA580C !important; }
.text-active-primary.active { color: #EA580C !important; }

.text-success          { color: #16A34A !important; }
.text-danger           { color: #DC2626 !important; }
.text-warning          { color: #CA8A04 !important; }
.text-info             { color: #0284C7 !important; }
.text-muted            { color: #78716C !important; }

.link-primary          { color: #EA580C !important; }
.link-primary:hover    { color: #C2410C !important; }

/* ── 6. Backgrounds ─────────────────────────────────────────────── */
.bg-primary            { background-color: #EA580C !important; }
.bg-light-primary      { background-color: #FFEDD5 !important; }
.bg-success            { background-color: #16A34A !important; }
.bg-light-success      { background-color: #DCFCE7 !important; }
.bg-danger             { background-color: #DC2626 !important; }
.bg-light-danger       { background-color: #FEE2E2 !important; }
.bg-warning            { background-color: #CA8A04 !important; }
.bg-light-warning      { background-color: #FEF9C3 !important; }
.bg-info               { background-color: #0284C7 !important; }
.bg-light-info         { background-color: #E0F2FE !important; }

/* ── 7. Badges ───────────────────────────────────────────────────── */
.badge.badge-primary,
.badge-light-primary {
    background-color: #FFEDD5;
    color: #9A3412;
}
.badge.badge-success,
.badge-light-success {
    background-color: #DCFCE7;
    color: #14532D;
}
.badge.badge-danger,
.badge-light-danger {
    background-color: #FEE2E2;
    color: #7F1D1D;
}
.badge.badge-warning,
.badge-light-warning {
    background-color: #FEF9C3;
    color: #713F12;
}
.badge.badge-info,
.badge-light-info {
    background-color: #E0F2FE;
    color: #0C4A6E;
}

/* ── 8. App Page Background ─────────────────────────────────────── */
.app-page,
#kt_app_page,
body.app-default {
    background-color: #FFF7ED !important;
}

/* ── 9. App Header ───────────────────────────────────────────────── */
.app-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #FED7AA !important;
    box-shadow: 0 1px 0 0 rgba(234, 88, 12, 0.08) !important;
}

.app-header .menu-link.here,
.app-header .menu-link:hover,
.app-header .menu-item.show > .menu-link {
    color: #EA580C !important;
    background-color: #FFEDD5 !important;
    border-radius: 0.475rem;
}

.app-header .btn-active-color-primary:hover {
    color: #EA580C !important;
}

/* ── 10. Sidebar — Warm Dark ─────────────────────────────────────── */

/* Base sidebar */
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background-color: #1C1917 !important;
    border-right: 1px solid #292524 !important;
}

/* Logo area */
[data-kt-app-layout="dark-sidebar"] .app-sidebar-logo {
    border-bottom: 1px solid #292524 !important;
}

/* Section headings (GESTIÓN, etc.) */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-heading {
    color: #78716C !important;
    letter-spacing: 0.08em;
}

/* Default menu title */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-title {
    color: #A8A29E !important;
    font-weight: 500;
}

/* Default icon fill */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #78716C !important;
    transition: fill 0.15s ease;
}

/* Hover state */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-link:hover {
    background-color: rgba(234, 88, 12, 0.15) !important;
    border-radius: 0.475rem;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-link:hover .menu-title {
    color: #EA580C !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-link:hover .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #EA580C !important;
}

/* Active state */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-link.active {
    background-color: #EA580C !important;
    border-radius: 0.475rem;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-link.active .menu-title {
    color: #FFFFFF !important;
    font-weight: 600;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu-link.active .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #FFFFFF !important;
}

/* Sidebar toggle (collapse) button */
[data-kt-app-layout="dark-sidebar"] #kt_app_sidebar_toggle {
    background-color: #EA580C !important;
    border-color: #EA580C !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.40);
}
[data-kt-app-layout="dark-sidebar"] #kt_app_sidebar_toggle:hover {
    background-color: #C2410C !important;
    border-color: #C2410C !important;
}
[data-kt-app-layout="dark-sidebar"] #kt_app_sidebar_toggle .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #FFFFFF !important;
}

/* Minimized sidebar hover (tooltip-like) */
[data-kt-app-layout="dark-sidebar"] .app-sidebar-minimize .menu-link.active {
    background-color: #EA580C !important;
}

/* ── 11. Toolbar ─────────────────────────────────────────────────── */
.app-toolbar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #FEE0C0;
}

.app-toolbar .page-heading {
    color: #1C1917 !important;
}

.app-toolbar .breadcrumb-item.text-muted,
.app-toolbar .breadcrumb-item a.text-muted {
    color: #78716C !important;
}

.app-toolbar .text-hover-primary:hover {
    color: #EA580C !important;
}

/* ── 12. Cards ───────────────────────────────────────────────────── */
.card {
    border-color: #FEE0C0 !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.06), 0 1px 2px rgba(234, 88, 12, 0.04) !important;
}
.card:hover {
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.10), 0 2px 4px rgba(234, 88, 12, 0.06) !important;
    transition: box-shadow 0.2s ease;
}

/* ── 13. Progress Bars ───────────────────────────────────────────── */
.bg-light-primary.rounded,
.h-8px.bg-light-primary {
    background-color: #FFEDD5 !important;
}
.bg-primary.rounded,
.bg-primary.rounded.h-8px {
    background-color: #EA580C !important;
}

/* ── 14. Form Controls ───────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #EA580C;
    box-shadow: 0 0 0 0.15rem rgba(234, 88, 12, 0.20);
}

.form-check-input:checked {
    background-color: #EA580C;
    border-color: #EA580C;
}
.form-check-input:focus {
    border-color: #EA580C;
    box-shadow: 0 0 0 0.15rem rgba(234, 88, 12, 0.20);
}

/* ── 15. Separators & Dividers ───────────────────────────────────── */
.separator {
    border-color: #FED7AA !important;
}

/* ── 16. Tables ──────────────────────────────────────────────────── */
tr.active {
    background-color: #FFEDD5;
}

.table > :not(caption) > * > * {
    border-bottom-color: #FEE0C0;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(234, 88, 12, 0.04);
}

/* DataTables row hover */
table.dataTable tbody tr:hover {
    background-color: rgba(234, 88, 12, 0.05) !important;
}

/* ── 17. Footer ──────────────────────────────────────────────────── */
.app-footer {
    background-color: #FFFFFF;
    border-top: 1px solid #FED7AA;
}
.app-footer a:hover,
.app-footer .text-hover-primary:hover {
    color: #EA580C !important;
}

/* ── 18. Alerts ──────────────────────────────────────────────────── */
.alert-primary {
    background-color: #FFEDD5;
    border-color: #FED7AA;
    color: #9A3412;
}
.alert-success {
    background-color: #DCFCE7;
    border-color: #BBF7D0;
    color: #14532D;
}
.alert-danger {
    background-color: #FEE2E2;
    border-color: #FECACA;
    color: #7F1D1D;
}
.alert-warning {
    background-color: #FEF9C3;
    border-color: #FEF08A;
    color: #713F12;
}
.alert-info {
    background-color: #E0F2FE;
    border-color: #BAE6FD;
    color: #0C4A6E;
}

/* ── 19. Scrollbar (webkit) ──────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #FFF7ED;
}
::-webkit-scrollbar-thumb {
    background: #FED7AA;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #EA580C;
}

/* ── 20. Selection highlight ─────────────────────────────────────── */
::selection {
    background-color: rgba(234, 88, 12, 0.20);
    color: #1C1917;
}