/*
 * custom.css — Overrides sobre sb-admin-2
 * Paleta warm-celeste para KPI cards
 * No modificar sb-admin-2.min.css directamente.
 */

/* ── 1. Border-left stripes (escala de azul cálido, del más intenso al más suave) ── */
.border-left-danger    { border-left-color: #1A6FA6 !important; }
.border-left-primary   { border-left-color: #2586BF !important; }
.border-left-warning   { border-left-color: #3A9FD6 !important; }
.border-left-success   { border-left-color: #45C4B4 !important; }
.border-left-info      { border-left-color: #5BB8E5 !important; }
.border-left-secondary { border-left-color: #8DCFE8 !important; }

/* ── 2. Etiquetas e íconos dentro de KPI cards (scoped a .card.py-2) ── */
.card.py-2 .text-danger    { color: #1A6FA6 !important; }
.card.py-2 .text-primary   { color: #2586BF !important; }
.card.py-2 .text-warning   { color: #3A9FD6 !important; }
.card.py-2 .text-success   { color: #45C4B4 !important; }
.card.py-2 .text-info      { color: #5BB8E5 !important; }
.card.py-2 .text-secondary { color: #8DCFE8 !important; }

/* ── 3. Tooltips — fondo celeste cálido ── */
.tooltip-inner {
    background-color: #1A6FA6 !important;
    color: #fff !important;
    font-size: .78rem;
}
/* Flechas — cubrir todas las variantes de Bootstrap 4.x */
.tooltip .arrow::before { border-top-color: #1A6FA6 !important; }

.bs-tooltip-top    .arrow::before { border-top-color:    #1A6FA6 !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #1A6FA6 !important; }
.bs-tooltip-left   .arrow::before { border-left-color:   #1A6FA6 !important; }
.bs-tooltip-right  .arrow::before { border-right-color:  #1A6FA6 !important; }

.bs-tooltip-auto[x-placement^="top"]    .arrow::before { border-top-color:    #1A6FA6 !important; }
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #1A6FA6 !important; }
.bs-tooltip-auto[x-placement^="left"]   .arrow::before { border-left-color:   #1A6FA6 !important; }
.bs-tooltip-auto[x-placement^="right"]  .arrow::before { border-right-color:  #1A6FA6 !important; }

/* ── 4. Footer cross-browser fix (Edge / Chromium) ─────────────────────────────
   Edge no calcula bien width:100% en flex-children cuando el padre tiene
   overflow-x:hidden, haciendo que el footer aparezca como columna lateral.
   Solución: forzar min-width:0 en el wrapper y display:block en el footer.
──────────────────────────────────────────────────────────────────────────────── */
#wrapper #content-wrapper {
    min-width: 0;           /* permite que el flex-item se encoja correctamente  */
    flex: 1 1 0%;           /* crece y se encoge dentro del #wrapper horizontal  */
}

.sticky-footer {
    display: block !important;          /* saca el footer del contexto flex      */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    align-self: stretch;
}

.sticky-footer .container,
.sticky-footer .container-fluid {
    width: 100%;
    max-width: 100%;
}

.sticky-footer .copyright {
    display: block;
    width: 100%;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sidebar Propuesta 2: Grupos consolidados ─────────────────────────────
   Paneles de grupo densos (Inventario, Amenazas) con scroll para no
   desbordar la pantalla. El resto quedan sin límite de alto.
─────────────────────────────────────────────────────────────────────────── */
.sidebar-group-panel {
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c8cdd6 transparent;
}
.sidebar-group-panel::-webkit-scrollbar {
    width: 4px;
}
.sidebar-group-panel::-webkit-scrollbar-thumb {
    background-color: #c8cdd6;
    border-radius: 2px;
}

/* Asegura que los títulos de sección dentro del panel sean legibles */
.sidebar-group-panel .collapse-header {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #b7b9cc;
    padding: 0.6rem 1rem 0.2rem;
    letter-spacing: 0.04em;
}

/* Ancho de sidebar ligeramente mayor para acomodar etiquetas largas */
@media (min-width: 768px) {
    .sidebar {
        width: 15.5rem !important;
    }
}