/* =====================================================================
   Comercial Guaro - Capa de personalización sobre AdminLTE 4.1.0
   Solo variables de marca y ajustes puntuales. No sustituye AdminLTE.
   ===================================================================== */

:root {
    --cg-red: #D71920;
    --cg-red-dark: #A51218;
    --cg-black: #111318;
    --cg-graphite: #1C2129;
    --cg-white: #FFFFFF;
    --cg-gray-50: #F7F8FA;
    --cg-gray-100: #EEF1F4;
    --cg-gray-300: #D4D9E0;
}

/* Marca roja como color primario del sistema (sustituye el azul de Bootstrap) */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--cg-red);
    --bs-primary-rgb: 215, 25, 32;
    --bs-link-color: var(--cg-red);
    --bs-link-color-rgb: 215, 25, 32;
    --bs-link-hover-color: var(--cg-red-dark);
    --bs-link-hover-color-rgb: 165, 18, 24;
    --bs-focus-ring-color: rgba(215, 25, 32, 0.25);
}

[data-bs-theme="dark"] {
    --bs-primary: #e0525a;
    --bs-primary-rgb: 224, 82, 90;
    --bs-link-color: #e0525a;
    --bs-link-color-rgb: 224, 82, 90;
    --bs-link-hover-color: #f0767e;
    --bs-link-hover-color-rgb: 240, 118, 126;
    --bs-focus-ring-color: rgba(224, 82, 90, 0.35);
}

/* =====================================================================
   Sidebar: contraste fijo para temas claro, oscuro y automático.
   Grafito #1c2129, enlaces #d9e0e7, activo blanco sobre rojo.
   ===================================================================== */

.app-sidebar {
    background: #1c2129 !important;
}

.app-sidebar .sidebar-brand {
    background-color: var(--cg-black);
}

.app-sidebar .sidebar-brand,
.app-sidebar .brand-link,
.app-sidebar .brand-text {
    color: #ffffff !important;
}

.app-sidebar .sidebar-menu .nav-link {
    color: #d9e0e7 !important;
    opacity: 1;
}

.app-sidebar .sidebar-menu .nav-link .nav-icon,
.app-sidebar .sidebar-menu .nav-link i {
    color: #bfc8d2 !important;
}

.app-sidebar .sidebar-menu .nav-link:hover {
    color: #ffffff !important;
    background: #2a3039 !important;
}

.app-sidebar .sidebar-menu .nav-link:hover .nav-icon,
.app-sidebar .sidebar-menu .nav-link:hover i {
    color: #ffffff !important;
}

.app-sidebar .sidebar-menu .nav-link.active {
    color: #ffffff !important;
    background: #d71920 !important;
}

.app-sidebar .sidebar-menu .nav-link.active .nav-icon,
.app-sidebar .sidebar-menu .nav-link.active i {
    color: #ffffff !important;
}

.app-sidebar .sidebar-menu .nav-link.disabled {
    color: #8f99a5 !important;
}

/* Selector de tema de la barra superior: visible en todos los tamaños */
.app-header .navbar-nav .cg-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 8.5rem;
    flex-shrink: 0;
    color: var(--bs-body-color) !important;
    border-radius: 0.5rem;
}

.app-header .navbar-nav .cg-theme-toggle:hover,
.app-header .navbar-nav .cg-theme-toggle:focus {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary-bg);
}

.app-header .cg-theme-toggle .bi-chevron-down {
    margin-left: auto;
    font-size: 0.75rem;
}

.cg-theme-menu {
    min-width: 13rem;
    z-index: 1100;
}

/* Logo del sidebar: compacto, sin deformación ni recuadro */
.sidebar-brand .brand-image {
    max-height: 34px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
}

/* Login: logo centrado limitado a 180px, sin fondo ni recuadro */
.cg-login-logo {
    text-align: center;
    margin-bottom: 0.25rem;
}

.cg-login-logo img {
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
}

.login-box {
    width: 420px;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .login-box {
        width: 100%;
    }
}

/* Utilidad: botones de ancho completo solo en móvil */
@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

/* =====================================================================
   Componentes Bootstrap: Bootstrap 5.3 usa colores literales en estos
   componentes; se re-aplican aquí con la marca (claro y oscuro).
   ===================================================================== */

.btn-primary {
    --bs-btn-bg: var(--cg-red);
    --bs-btn-border-color: var(--cg-red);
    --bs-btn-hover-bg: var(--cg-red-dark);
    --bs-btn-hover-border-color: var(--cg-red-dark);
    --bs-btn-active-bg: var(--cg-red-dark);
    --bs-btn-active-border-color: var(--cg-red-dark);
    --bs-btn-disabled-bg: #e58b90;
    --bs-btn-disabled-border-color: #e58b90;
    --bs-btn-focus-shadow-rgb: 215, 25, 32;
}

.btn-outline-primary {
    --bs-btn-color: var(--cg-red);
    --bs-btn-border-color: var(--cg-red);
    --bs-btn-hover-color: var(--cg-white);
    --bs-btn-hover-bg: var(--cg-red);
    --bs-btn-hover-border-color: var(--cg-red);
    --bs-btn-active-color: var(--cg-white);
    --bs-btn-active-bg: var(--cg-red-dark);
    --bs-btn-active-border-color: var(--cg-red-dark);
    --bs-btn-focus-shadow-rgb: 215, 25, 32;
}

.pagination {
    --bs-pagination-active-bg: var(--cg-red);
    --bs-pagination-active-border-color: var(--cg-red);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--cg-red);
}

.form-check-input:checked {
    background-color: var(--cg-red);
    border-color: var(--cg-red);
}

.form-control:focus,
.form-select:focus {
    border-color: #f0a1a5;
    box-shadow: 0 0 0 0.25rem rgba(215, 25, 32, 0.25);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #e0525a;
    --bs-btn-border-color: #e0525a;
    --bs-btn-hover-color: var(--cg-white);
    --bs-btn-hover-bg: #e0525a;
    --bs-btn-hover-border-color: #e0525a;
    --bs-btn-active-color: var(--cg-white);
    --bs-btn-active-bg: #c0434b;
    --bs-btn-active-border-color: #c0434b;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #e0525a;
    border-color: #e0525a;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #e0525a;
    box-shadow: 0 0 0 0.25rem rgba(224, 82, 90, 0.35);
}

/* =====================================================================
   Small-box compactas del dashboard: texto/iconos blancos con contraste
   AA sobre rojo, negro/grafito, gris y verde; altura reducida.
   ===================================================================== */

.small-box {
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.75rem;
}

.small-box > .inner {
    padding: 0.25rem 0.375rem 0.375rem;
}

.small-box .inner h3 {
    margin-bottom: 0.125rem;
    font-size: 1.4rem;
    line-height: 1.15;
    color: var(--cg-white);
}

.small-box .inner p {
    margin-bottom: 0;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--cg-white);
}

.small-box .small-box-icon {
    font-size: 2.6rem;
    height: auto;
    top: 12px;
    right: 12px;
    color: rgba(255, 255, 255, 0.92);
}

.small-box > .small-box-footer {
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--cg-white);
}

.small-box > .small-box-footer:hover,
.small-box > .small-box-footer:focus {
    color: var(--cg-white);
}

/* Verde y gris más oscuros para cumplir contraste AA con texto blanco */
.small-box.bg-success {
    background-color: #146c43 !important;
}

.small-box.bg-secondary {
    background-color: #565e64 !important;
}

/* En móvil: rejilla compacta 2x2 sin espacios vacíos (AdminLTE oculta el icono en xs) */
@media (max-width: 575.98px) {
    .small-box {
        padding: 0.25rem 0.375rem;
        margin-bottom: 0.5rem;
    }

    .small-box .inner h3 {
        font-size: 1.25rem;
    }
}

/* Celdas de fecha con formato corto: sin saltos de línea */
td.text-nowrap,
td.date-cell {
    white-space: nowrap;
}