/* ── Paleta de colores Argentina TV ───────────────────── */
:root {
    /* Colores principales */
    --ctv-primary:        #74ACDF;  /* Celeste argentino (antena del TV) */
    --ctv-primary-dark:   #5A94C7;  /* Celeste más oscuro */
    --ctv-primary-darker: #4A8FD6;  /* Azul medio (del fondo del logo) */
    --ctv-primary-light:  #D8E6F5;  /* Azul muy claro (on_background) */
    --ctv-primary-text:   #0D3A6E;  /* Azul profundo del fondo del logo */
    
    /* Colores del sistema */
    --ctv-background:     #0D3A6E;  /* Azul profundo del fondo del logo */
    --ctv-surface:        #1A4F8C;  /* Azul medio-oscuro */
    --ctv-card-bg:        #164373;  /* Azul oscuro para tarjetas */
    --ctv-card-border:    #2B5A92;  /* Borde azul medio */
    --ctv-text-primary:   #EBF4FC;  /* Texto blanco-azulado */
    --ctv-text-secondary: #A3C5E6;  /* Texto secundario azul claro */
    --ctv-divider:        #2B5A92;  /* Divisores azul medio */
    --ctv-on-primary:     #FFFFFF;  /* Blanco puro */
    --ctv-on-surface:     #EBF4FC;  /* Casi blanco con tinte azul */
}

/* ── Sobrescribir colores de Bootstrap ────────────────── */

/* === Primary === */
.bg-primary {
    background-color: var(--ctv-primary) !important;
}
.text-primary {
    color: var(--ctv-primary) !important;
}
.border-primary {
    border-color: var(--ctv-primary) !important;
}
.btn-primary {
    background-color: var(--ctv-primary) !important;
    border-color: var(--ctv-primary) !important;
    color: var(--ctv-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--ctv-primary-dark) !important;
    border-color: var(--ctv-primary-dark) !important;
    color: var(--ctv-on-primary) !important;
}
.btn-outline-primary {
    color: var(--ctv-primary) !important;
    border-color: var(--ctv-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--ctv-primary) !important;
    color: var(--ctv-on-primary) !important;
}
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(116, 172, 223, 0.5) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ctv-primary) !important;
}
.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(116, 172, 223, 0.25) !important;
}
.dropdown-item:active {
    background-color: var(--ctv-primary) !important;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(116, 172, 223, 0.25) !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--ctv-primary) !important;
    border-color: var(--ctv-primary) !important;
}
.list-group-item.active {
    background-color: var(--ctv-primary) !important;
    border-color: var(--ctv-primary) !important;
}
.progress-bar {
    background-color: var(--ctv-primary) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ctv-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(116, 172, 223, 0.25) !important;
}
.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(116, 172, 223, 0.25) !important;
}
.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
    border-color: var(--ctv-primary) !important;
}
.input-group-text {
    background-color: var(--ctv-surface) !important;
    border-color: var(--ctv-card-border) !important;
    color: var(--ctv-text-primary) !important;
}
.form-control,
.form-select {
    background-color: var(--ctv-surface) !important;
    border-color: var(--ctv-card-border) !important;
    color: var(--ctv-text-primary) !important;
}
.form-control::placeholder {
    color: var(--ctv-text-secondary) !important;
}
.form-control:disabled,
.form-select:disabled {
    opacity: 0.6;
}

/* === Success (Verde) === */
.bg-success {
    background-color: #2ECC71 !important;
}
.text-success {
    color: #2ECC71 !important;
}
.btn-success {
    background-color: #2ECC71 !important;
    border-color: #2ECC71 !important;
    color: #fff !important;
}
.btn-success:hover {
    background-color: #27AE60 !important;
    border-color: #27AE60 !important;
}
.badge.bg-success {
    background-color: #2ECC71 !important;
}

/* === Warning (Amarillo) === */
.bg-warning {
    background-color: #F1C40F !important;
}
.text-warning {
    color: #F1C40F !important;
}
.badge.bg-warning {
    background-color: #F1C40F !important;
    color: #0D3A6E !important;
}
.btn-warning {
    background-color: #F1C40F !important;
    border-color: #F1C40F !important;
    color: #0D3A6E !important;
}
.btn-warning:hover {
    background-color: #F39C12 !important;
    border-color: #F39C12 !important;
}

/* === Danger (Rojo) === */
.bg-danger {
    background-color: #E74C3C !important;
}
.text-danger {
    color: #E74C3C !important;
}
.btn-danger {
    background-color: #E74C3C !important;
    border-color: #E74C3C !important;
    color: #fff !important;
}
.btn-danger:hover {
    background-color: #C0392B !important;
    border-color: #C0392B !important;
}
.badge.bg-danger {
    background-color: #E74C3C !important;
}

/* === Info (Celeste) === */
.bg-info {
    background-color: var(--ctv-primary) !important;
}
.text-info {
    color: var(--ctv-primary) !important;
}
.btn-info {
    background-color: var(--ctv-primary) !important;
    border-color: var(--ctv-primary) !important;
    color: var(--ctv-on-primary) !important;
}
.btn-info:hover {
    background-color: var(--ctv-primary-dark) !important;
    border-color: var(--ctv-primary-dark) !important;
}

/* === Secondary (Gris) === */
.bg-secondary {
    background-color: #5A6B7C !important;
}
.text-secondary {
    color: #5A6B7C !important;
}
.btn-secondary {
    background-color: #5A6B7C !important;
    border-color: #5A6B7C !important;
    color: #fff !important;
}
.btn-secondary:hover {
    background-color: #4A5A6A !important;
    border-color: #4A5A6A !important;
}
.btn-outline-secondary {
    color: #5A6B7C !important;
    border-color: #5A6B7C !important;
}
.btn-outline-secondary:hover {
    background-color: #5A6B7C !important;
    color: #fff !important;
}

/* === Dark === */
.bg-dark {
    background-color: #1a1a2e !important;
}
.text-dark {
    color: #1a1a2e !important;
}

/* === Text colors === */
.text-muted {
    color: var(--ctv-text-secondary) !important;
}
.text-white {
    color: var(--ctv-on-primary) !important;
}

/* ── Estilos de fondo y tarjetas ────────────────────── */
body {
    background-color: var(--ctv-background) !important;
    color: var(--ctv-text-primary) !important;
}
.card {
    background-color: var(--ctv-card-bg) !important;
    border-color: var(--ctv-card-border) !important;
    color: var(--ctv-text-primary) !important;
}
.card-header {
    background-color: rgba(255,255,255,0.05) !important;
    border-bottom-color: var(--ctv-card-border) !important;
}
.card-footer {
    background-color: rgba(255,255,255,0.02) !important;
    border-top-color: var(--ctv-card-border) !important;
}
.table {
    color: var(--ctv-text-primary) !important;
}
.table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: var(--ctv-divider) !important;
}
.table-light {
    background-color: rgba(255,255,255,0.05) !important;
}
.table-light th {
    color: var(--ctv-text-secondary) !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.03) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.02) !important;
}
.alert-secondary {
    background-color: var(--ctv-surface) !important;
    border-color: var(--ctv-card-border) !important;
    color: var(--ctv-text-primary) !important;
}
.modal-content {
    background-color: var(--ctv-card-bg) !important;
    color: var(--ctv-text-primary) !important;
    border-color: var(--ctv-card-border) !important;
}
.modal-header {
    border-bottom-color: var(--ctv-divider) !important;
}
.modal-footer {
    border-top-color: var(--ctv-divider) !important;
}
.btn-close {
    filter: invert(1) brightness(100) !important;
}
.list-group-item {
    background-color: transparent !important;
    border-color: var(--ctv-divider) !important;
    color: var(--ctv-text-primary) !important;
}
.list-group-item:hover {
    background-color: rgba(255,255,255,0.02) !important;
}
.dropdown-menu {
    background-color: var(--ctv-card-bg) !important;
    border-color: var(--ctv-card-border) !important;
}
.dropdown-item {
    color: var(--ctv-text-primary) !important;
}
.dropdown-item:hover {
    background-color: rgba(255,255,255,0.05) !important;
}
.dropdown-divider {
    border-color: var(--ctv-divider) !important;
}
.pagination .page-link {
    background-color: transparent !important;
    border-color: var(--ctv-card-border) !important;
    color: var(--ctv-text-primary) !important;
}
.pagination .page-link:hover {
    background-color: rgba(255,255,255,0.05) !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--ctv-primary) !important;
    border-color: var(--ctv-primary) !important;
    color: var(--ctv-on-primary) !important;
}
.pagination .page-item.disabled .page-link {
    opacity: 0.5;
}
.breadcrumb-item a {
    color: var(--ctv-primary) !important;
    text-decoration: none !important;
}
.breadcrumb-item a:hover {
    color: var(--ctv-primary-dark) !important;
}
.breadcrumb-item.active {
    color: var(--ctv-text-secondary) !important;
}
.nav-tabs .nav-link {
    color: var(--ctv-text-secondary) !important;
}
.nav-tabs .nav-link:hover {
    color: var(--ctv-text-primary) !important;
}
.nav-tabs .nav-link.active {
    color: var(--ctv-primary) !important;
    border-color: var(--ctv-primary) var(--ctv-primary) var(--ctv-card-bg) !important;
}
.nav-tabs {
    border-bottom-color: var(--ctv-divider) !important;
}
hr {
    border-color: var(--ctv-divider) !important;
}

/* ── Estilos adicionales para badges y etiquetas ────── */
.badge {
    font-weight: 500 !important;
}
.badge.bg-primary {
    background-color: var(--ctv-primary) !important;
    color: var(--ctv-on-primary) !important;
}
.badge.bg-secondary {
    background-color: #5A6B7C !important;
    color: #fff !important;
}
.badge.bg-success {
    background-color: #2ECC71 !important;
    color: #fff !important;
}
.badge.bg-danger {
    background-color: #E74C3C !important;
    color: #fff !important;
}
.badge.bg-warning {
    background-color: #F1C40F !important;
    color: #0D3A6E !important;
}
.badge.bg-info {
    background-color: var(--ctv-primary) !important;
    color: var(--ctv-on-primary) !important;
}
.badge.bg-dark {
    background-color: #1a1a2e !important;
    color: #fff !important;
}

/* ── Estilos del sidebar (si existe) ────────────────── */
.app-sidebar .nav-link.active {
    color: var(--ctv-primary) !important;
}
.app-sidebar .nav-link:hover {
    color: var(--ctv-primary-light) !important;
}

/* ── Botones de tamaño pequeño ────────────────────────── */
.btn-xs {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
}
.btn-outline-secondary.btn-xs {
    color: var(--ctv-text-secondary) !important;
    border-color: var(--ctv-card-border) !important;
}
.btn-outline-secondary.btn-xs:hover {
    background-color: var(--ctv-surface) !important;
    color: var(--ctv-text-primary) !important;
}

/* ── Sombra personalizada ────────────────────────────── */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3) !important;
}
.border-opacity-10 {
    --bs-border-opacity: 0.1 !important;
}
.border-opacity-25 {
    --bs-border-opacity: 0.25 !important;
}
.bg-opacity-10 {
    background-color: rgba(116, 172, 223, 0.1) !important;
}
.bg-opacity-50 {
    background-color: rgba(116, 172, 223, 0.5) !important;
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ctv-background);
}
::-webkit-scrollbar-thumb {
    background: var(--ctv-primary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ctv-primary-dark);
}

/* ── Select personalizado ────────────────────────────── */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23A3C5E6' d='M8 11L3 6h10z'/%3e%3c/svg%3e") !important;
}

/* ── Estructura del layout ────────────────────────────── */

/* Contenedor principal de la app */
.app-wrapper {
    background-color: var(--ctv-background) !important;
    min-height: 100vh;
}

/* Contenido principal */
.app-content {
    background-color: var(--ctv-background) !important;
    padding: 20px;
}

.app-content-header {
    background-color: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid var(--ctv-divider) !important;
    padding: 1rem 0;
}

/* ── Sidebar ────────────────────────────────────────────── */
.app-sidebar,
.sidebar,
[class*="sidebar"] {
    background-color: var(--ctv-surface) !important;
    border-right: 1px solid var(--ctv-divider) !important;
    color: var(--ctv-text-primary) !important;
}

.app-sidebar .nav-link,
.sidebar .nav-link {
    color: var(--ctv-text-secondary) !important;
    border-radius: 0.375rem !important;
    padding: 0.625rem 1rem !important;
    transition: all 0.2s ease !important;
}

.app-sidebar .nav-link:hover,
.sidebar .nav-link:hover {
    background-color: rgba(116, 172, 223, 0.1) !important;
    color: var(--ctv-primary-light) !important;
}

.app-sidebar .nav-link.active,
.sidebar .nav-link.active {
    background-color: rgba(116, 172, 223, 0.15) !important;
    color: var(--ctv-primary) !important;
    border-left: 3px solid var(--ctv-primary) !important;
}

.app-sidebar .nav-link i,
.sidebar .nav-link i {
    width: 1.25rem !important;
    margin-right: 0.75rem !important;
    text-align: center !important;
    opacity: 0.7 !important;
}

.app-sidebar .nav-link.active i,
.sidebar .nav-link.active i {
    opacity: 1 !important;
}

/* Sidebar header / brand */
.app-sidebar .sidebar-brand,
.sidebar .sidebar-brand {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid var(--ctv-divider) !important;
    color: var(--ctv-text-primary) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

.app-sidebar .sidebar-brand i,
.sidebar .sidebar-brand i {
    color: var(--ctv-primary) !important;
}

/* Sidebar submenús */
.app-sidebar .nav-treeview,
.sidebar .nav-treeview {
    padding-left: 0.5rem !important;
}

.app-sidebar .nav-treeview .nav-link,
.sidebar .nav-treeview .nav-link {
    padding-left: 2.5rem !important;
    font-size: 0.9rem !important;
}

/* Sidebar footer */
.app-sidebar .sidebar-footer,
.sidebar .sidebar-footer {
    border-top: 1px solid var(--ctv-divider) !important;
    padding: 1rem !important;
}

/* ── Contenedores principales ──────────────────────────── */

/* Container fluid */
.container-fluid,
.container {
    background-color: transparent !important;
}

/* Contenedor de contenido */
.content-wrapper,
.main-content,
.app-content-body {
    background-color: var(--ctv-background) !important;
}

/* Row y columns */
.row {
    background-color: transparent !important;
}

[class*="col-"] {
    background-color: transparent !important;
}

/* ── Cards y paneles dentro del contenido ──────────────── */
.content-wrapper .card,
.main-content .card,
.app-content-body .card {
    background-color: var(--ctv-card-bg) !important;
    border: 1px solid var(--ctv-card-border) !important;
    color: var(--ctv-text-primary) !important;
}

/* ── Barra de navegación superior (navbar) ────────────── */
.navbar,
.app-navbar,
.main-header {
    background-color: var(--ctv-surface) !important;
    border-bottom: 1px solid var(--ctv-divider) !important;
}

.navbar .nav-link,
.app-navbar .nav-link {
    color: var(--ctv-text-secondary) !important;
}

.navbar .nav-link:hover,
.app-navbar .nav-link:hover {
    color: var(--ctv-text-primary) !important;
}

.navbar .nav-link.active,
.app-navbar .nav-link.active {
    color: var(--ctv-primary) !important;
}

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

/* ── Fondo del body y html ────────────────────────────── */
html,
body {
    background-color: var(--ctv-background) !important;
    color: var(--ctv-text-primary) !important;
    min-height: 100vh;
}

/* ── Contenedor de la aplicación principal ────────────── */
#app,
.app,
.main-app,
.app-container {
    background-color: var(--ctv-background) !important;
}

/* ── Panel de estadísticas ────────────────────────────── */
.stat-card,
.stats-card,
.card-stats {
    background-color: var(--ctv-card-bg) !important;
    border: 1px solid var(--ctv-card-border) !important;
    color: var(--ctv-text-primary) !important;
}

.stat-card .stat-icon,
.stats-card .stat-icon {
    background-color: rgba(116, 172, 223, 0.1) !important;
}

.stat-card .stat-value,
.stats-card .stat-value {
    color: var(--ctv-text-primary) !important;
}

.stat-card .stat-label,
.stats-card .stat-label {
    color: var(--ctv-text-secondary) !important;
}

/* ── Tabla de usuarios ────────────────────────────────── */
.users-table,
.table-users {
    background-color: transparent !important;
}

.users-table thead,
.table-users thead {
    background-color: rgba(255,255,255,0.03) !important;
}

.users-table tbody tr,
.table-users tbody tr {
    border-bottom: 1px solid var(--ctv-divider) !important;
}

.users-table tbody tr:hover,
.table-users tbody tr:hover {
    background-color: rgba(255,255,255,0.02) !important;
}

/* ── Filtros y formularios en panel ───────────────────── */
.filter-section,
.search-section {
    background-color: transparent !important;
}

.filter-section .card,
.search-section .card {
    background-color: var(--ctv-card-bg) !important;
    border: 1px solid var(--ctv-card-border) !important;
}

/* ── Breadcrumb ────────────────────────────────────────── */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ctv-text-secondary) !important;
}

/* ── Footer del panel ──────────────────────────────────── */
.app-footer,
.main-footer {
    background-color: var(--ctv-surface) !important;
    border-top: 1px solid var(--ctv-divider) !important;
    color: var(--ctv-text-secondary) !important;
    padding: 1rem !important;
}

/* ── Scrollbar del sidebar ────────────────────────────── */
.app-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.app-sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: var(--ctv-surface);
}

.app-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: var(--ctv-primary);
    border-radius: 2px;
}

/* ── Responsive: sidebar móvil ────────────────────────── */
@media (max-width: 768px) {
    .app-sidebar,
    .sidebar {
        background-color: var(--ctv-surface) !important;
        border-right: none !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.3) !important;
    }
}