/* 
 * Sobrescrituras y extensiones para SB Admin 2
 * Usa TODAS las variables dinámicas del canal para máxima personalización
 * Variables disponibles:
 * --color-primary, --color-primary-dark, --color-accent, --color-border,
 * --color-card, --color-page, --color-text, --color-bg
 */

/* ========================================
   SIDEBAR - Gradiente con colores del canal
   ======================================== */
.bg-gradient-primary {
    background-color: var(--color-primary) !important;
    background-image: linear-gradient(180deg, var(--color-primary) 10%, var(--color-primary-dark) 100%) !important;
}

/* Logo del sidebar - Usa color de tarjeta */
/* Logo del sidebar - Sin caja, integrado */
/* Logo del sidebar - Sin caja, integrado */
.sidebar-brand {
    background-color: transparent !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    /* Asegurar centrado vertical y horizontal flex */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.sidebar-brand:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.sidebar-brand img {
    /* Convierte el logo a blanco puro para contraste perfecto sobre fondo oscuro */
    filter: brightness(0) invert(1) !important;
    max-height: 50px;
    /* Tamaño ajustado */
    transition: transform 0.2s;
    display: block;
    /* Evita comportamientos extraños de inline */
    margin: 0 auto;
    /* Refuerza centrado */
}

.sidebar-brand:hover img {
    transform: scale(1.05);
    /* Sutil efecto zoom al pasar el mouse */
}

/* Textos del sidebar */
.sidebar .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500;
}

.sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.sidebar .nav-item .nav-link.active {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    font-weight: 600;
}

.sidebar .sidebar-heading {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.sidebar .nav-item .nav-link i {
    color: rgba(255, 255, 255, 0.95) !important;
}

.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Collapse items (subitems del menú) - CORREGIDO LEGIBILIDAD */
.sidebar .collapse .collapse-inner {
    background-color: #ffffff !important;
    /* Fondo Blanco Solido */
    border-radius: 0.35rem;
    padding: 0.5rem 0;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    /* Sombra suave */
}

.sidebar .collapse .collapse-inner .collapse-item {
    color: #3a3b45 !important;
    /* Texto Gris Oscuro */
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
    display: block;
}

.sidebar .collapse .collapse-inner .collapse-item:hover {
    background-color: #eaecf4 !important;
    /* Gris muy claro al hover */
    color: var(--color-primary-dark) !important;
    /* Color corporativo al hover */
    font-weight: 600;
}

.sidebar .collapse .collapse-inner .collapse-item.active {
    background-color: #eaecf4 !important;
    color: var(--color-primary) !important;
    font-weight: 700;
}

/* ========================================
   BODY Y FONDO - Usa color de página
   ======================================== */
body {
    background-color: var(--color-bg, #f8f9fc) !important;
    color: var(--color-text, #5a5c69) !important;
}

#content {
    background-color: var(--color-page, #f8f9fc) !important;
}

/* ========================================
   BOTONES - Primario y Acento
   ======================================== */

/* Botón Primario */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb, 78, 115, 223), 0.5) !important;
}

.btn-primary:disabled {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    opacity: 0.65;
}

/* Botón Outline Primario */
.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Botón Link */
.btn-link {
    color: var(--color-primary) !important;
}

.btn-link:hover {
    color: var(--color-primary-dark) !important;
}

/* Botón Secondary - Gris sutil */
.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-outline-secondary:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

/* Botón Success - Verde sutil */
.btn-success {
    background-color: #1cc88a !important;
    border-color: #1cc88a !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #17a673 !important;
    border-color: #169b6b !important;
    color: #fff !important;
}

/* Botón Danger - Rojo sutil */
.btn-danger {
    background-color: #e74a3b !important;
    border-color: #e74a3b !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #e02d1b !important;
    border-color: #d52a1a !important;
    color: #fff !important;
}

/* Botón Warning - Amarillo */
.btn-warning {
    background-color: #f6c23e !important;
    border-color: #f6c23e !important;
    color: #212529 !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #f4b619 !important;
    border-color: #f4b30d !important;
    color: #212529 !important;
}

/* Botón Info - Cyan */
.btn-info {
    background-color: #36b9cc !important;
    border-color: #36b9cc !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #2c9faf !important;
    border-color: #2a96a5 !important;
    color: #fff !important;
}

/* ========================================
   LINKS Y TEXTO
   ======================================== */
a {
    color: var(--color-primary) !important;
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark) !important;
    text-decoration: underline;
}

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

.text-gray-800 {
    color: var(--color-text, #5a5c69) !important;
}

/* ========================================
   CARDS - Usa color de tarjeta y bordes
   ======================================== */
.card {
    background-color: var(--color-card, #fff) !important;
    border: 1px solid var(--color-border, #e3e6f0);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: var(--color-page, #f8f9fc);
    border-bottom: 1px solid var(--color-border, #e3e6f0);
}

.card-header .text-primary {
    color: var(--color-primary) !important;
}

.border-left-primary {
    border-left: 0.25rem solid var(--color-primary) !important;
}

.border-bottom-primary {
    border-bottom: 0.25rem solid var(--color-primary) !important;
}

/* Bordes de acento */
.border-left-accent {
    border-left: 0.25rem solid var(--color-accent, #36b9cc) !important;
}

.border-left-warning {
    border-left-color: #f6c23e !important;
}

.border-left-danger {
    border-left-color: #e74a3b !important;
}

.border-left-success {
    border-left-color: #1cc88a !important;
}

.border-left-info {
    border-left-color: #36b9cc !important;
}

/* ========================================
   TABLAS - Headers con color primario
   ======================================== */
.table {
    color: var(--color-text, #5a5c69);
    background-color: var(--color-card, #fff);
}

.table thead th {
    background-color: var(--color-page, #f8f9fc);
    color: var(--color-primary) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary) !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.table-bordered {
    border: 1px solid var(--color-border, #e3e6f0);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--color-border, #e3e6f0);
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--color-primary-rgb, 78, 115, 223), 0.05) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-page, rgba(0, 0, 0, 0.02));
}

.thead-light th {
    background-color: var(--color-page, #f8f9fc);
    color: var(--color-primary) !important;
}

/* Tabla responsive */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   BADGES - Primario usa color del canal
   ======================================== */
.badge-primary {
    background-color: var(--color-primary) !important;
    color: #fff;
}

.badge-accent {
    background-color: var(--color-accent, #36b9cc) !important;
    color: #fff;
}

.badge-secondary {
    background-color: #6c757d;
    color: #fff;
}

.badge-success {
    background-color: #1cc88a;
    color: #fff;
}

.badge-danger {
    background-color: #e74a3b;
    color: #fff;
}

.badge-warning {
    background-color: #f6c23e;
    color: #212529;
}

.badge-info {
    background-color: #36b9cc;
    color: #fff;
}

/* ========================================
   ALERTS - Usa colores del canal
   ======================================== */
.alert-primary {
    background-color: rgba(var(--color-primary-rgb, 78, 115, 223), 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.alert-light {
    background-color: var(--color-page, #f8f9fc);
    border-color: var(--color-border, #e3e6f0);
    color: var(--color-text, #5a5c69);
}

/* ========================================
   FORMULARIOS - Focus con color primario
   ======================================== */
.form-control {
    background-color: var(--color-card, #fff);
    border-color: var(--color-border, #d1d3e2);
    color: var(--color-text, #5a5c69);
}

.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb, 78, 115, 223), 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.custom-control-input:checked~.custom-control-label::before {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ========================================
   PAGINACIÓN
   ======================================== */
.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.page-link {
    color: var(--color-primary) !important;
    background-color: var(--color-card, #fff);
    border-color: var(--color-border, #dee2e6);
}

.page-link:hover {
    color: var(--color-primary-dark) !important;
    background-color: var(--color-page, #e9ecef);
    border-color: var(--color-border, #dee2e6);
}

/* ========================================
   PROGRESS BARS
   ======================================== */
.progress {
    background-color: var(--color-page, #e9ecef);
}

.progress-bar {
    background-color: var(--color-primary) !important;
}

.progress-bar-accent {
    background-color: var(--color-accent, #36b9cc) !important;
}

/* ========================================
   DROPDOWN
   ======================================== */
.dropdown-menu {
    background-color: var(--color-card, #fff);
    border-color: var(--color-border, rgba(0, 0, 0, .15));
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.dropdown-item {
    color: var(--color-text, #3a3b45);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--color-primary-rgb, 78, 115, 223), 0.1);
    color: var(--color-primary-dark);
}

.dropdown-item.active {
    background-color: var(--color-primary) !important;
    color: #fff;
}

/* ========================================
   TOPBAR
   ======================================== */
.topbar {
    background-color: var(--color-card, #fff);
    border-bottom: 1px solid var(--color-border, #e3e6f0);
}

.topbar .nav-item .nav-link:hover {
    background-color: var(--color-page, rgba(0, 0, 0, 0.05));
}

.topbar .dropdown-list .dropdown-item:hover {
    background-color: var(--color-page, #f8f9fc);
}

/* ========================================
   HEADINGS
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--color-text, #5a5c69);
}

/* ========================================
   COUNTDOWN TIMERS (funcionalidad existente)
   ======================================== */
.countdown.timer-overdue {
    color: #B42318;
    font-weight: 600;
}

.countdown.timer-warning {
    color: #B54708;
    font-weight: 600;
}

.countdown.timer-done {
    color: #027A48;
    font-weight: 600;
}

/* ========================================
   SPINNER/LOADER
   ======================================== */
.spinner-border.text-primary {
    color: var(--color-primary) !important;
}

/* ========================================
   MODALES
   ======================================== */
.modal-content {
    background-color: var(--color-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, .2));
    border-radius: 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.modal-header {
    border-bottom-color: var(--color-border, #e3e6f0);
}

.modal-footer {
    border-top-color: var(--color-border, #e3e6f0);
}

/* ========================================
   UTILIDADES ADICIONALES CON VARIABLES
   ======================================== */

/* Sombras con color primario */
.shadow-primary {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--color-primary-rgb, 78, 115, 223), 0.15) !important;
}

/* Fondos */
.bg-primary-light {
    background-color: rgba(var(--color-primary-rgb, 78, 115, 223), 0.1) !important;
}

.bg-accent {
    background-color: var(--color-accent, #36b9cc) !important;
    color: #fff;
}

.bg-page {
    background-color: var(--color-page, #f8f9fc) !important;
}

.bg-card {
    background-color: var(--color-card, #fff) !important;
}

/* Texto con hover */
.text-hover-primary:hover {
    color: var(--color-primary) !important;
}

.text-accent {
    color: var(--color-accent, #36b9cc) !important;
}

/* Iconos con color primario */
.icon-primary {
    color: var(--color-primary);
}

.icon-accent {
    color: var(--color-accent, #36b9cc);
}

/* Iconos de FontAwesome con espaciado consistente */
.fas,
.far,
.fab {
    margin-right: 0.25rem;
}

/* ========================================
   LIST GROUP - Usa colores del canal
   ======================================== */
.list-group-item {
    background-color: var(--color-card, #fff);
    border-color: var(--color-border, rgba(0, 0, 0, .125));
    color: var(--color-text, #212529);
}

.list-group-item:hover {
    background-color: var(--color-page, #f8f9fc);
}

.list-group-item.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ========================================
   FOOTER
   ======================================== */
.sticky-footer {
    flex-shrink: 0;
    background-color: var(--color-card, #fff);
    border-top: 1px solid var(--color-border, #e3e6f0);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }

    .card-header h6 {
        font-size: 0.9rem;
    }

    .card-body {
        padding: 1rem;
    }

    .btn-block {
        font-size: 0.9rem;
    }
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */
.btn:focus,
.form-control:focus,
.custom-control-input:focus~.custom-control-label::before {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========================================
   ANIMACIONES SUAVES
   ======================================== */
.btn,
.card,
.table tr,
.nav-link,
.dropdown-item {
    transition: all 0.2s ease-in-out;
}

/* ========================================
   SCROLLBAR PERSONALIZADO
   ======================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-page, #f1f1f1);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* ========================================
   GRADIENTES PERSONALIZADOS
   ======================================== */
.bg-gradient-accent {
    background: linear-gradient(135deg, var(--color-accent, #36b9cc) 0%, var(--color-primary) 100%) !important;
}

.bg-gradient-primary-accent {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent, #36b9cc) 100%) !important;
}

/* ========================================
   INPUTS Y SELECTS PERSONALIZADOS
   ======================================== */
select.form-control {
    background-color: var(--color-card, #fff);
    border-color: var(--color-border, #d1d3e2);
}

textarea.form-control {
    background-color: var(--color-card, #fff);
}

/* ========================================
   BREADCRUMBS
   ======================================== */
.breadcrumb {
    background-color: var(--color-page, #e9ecef);
}

.breadcrumb-item.active {
    color: var(--color-text, #6c757d);
}

.breadcrumb-item a {
    color: var(--color-primary) !important;
}

/* ========================================
   BOTONES EN TABLAS - Mejor diseño
   ======================================== */
.table .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    min-width: 32px;
    margin: 0 2px;
}

/* Espaciado entre botones en columna de acciones */
td.text-nowrap .btn-sm {
    margin-right: 4px;
}

td.text-nowrap .btn-sm:last-child {
    margin-right: 0;
}

/* Iconos en botones pequeños */
.btn-sm i {
    font-size: 0.875rem;
    margin: 0;
}

/* Hover mejorado para botones en tablas */
.table .btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================
   BADGES DE ESTADO - Colores dinámicos
   ======================================== */

/* Badge grande para header */
.badge-lg {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 0.35rem;
}

/* Estados de denuncias */
.badge-ingresada {
    background-color: #4e73df !important;
    color: #fff !important;
}

.badge-en-revision,
.badge-en-revisión {
    background-color: #f6c23e !important;
    color: #fff !important;
}

.badge-resuelta {
    background-color: #1cc88a !important;
    color: #fff !important;
}

.badge-rechazada {
    background-color: #e74a3b !important;
    color: #fff !important;
}

.badge-archivada {
    background-color: #858796 !important;
    color: #fff !important;
}

.badge-pendiente {
    background-color: #36b9cc !important;
    color: #fff !important;
}

/* Estados adicionales */
.badge-asignado-a-oficial,
.badge-asignada-a-oficial {
    background-color: #5a5c69 !important;
    color: #fff !important;
}

.badge-asignado-para-revision,
.badge-asignado-para-revisión,
.badge-asignada-para-revision,
.badge-asignada-para-revisión,
.badge-asignado-a-revisor {
    background-color: #f6c23e !important;
    color: #fff !important;
}

.badge-no-procede {
    background-color: #858796 !important;
    /* Mismo que archivada, o puede ser un gris mas oscuro #5a5c69 */
    color: #fff !important;
}

.badge-con-resolucion,
.badge-con-resolución {
    background-color: #1cc88a !important;
    color: #fff !important;
}

/* Badge de resolución en comentarios */
.badge-resolucion {
    background-color: #1cc88a !important;
    color: #fff !important;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Variantes con acento dinámico */
.badge-primary-dynamic {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.badge-accent-dynamic {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}

/* Hover en badges clickeables */
.badge:hover {
    opacity: 0.9;
    cursor: default;
}

a.badge:hover {
    cursor: pointer;
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ========================================
   BADGES EN TABLAS - Tamaño pequeño
   ======================================== */

/* Badge pequeño para tablas */
.table .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
}

/* Estados en tablas - mismos colores */
.table .badge-ingresada {
    background-color: #4e73df !important;
}

.table .badge-en-revision,
.table .badge-en-revisión {
    background-color: #f6c23e !important;
}

.table .badge-resuelta,
.table .badge-con-resolucion,
.table .badge-con-resolución {
    background-color: #1cc88a !important;
}

.table .badge-rechazada {
    background-color: #e74a3b !important;
}

.table .badge-archivada {
    background-color: #858796 !important;
}

.table .badge-pendiente {
    background-color: #36b9cc !important;
}

.table .badge-asignado-a-oficial,
.table .badge-asignada-a-oficial {
    background-color: #5a5c69 !important;
}

.table .badge-asignado-para-revision,
.table .badge-asignado-para-revisión,
.table .badge-asignada-para-revision,
.table .badge-asignada-para-revisión,
.table .badge-asignado-a-revisor {
    background-color: #f6c23e !important;
}

.table .badge-no-procede {
    background-color: #858796 !important;
}