/* ============================================================
   IMATCH BRAND CSS v2
   Rojo: #DC1414  |  Gris: #505050
   Sobreescribe style.css y anula completamente el tema oscuro
   ============================================================ */

/* ── Anular tema oscuro del body ─────────────────────────── */
body { background-color: #F4F6F8 !important; color: #2E2E2E !important; }
.main-content { background-color: #F4F6F8 !important; }

:root {
    --imatch-red:      #DC1414;
    --imatch-red-dk:   #B80F0F;
    --imatch-red-bg:   #FDF3F3;
    --imatch-red-bd:   #F5D0D0;
    --imatch-gray:     #505050;
    --imatch-gray-dk:  #2E2E2E;
    --imatch-gray-lt:  #E4E7EB;
    --imatch-gray-bg:  #F4F6F8;
    --imatch-white:  #FFFFFF;
    /* Compat con clases anteriores que usan verde */
    --imatch-green:    #DC1414;
    --imatch-lime:     #DC1414;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
.navbar-imatch, nav.navbar {
    background-color: #ffffff !important;
    border-bottom: 2px solid var(--imatch-red) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}
.navbar-imatch .nav-link, nav.navbar .nav-link {
    color: var(--imatch-gray) !important;
    font-weight: 500;
    font-size: .875rem;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.navbar-imatch .nav-link:hover, nav.navbar .nav-link:hover {
    color: var(--imatch-red) !important;
    background-color: var(--imatch-red-bg) !important;
}
.navbar-imatch .nav-link.active, nav.navbar .nav-link.active {
    color: var(--imatch-white) !important;
    font-weight: 600;
}
.navbar-imatch .dropdown-menu, nav.navbar .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--imatch-gray-lt) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
    border-radius: 8px !important;
}
.navbar-toggler { border-color: var(--imatch-red) !important; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
.sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid var(--imatch-gray-lt) !important;
    min-height: calc(100vh - 62px);
    padding: 1rem .75rem !important;
    box-shadow: 2px 0 6px rgba(0,0,0,.04);
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .55rem .9rem;
    border-radius: 7px;
    color: var(--imatch-gray) !important;
    font-size: .865rem;
    font-weight: 500;
    text-decoration: none !important;
    margin-bottom: 2px;
    transition: background .15s, color .15s;
}
.sidebar-link i { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-link:hover { background-color: var(--imatch-red-bg) !important; color: var(--imatch-red) !important; }
.sidebar-link.active { background-color: var(--imatch-red) !important; color: #ffffff !important; }
.sidebar-link.active i { color: #ffffff !important; }
.sidebar-link.text-danger { color: #C62828 !important; }
.sidebar-link.text-danger:hover { background-color: var(--imatch-red-bg) !important; color: var(--imatch-red) !important; }
.sidebar hr { border-color: var(--imatch-gray-lt) !important; margin: .75rem 0; opacity: 1; }
.sidebar .badge { font-size: .68rem; padding: 2px 6px; }

/* ══════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════ */
.card-modern, .card {
    background-color: #ffffff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.05) !important;
    color: #2E2E2E !important;
}
.card-modern .card-header-custom {
    background-color: var(--imatch-gray-bg) !important;
    border-bottom: 1px solid #E4E7EB !important;
    padding: .9rem 1.25rem;
    border-radius: 10px 10px 0 0 !important;
    color: var(--imatch-gray-dk) !important;
    font-weight: 600;
}
.card-modern .card-body, .card .card-body { padding: 1.25rem; }
.card-header { background-color: var(--imatch-gray-bg) !important; border-bottom: 1px solid #E4E7EB !important; color: var(--imatch-gray-dk) !important; }
.card-footer { background-color: var(--imatch-gray-bg) !important; border-top: 1px solid #E4E7EB !important; }

/* ══════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════ */
.btn-imatch-primary {
    background-color: var(--imatch-red) !important;
    border-color: var(--imatch-red) !important;
    color: #ffffff !important;
    font-weight: 500; border-radius: 6px;
}
.btn-imatch-primary:hover, .btn-imatch-primary:focus {
    background-color: var(--imatch-red-dk) !important;
    border-color: var(--imatch-red-dk) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(220,20,20,.3);
}
.btn-imatch-primary:disabled { background-color: #F5D0D0 !important; border-color: #F5D0D0 !important; }

.btn-outline-imatch {
    background-color: transparent !important;
    border: 1.5px solid var(--imatch-red) !important;
    color: var(--imatch-red) !important;
    font-weight: 500; border-radius: 6px;
}
.btn-outline-imatch:hover { background-color: var(--imatch-red) !important; color: #ffffff !important; }

.btn-outline-secondary { border-color: #CBD2DA !important; color: var(--imatch-gray) !important; }
.btn-outline-secondary:hover { background-color: var(--imatch-gray-lt) !important; color: var(--imatch-gray-dk) !important; }

.btn-payment {
    background-color: var(--imatch-red) !important;
    border-color: var(--imatch-red) !important;
    color: #ffffff !important;
    font-weight: 600; border-radius: 8px;
}
.btn-payment:hover { background-color: var(--imatch-red-dk) !important; color: #ffffff !important; }

/* Botones Bootstrap estándar — dejar que Bootstrap los maneje pero sin fondo oscuro */
.btn-success  { background-color: #1B7E3A !important; border-color: #1B7E3A !important; }
.btn-warning  { background-color: #D97706 !important; border-color: #D97706 !important; color: #fff !important; }
.btn-danger   { background-color: #DC1414 !important; border-color: #DC1414 !important; }
.btn-info     { background-color: #1565C0 !important; border-color: #1565C0 !important; color: #fff !important; }
.btn-outline-success { color: #1B7E3A !important; border-color: #1B7E3A !important; }
.btn-outline-success:hover { background-color: #1B7E3A !important; color: #fff !important; }
.btn-outline-danger { color: #DC1414 !important; border-color: #DC1414 !important; }
.btn-outline-danger:hover { background-color: #DC1414 !important; color: #fff !important; }
.btn-outline-warning { color: #D97706 !important; border-color: #D97706 !important; }
.btn-outline-primary { color: #1565C0 !important; border-color: #1565C0 !important; }
.btn-outline-primary:hover { background-color: #1565C0 !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════
   TEXTOS Y HEADINGS
══════════════════════════════════════════════════════════ */
.text-imatch-green, .text-imatch-red, .text-imatch-lime { color: var(--imatch-red) !important; }
h1,h2,h3,h4,h5,h6 { color: var(--imatch-gray-dk) !important; }
h2.fw-bold.text-imatch-green, h2.fw-bold { color: var(--imatch-red) !important; }
.text-secondary { color: #6B7280 !important; }
.fw-bold { font-weight: 600 !important; }

/* ══════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════ */
.badge { font-size: .72rem !important; font-weight: 500 !important; }
.bg-success  { background-color: #1B7E3A !important; color: #fff !important; }
.bg-warning  { background-color: #D97706 !important; color: #fff !important; }
.bg-danger   { background-color: #DC1414 !important; color: #fff !important; }
.bg-info     { background-color: #1565C0 !important; color: #fff !important; }
.bg-secondary{ background-color: #6B7280 !important; color: #fff !important; }
.bg-primary  { background-color: #1565C0 !important; color: #fff !important; }
.bg-dark     { background-color: var(--imatch-gray-dk) !important; color: #fff !important; }
.bg-light    { background-color: #F4F6F8 !important; color: var(--imatch-gray) !important; }
.bg-imatch-green, .bg-imatch-lime { background-color: var(--imatch-red) !important; color: #fff !important; }

/* Íconos de feature en stat cards */
.feature-icon {
    background: var(--imatch-red) !important;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white !important;
}

/* ══════════════════════════════════════════════════════════
   TABLAS
══════════════════════════════════════════════════════════ */
.table { color: #2E2E2E !important; background-color: transparent !important; }
.table thead th {
    background-color: var(--imatch-gray-bg) !important;
    color: var(--imatch-gray) !important;
    font-size: .76rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-bottom: 2px solid #E4E7EB !important;
    padding: .85rem 1rem !important;
}
.table td { border-color: #F0F2F5 !important; color: #2E2E2E !important; vertical-align: middle; }
.table-hover > tbody > tr:hover > td { background-color: var(--imatch-red-bg) !important; }
.table-light, .table-active { background-color: var(--imatch-gray-bg) !important; }

/* ══════════════════════════════════════════════════════════
   FORMULARIOS
══════════════════════════════════════════════════════════ */
.form-control, .form-select, .form-control-modern {
    background-color: #ffffff !important;
    border: 1px solid #D1D9E0 !important;
    color: #2E2E2E !important;
    border-radius: 6px !important;
}
.form-control:focus, .form-select:focus, .form-control-modern:focus {
    border-color: var(--imatch-red) !important;
    box-shadow: 0 0 0 3px rgba(220,20,20,.12) !important;
    background-color: #ffffff !important;
    color: #2E2E2E !important;
}
.form-label, .form-label-modern { color: #374151 !important; font-weight: 500; font-size: .875rem; }
.input-group-text { background-color: var(--imatch-gray-bg) !important; border-color: #D1D9E0 !important; color: var(--imatch-gray) !important; }
.form-check-input:checked { background-color: var(--imatch-red) !important; border-color: var(--imatch-red) !important; }

/* ══════════════════════════════════════════════════════════
   ALERTAS
══════════════════════════════════════════════════════════ */
.alert { border-radius: 8px !important; font-size: .875rem; }
.alert-success  { background:#EDF7EE !important; border-color:#A7D7AB !important; color:#1B7E3A !important; }
.alert-warning  { background:#FFFBEB !important; border-color:#FCD34D !important; color:#92400E !important; }
.alert-danger   { background:#FDF3F3 !important; border-color:#F5D0D0 !important; color:#9B0D0D !important; }
.alert-info     { background:#EFF6FF !important; border-color:#BFDBFE !important; color:#1E40AF !important; }
.alert-light    { background:#F9FAFB !important; border-color:#E5E7EB !important; color:#374151 !important; }
.alert-link { font-weight: 600; color: inherit !important; }

/* ══════════════════════════════════════════════════════════
   NAV TABS
══════════════════════════════════════════════════════════ */
.nav-tabs { border-bottom: 2px solid #E4E7EB !important; }
.nav-tabs .nav-link { color: #6B7280 !important; font-weight: 500; border: none !important; padding: .6rem 1rem; border-radius: 6px 6px 0 0 !important; }
.nav-tabs .nav-link:hover { color: var(--imatch-red) !important; background: var(--imatch-red-bg) !important; }
.nav-tabs .nav-link.active { color: var(--imatch-red) !important; font-weight: 600; border-bottom: 2px solid var(--imatch-red) !important; background: transparent !important; }

/* ══════════════════════════════════════════════════════════
   PAGINACIÓN
══════════════════════════════════════════════════════════ */
.page-link { color: var(--imatch-red) !important; background: #fff; border-color: #E4E7EB !important; }
.page-link:hover { background: var(--imatch-red-bg) !important; }
.page-item.active .page-link { background-color: var(--imatch-red) !important; border-color: var(--imatch-red) !important; color: #fff !important; }
.page-item.disabled .page-link { color: #9CA3AF !important; }

/* ══════════════════════════════════════════════════════════
   LINKS Y DROPDOWNS
══════════════════════════════════════════════════════════ */
a { color: var(--imatch-red) !important; }
a:hover { color: var(--imatch-red-dk) !important; }
a.text-decoration-none { text-decoration: none !important; }
a.nav-link, a.sidebar-link { color: inherit !important; }
.dropdown-menu { background: #ffffff !important; border: 1px solid #E4E7EB !important; box-shadow: 0 4px 20px rgba(0,0,0,.1) !important; border-radius: 8px !important; }
.dropdown-item { color: var(--imatch-gray-dk) !important; font-size: .875rem; }
.dropdown-item:hover { background-color: var(--imatch-red-bg) !important; color: var(--imatch-red) !important; }
.dropdown-item.text-danger { color: #DC1414 !important; }
.dropdown-header { color: #9CA3AF !important; font-size: .72rem; font-weight: 600; letter-spacing: .05em; }
.dropdown-divider { border-color: #E4E7EB !important; }

/* ══════════════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════════════ */
.breadcrumb { background: transparent !important; }
.breadcrumb-item a { color: var(--imatch-red) !important; }
.breadcrumb-item.active { color: #6B7280 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #9CA3AF !important; }

/* ══════════════════════════════════════════════════════════
   LIST GROUPS
══════════════════════════════════════════════════════════ */
.list-group-item { background-color: #fff !important; border-color: #E4E7EB !important; color: #2E2E2E !important; }
.list-group-item-action:hover { background-color: var(--imatch-red-bg) !important; color: var(--imatch-gray-dk) !important; }

/* ══════════════════════════════════════════════════════════
   PROGRESS / STAT
══════════════════════════════════════════════════════════ */
.progress { background-color: #F0F2F5 !important; border-radius: 6px; }
.progress-bar.bg-success { background-color: #1B7E3A !important; }
.stat-number { font-size: 2rem; font-weight: 700; color: var(--imatch-gray-dk) !important; }
.stat-label  { font-size: .8rem; color: #6B7280 !important; font-weight: 500; }

/* ══════════════════════════════════════════════════════════
   STAR RATING / CHECKOUT / MISC
══════════════════════════════════════════════════════════ */
.star-rating { display:flex; flex-direction:row-reverse; gap:4px; }
.star-rating input { display:none; }
.star-rating label { font-size:2rem; cursor:pointer; color:#E4E7EB; transition:color .15s; }
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: var(--imatch-red); }

.theme-toggle { background: var(--imatch-gray-bg); border: 1px solid var(--imatch-gray-lt); border-radius: 6px; padding: 6px 10px; cursor: pointer; color: var(--imatch-gray); }
.theme-toggle:hover { background: var(--imatch-red-bg); color: var(--imatch-red); }

.stripe-element { border: 1px solid #D1D9E0 !important; border-radius: 6px; padding: .75rem 1rem; background: #fff; min-height: 44px; }
.checkout-container { max-width: 900px; margin: 0 auto; }

.processing-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.processing-content { background: #fff; padding: 2.5rem 3rem; border-radius: 12px; text-align: center; min-width: 220px; }

/* ══════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #F0F2F5; }
::-webkit-scrollbar-thumb { background: #CBD2DA; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--imatch-red); }

/* ══════════════════════════════════════════════════════════
   BORDER HELPERS usados en la app
══════════════════════════════════════════════════════════ */
.border-imatch-lime, .border-imatch-green { border-color: var(--imatch-red) !important; }
.border-start.border-imatch-lime, .border-start.border-imatch-green { border-left-color: var(--imatch-red) !important; }