/* ============================================================
   DESAFÍO BOMBERIL 2026
   TEMA INSTITUCIONAL CBM
   ============================================================ */

:root {
    --cbm-navy-950: #0d2832;
    --cbm-navy-900: #123641;
    --cbm-navy-800: #1b4652;
    --cbm-navy-700: #285a66;
    --cbm-blue: #294d69;
    --cbm-teal: #426e77;
    --cbm-gold: #a89a70;
    --cbm-gold-light: #c9bea0;
    --cbm-silver: #c8d1d2;
    --cbm-silver-light: #e7ecec;
    --cbm-bg: #f3f6f6;
    --cbm-white: #ffffff;
    --cbm-ink: #102a33;
    --cbm-muted: #64777d;
    --cbm-success: #198754;
    --cbm-warning: #d89b1d;
    --cbm-danger: #b42318;
    --cbm-radius: 12px;
    --cbm-shadow: 0 8px 26px rgba(16, 42, 51, .08);
}


/* ============================================================
   GENERAL
   ============================================================ */

html,
body {
    margin: 0;
    background: var(--cbm-bg) !important;
    color: var(--cbm-ink);
    font-family: "Segoe UI", Arial, sans-serif;
}


body {
    min-height: 100vh;
}


.app-container {
    min-height: 100vh;
    background: var(--cbm-bg);
}


.main-container {
    background: var(--cbm-bg) !important;
}


.content {
    background: var(--cbm-bg) !important;
}


/* ============================================================
   SIDEBAR
   IMPORTANTE:
   AQUÍ SE ELIMINA CUALQUIER IMAGEN GRANDE DE FONDO
   ============================================================ */

.sidebar {
    background-color: var(--cbm-navy-950) !important;
    background-image: linear-gradient( 180deg, #173b46 0%, #102a33 55%, #0b242c 100% ) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 5px 0 20px rgba(16,42,51,.16);
    overflow-x: hidden;
}


    /* Evita pseudo-elementos con imágenes */

    .sidebar::before,
    .sidebar::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
    }


/* ============================================================
   CABECERA DEL SIDEBAR
   ============================================================ */

.sidebar-header {
    min-height: 100px;
    padding: 15px 14px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.035) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}


/* ============================================================
   LOGO INSTITUCIONAL
   ============================================================ */

.brand-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    flex: 0 0 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 3px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(201,190,160,.85);
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.22);
}


    /* Fuerza el tamaño real de la imagen */

    .brand-icon img,
    .sidebar-header .brand-icon img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }


/* Evita que reglas generales img afecten al logo */

.sidebar img {
    object-fit: contain;
}


.sidebar-header img {
    max-width: 52px !important;
}


/* ============================================================
   TEXTO DE MARCA
   ============================================================ */

.brand-title {
    margin: 0;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.15;
    letter-spacing: .5px;
    text-shadow: none !important;
}


.brand-subtitle {
    margin-top: 4px;
    color: var(--cbm-gold-light) !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: none !important;
}


/* ============================================================
   DIVISOR
   ============================================================ */

.sidebar-divider {
    margin: 0;
    border-color: rgba(255,255,255,.12) !important;
}


/* ============================================================
   MENÚ LATERAL
   ============================================================ */

.sidebar-menu {
    padding-top: 10px;
    padding-bottom: 30px;
    background: transparent !important;
    background-image: none !important;
}


/* ============================================================
   SECCIONES
   ============================================================ */

.menu-section {
    margin-top: 20px;
    margin-bottom: 7px;
    padding-left: 20px;
    color: #b8c8ca !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    opacity: 1 !important;
    text-shadow: none !important;
}


/* ============================================================
   OPCIONES
   ============================================================ */

.sidebar .menu-item,
.sidebar-menu .menu-item,
.sidebar a.menu-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px 10px 20px;
    margin: 2px 8px 2px 0;
    color: #f3f7f7 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-left: 4px solid transparent !important;
    border-radius: 0 9px 9px 0;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}


    .sidebar .menu-item span,
    .sidebar .menu-item i {
        color: inherit !important;
        opacity: 1 !important;
    }


    /* HOVER */

    .sidebar .menu-item:hover {
        color: #ffffff !important;
        background: rgba(255,255,255,.09) !important;
        border-left-color: var(--cbm-gold-light) !important;
        transform: translateX(2px);
    }


    /* ACTIVO */

    .sidebar .menu-item.active,
    .sidebar .menu-item[aria-current="page"] {
        color: #ffffff !important;
        background: linear-gradient( 90deg, rgba(66,110,119,.95), rgba(49,95,107,.45) ) !important;
        border-left-color: #ffffff !important;
        font-weight: 800;
    }


/* ============================================================
   ICONOS DEL MENÚ
   ============================================================ */

.menu-icon {
    width: 23px;
    min-width: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cbm-gold-light) !important;
    opacity: 1 !important;
    filter: none !important;
}


/* ============================================================
   SCROLL SIDEBAR
   ============================================================ */

.sidebar::-webkit-scrollbar {
    width: 6px;
}


.sidebar::-webkit-scrollbar-track {
    background: transparent;
}


.sidebar::-webkit-scrollbar-thumb {
    background: rgba(200,209,210,.35);
    border-radius: 10px;
}


    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(200,209,210,.55);
    }


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
    background: rgba(255,255,255,.98) !important;
    color: var(--cbm-ink) !important;
    border-bottom: 1px solid var(--cbm-silver-light) !important;
    box-shadow: 0 4px 18px rgba(16,42,51,.07);
}


.sidebar-toggle {
    color: var(--cbm-navy-900) !important;
}


.event-status {
    color: var(--cbm-navy-800) !important;
}


.status-dot {
    background: #21b66f !important;
    box-shadow: 0 0 0 4px rgba(33,182,111,.12);
}


.user-info {
    color: var(--cbm-ink) !important;
}


.user-avatar {
    border: 2px solid var(--cbm-navy-700) !important;
    box-shadow: 0 0 0 3px rgba(49,95,107,.12);
}


/* ============================================================
   TIPOGRAFÍA GENERAL
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cbm-ink);
}


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


/* ============================================================
   CARDS
   ============================================================ */

.card {
    border: 1px solid var(--cbm-silver-light) !important;
    border-radius: var(--cbm-radius) !important;
    background: #ffffff;
    box-shadow: var(--cbm-shadow);
    overflow: hidden;
}


.card-header {
    border-bottom: 1px solid var(--cbm-silver-light) !important;
}


    .card-header.bg-dark,
    .bg-dark {
        background: var(--cbm-navy-950) !important;
        color: #ffffff !important;
    }


    .card-header.bg-white {
        background: #ffffff !important;
    }


/* ============================================================
   BOTONES
   ============================================================ */

.btn {
    border-radius: 8px;
    font-weight: 650;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}


    .btn:hover {
        transform: translateY(-1px);
    }


.btn-primary {
    color: #ffffff !important;
    background: var(--cbm-navy-800) !important;
    border-color: var(--cbm-navy-800) !important;
}


    .btn-primary:hover {
        background: var(--cbm-navy-950) !important;
        border-color: var(--cbm-navy-950) !important;
    }


.btn-success {
    color: #ffffff !important;
    background: var(--cbm-teal) !important;
    border-color: var(--cbm-teal) !important;
}


.btn-danger {
    color: #ffffff !important;
    background: var(--cbm-danger) !important;
    border-color: var(--cbm-danger) !important;
}


.btn-warning {
    color: var(--cbm-navy-950) !important;
    background: var(--cbm-gold-light) !important;
    border-color: var(--cbm-gold) !important;
}


.btn-light {
    color: var(--cbm-navy-950) !important;
    background: #ffffff !important;
    border-color: var(--cbm-silver) !important;
}


.btn-outline-danger {
    color: var(--cbm-danger) !important;
    border-color: var(--cbm-danger) !important;
}


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


/* ============================================================
   FORMULARIOS
   ============================================================ */

.form-control,
.form-select {
    border: 1px solid #cbd6d8 !important;
    border-radius: 8px;
    background: #ffffff;
}


    .form-control:focus,
    .form-select:focus {
        border-color: var(--cbm-teal) !important;
        box-shadow: 0 0 0 .20rem rgba(66,110,119,.15) !important;
    }


/* ============================================================
   TABLAS
   ============================================================ */

.table {
    --bs-table-color: var(--cbm-ink);
}


.table-light {
    --bs-table-bg: #eaf0f0;
    --bs-table-color: var(--cbm-navy-950);
}


.table thead th {
    color: var(--cbm-navy-950);
    font-weight: 800;
    border-bottom: 2px solid var(--cbm-silver);
}


.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(66,110,119,.06);
}


/* ============================================================
   BADGES
   ============================================================ */

.badge.bg-primary {
    background: var(--cbm-navy-700) !important;
}


.badge.bg-dark {
    background: var(--cbm-navy-950) !important;
}


.badge.bg-success {
    background: var(--cbm-success) !important;
}


.badge.bg-warning {
    color: var(--cbm-navy-950) !important;
    background: var(--cbm-gold-light) !important;
}


.badge.bg-danger {
    background: var(--cbm-danger) !important;
}


/* ============================================================
   ALERTAS
   ============================================================ */

.alert-success {
    border-color: rgba(25,135,84,.25);
}


.alert-danger {
    border-color: rgba(180,35,24,.25);
}


/* ============================================================
   MODALES
   ============================================================ */

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(16,42,51,.22);
}


.modal-header {
    color: #ffffff;
    background: var(--cbm-navy-950);
}


.modal-backdrop {
    background: var(--cbm-navy-950);
}


    .modal-backdrop.show {
        opacity: .72;
    }


/* ============================================================
   ESTADOS DE COMPETENCIA
   ============================================================ */

.status-pending,
.estado-pendiente {
    color: var(--cbm-navy-950) !important;
    background: var(--cbm-silver) !important;
}


.status-running,
.estado-en-curso {
    color: #ffffff !important;
    background: var(--cbm-teal) !important;
}


/* ============================================================
   TÓMBOLA
   ============================================================ */

.tombola-modal {
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: var(--cbm-bg) !important;
    box-shadow: 0 18px 55px rgba(16,42,51,.22);
}


.tombola-header {
    padding: 20px 28px;
    color: #ffffff !important;
    background: linear-gradient( 135deg, var(--cbm-navy-950), var(--cbm-navy-700) ) !important;
}


    .tombola-header h2 {
        color: #ffffff !important;
    }


.tombola-kicker,
#tombolaCategoria {
    color: #dce5e6 !important;
}


.tombola-stage {
    background: radial-gradient( circle at center, #ffffff 0%, #eef3f3 72% ) !important;
}


.tombola-drum {
    border-color: var(--cbm-navy-800) !important;
}


.tombola-center {
    color: #ffffff;
    background: var(--cbm-navy-950) !important;
}


.tombola-base {
    background: linear-gradient( var(--cbm-navy-800), var(--cbm-navy-950) ) !important;
}


.btn-tombola {
    color: #ffffff !important;
    background: linear-gradient( 135deg, var(--cbm-navy-700), var(--cbm-navy-950) ) !important;
}


.btn-tombola-finish {
    color: var(--cbm-navy-950) !important;
    background: var(--cbm-gold-light) !important;
}


.tombola-match-card {
    border-left: 5px solid var(--cbm-navy-700) !important;
}


.match-number {
    color: #ffffff !important;
    background: var(--cbm-navy-950) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

    .brand-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        flex: 0 0 52px !important;
    }


        .brand-icon img,
        .sidebar-header .brand-icon img {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            min-height: 44px !important;
            max-width: 44px !important;
            max-height: 44px !important;
        }


    .brand-title {
        font-size: 15px !important;
    }


    .brand-subtitle {
        font-size: 10px !important;
    }
}