/* Estilos dinámicos que responden a los temas */

/* ── Temas de color ─────────────────────────────────────── */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --primary-light: #60a5fa;
    --secondary-color: #0891b2;
    --accent-color: #8b5cf6;
    --danger-color: #dc2626;
    --success-color: #16a34a;
    --warning-color: #f59e0b;
    --info-color: #0ea5e9;
    --bg-gradient-start: #1e3a8a;
    --bg-gradient-end: #0f172a;
    --card-bg: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
}
[data-theme="emerald"] {
    --primary-color: #10b981; --primary-dark: #059669; --primary-light: #34d399;
    --secondary-color: #14b8a6; --accent-color: #06b6d4;
    --danger-color: #ef4444; --success-color: #22c55e; --warning-color: #f59e0b;
    --info-color: #3b82f6; --bg-gradient-start: #065f46; --bg-gradient-end: #064e3b;
    --card-bg: #ffffff; --text-primary: #064e3b; --text-secondary: #6b7280; --border-color: #d1fae5;
}
[data-theme="purple"] {
    --primary-color: #8b5cf6; --primary-dark: #7c3aed; --primary-light: #a78bfa;
    --secondary-color: #d946ef; --accent-color: #ec4899;
    --danger-color: #f43f5e; --success-color: #10b981; --warning-color: #f59e0b;
    --info-color: #06b6d4; --bg-gradient-start: #581c87; --bg-gradient-end: #3b0764;
    --card-bg: #ffffff; --text-primary: #3b0764; --text-secondary: #6b7280; --border-color: #ede9fe;
}
[data-theme="orange"] {
    --primary-color: #f97316; --primary-dark: #ea580c; --primary-light: #fb923c;
    --secondary-color: #eab308; --accent-color: #ef4444;
    --danger-color: #dc2626; --success-color: #22c55e; --warning-color: #fbbf24;
    --info-color: #06b6d4; --bg-gradient-start: #9a3412; --bg-gradient-end: #78350f;
    --card-bg: #ffffff; --text-primary: #78350f; --text-secondary: #78716c; --border-color: #fed7aa;
}
[data-theme="slate"] {
    --primary-color: #475569; --primary-dark: #334155; --primary-light: #64748b;
    --secondary-color: #3f6212; --accent-color: #0891b2;
    --danger-color: #dc2626; --success-color: #16a34a; --warning-color: #f59e0b;
    --info-color: #0284c7; --bg-gradient-start: #1e293b; --bg-gradient-end: #0f172a;
    --card-bg: #ffffff; --text-primary: #0f172a; --text-secondary: #64748b; --border-color: #cbd5e1;
}
[data-theme="cyan"] {
    --primary-color: #06b6d4; --primary-dark: #0891b2; --primary-light: #22d3ee;
    --secondary-color: #3b82f6; --accent-color: #8b5cf6;
    --danger-color: #ef4444; --success-color: #10b981; --warning-color: #f59e0b;
    --info-color: #0ea5e9; --bg-gradient-start: #155e75; --bg-gradient-end: #164e63;
    --card-bg: #ffffff; --text-primary: #164e63; --text-secondary: #64748b; --border-color: #cffafe;
}

/* ── Tamaños de fuente ──────────────────────────────────── */
[data-font-size="small"] { font-size: 0.875rem !important; }
[data-font-size="small"] h1 { font-size: 1.75rem !important; }
[data-font-size="small"] h2 { font-size: 1.5rem !important; }
[data-font-size="small"] h3 { font-size: 1.25rem !important; }
[data-font-size="small"] .table { font-size: 0.8rem !important; }
[data-font-size="small"] .btn { font-size: 0.8rem !important; }
[data-font-size="normal"] { font-size: 1rem !important; }
[data-font-size="normal"] h1 { font-size: 2rem !important; }
[data-font-size="normal"] h2 { font-size: 1.75rem !important; }
[data-font-size="normal"] h3 { font-size: 1.5rem !important; }
[data-font-size="large"] { font-size: 1.125rem !important; }
[data-font-size="large"] h1 { font-size: 2.5rem !important; }
[data-font-size="large"] h2 { font-size: 2.25rem !important; }
[data-font-size="large"] h3 { font-size: 2rem !important; }
[data-font-size="large"] .table { font-size: 1.1rem !important; }
[data-font-size="large"] .btn { font-size: 1.1rem !important; }

/* ── Body ───────────────────────────────────────────────── */
body {
    font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    min-height: 100vh;
}

/* ── Tipografía global ──────────────────────────────────── */

/* Tabs Navigation */
.nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1.05rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    border: none;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.03);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    background-color: var(--card-bg) !important;
    border-bottom: 3px solid var(--primary-color) !important;
    font-weight: 600;
}

/* Tabla - filas intercaladas simples */
#tablaContribuyentes tbody tr:nth-child(odd),
#tablaCobros tbody tr:nth-child(odd),
#tablaIngresos tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

/* Gestión de Usuarios: forzar contraste para evitar tabla "en blanco" por tema */
#usuarios .table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

#usuarios .table tbody tr:nth-child(even) {
    background-color: #f8f9fa !important;
}

#usuarios .table tbody td {
    color: #212529 !important;
}

#usuarios .table thead th {
    padding: 9px 8px !important;
    font-size: 0.8rem;
}

#usuarios .table tbody td {
    padding: 7px 8px !important;
    line-height: 1.1;
}

#tablaContribuyentes tbody tr:nth-child(even),
#tablaCobros tbody tr:nth-child(even),
#tablaIngresos tbody tr:nth-child(even) {
    background-color: #f8f9fa !important;
}

/* Hover sutil */
#tablaContribuyentes tbody tr:hover,
#tablaCobros tbody tr:hover,
#tablaIngresos tbody tr:hover {
    background-color: var(--primary-light) !important;
    opacity: 0.4;
    cursor: pointer;
    transition: all 0.2s ease;
}

#tablaContribuyentes tbody tr:hover td,
#tablaCobros tbody tr:hover td,
#tablaIngresos tbody tr:hover td {
    color: var(--text-primary) !important;
}

/* Headers de tabla con gradiente del tema */
.table thead th {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: white !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 14px 10px !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Texto de celdas con color del tema */
.table tbody td {
    color: var(--text-primary) !important;
    font-weight: 400;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color) !important;
}

/* DataTables - SOBRESCRIBIR COMPLETAMENTE */
table.dataTable tbody tr,
table.dataTable.table tbody tr,
table.dataTable.stripe tbody tr,
table.dataTable.display tbody tr,
#tablaContribuyentes_wrapper table tbody tr,
.dataTables_wrapper table tbody tr {
    background-color: var(--card-bg) !important;
}

table.dataTable tbody tr.odd,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
#tablaContribuyentes tbody tr:nth-child(odd),
#tablaCobros tbody tr:nth-child(odd),
#tablaIngresos tbody tr:nth-child(odd),
.dataTables_wrapper table tbody tr:nth-child(odd) {
    background-color: var(--card-bg) !important;
}

table.dataTable tbody tr.even,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even,
#tablaContribuyentes tbody tr:nth-child(even),
#tablaCobros tbody tr:nth-child(even),
#tablaIngresos tbody tr:nth-child(even),
.dataTables_wrapper table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Hover state para DataTables */
table.dataTable tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
#tablaContribuyentes tbody tr:hover,
#tablaCobros tbody tr:hover,
#tablaIngresos tbody tr:hover {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) !important;
}

table.dataTable tbody tr:hover td,
#tablaContribuyentes tbody tr:hover td,
#tablaCobros tbody tr:hover td,
#tablaIngresos tbody tr:hover td {
    color: white !important;
    font-weight: 500 !important;
}

/* Tabla de ingresos específica */
#tablaIngresos thead th {
    background: linear-gradient(135deg, var(--success-color), #059669) !important;
}

/* Tabla de cobros */
#tablaCobros thead th {
    background: linear-gradient(135deg, var(--info-color), #0284c7) !important;
}

/* Tabla de contribuyentes */
#tablaContribuyentes thead th {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
}

#tablaContribuyentes tbody td {
    color: var(--text-primary) !important;
}

#tablaContribuyentes tbody tr:hover {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
}

#tablaContribuyentes tbody tr:hover td {
    color: white !important;
}

/* Botones */
.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

.btn-success:hover {
    background-color: var(--success-color) !important;
    opacity: 0.9;
    transform: translateY(-1px);
}

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

.btn-danger:hover {
    background-color: var(--danger-color) !important;
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    color: white !important;
}

.btn-info:hover {
    background-color: var(--info-color) !important;
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

.btn-warning:hover {
    background-color: var(--warning-color) !important;
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

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

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

.badge.bg-warning {
    background-color: var(--warning-color) !important;
}

.badge.bg-info {
    background-color: var(--info-color) !important;
}

/* Cards */
.card {
    border-color: var(--border-color) !important;
    background-color: var(--card-bg) !important;
}

.card-header {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-bottom-color: var(--border-color) !important;
}

.card-header.bg-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: white !important;
}

.card-header.bg-success {
    background: linear-gradient(135deg, var(--success-color), #059669) !important;
    color: white !important;
}

.card-header.bg-info {
    background: linear-gradient(135deg, var(--info-color), #0284c7) !important;
    color: white !important;
}

/* Progress bars */
.progress-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
}

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

/* Links */
a {
    color: var(--primary-color);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* Borders */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-success {
    border-color: var(--success-color) !important;
}

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

.border-info {
    border-color: var(--info-color) !important;
}

/* Text colors */
.text-primary {
    color: var(--primary-color) !important;
}

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

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

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

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

/* Backgrounds */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

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

.bg-info {
    background-color: var(--info-color) !important;
}

.bg-warning {
    background-color: var(--warning-color) !important;
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25) !important;
}

/* Spinner de carga */
.spinner {
    border-top-color: var(--primary-color) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

/* Modal headers */
.modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: white !important;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Stats cards con borde izquierdo */
.stats-card {
    border-left-width: 4px;
    border-left-style: solid;
}

.stats-card.border-primary {
    border-left-color: var(--primary-color) !important;
}

.stats-card.border-success {
    border-left-color: var(--success-color) !important;
}

.stats-card.border-danger {
    border-left-color: var(--danger-color) !important;
}

.stats-card.border-info {
    border-left-color: var(--info-color) !important;
}

.stats-card.border-warning {
    border-left-color: var(--warning-color) !important;
}

/* Alertas */
.alert-success {
    background-color: rgba(var(--success-color), 0.1) !important;
    border-color: var(--success-color) !important;
    color: var(--success-color) !important;
}

.alert-danger {
    background-color: rgba(var(--danger-color), 0.1) !important;
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
}

.alert-info {
    background-color: rgba(var(--info-color), 0.1) !important;
    border-color: var(--info-color) !important;
    color: var(--info-color) !important;
}

.alert-warning {
    background-color: rgba(var(--warning-color), 0.1) !important;
    border-color: var(--warning-color) !important;
    color: var(--warning-color) !important;
}

/* Compactar espacios entre header, tabs y contenido principal */
#mainTabs {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

#mainTabContent > .tab-pane > .p-4 {
    padding-top: 0.75rem !important;
}

#usuarios > .p-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.75rem !important;
}

#usuarios .row.mb-2,
#usuarios .row.mb-4 {
    margin-bottom: 0.35rem !important;
}

.modal-usuario-dialog {
    max-width: min(920px, calc(100vw - 1rem));
}

#modalUsuario .modal-content {
    max-height: calc(100vh - 1rem);
}

.modal-usuario-body {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.modal-usuario-resumen {
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: #fff7e6;
    border: 1px solid #f3cf8f;
    color: #7a4b00;
    font-size: 0.9rem;
}

.modal-usuario-section + .modal-usuario-section {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.modal-usuario-section-title {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modal-usuario-grid .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.modal-usuario-grid .form-control,
.modal-usuario-grid .form-select {
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
}

.modal-usuario-grid small.text-muted {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
}

.usuario-quality-target {
    padding: 0.6rem;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.usuario-quality-target.is-missing {
    background: rgba(245, 158, 11, 0.12);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.usuario-quality-target.is-missing .form-label {
    color: #a16207;
}

.usuario-quality-target.is-missing .form-control,
.usuario-quality-target.is-missing .form-select {
    border-color: #f59e0b;
    background-color: #fffdf7;
}

#btnGuardarUsuario.is-disabled-by-quality,
#btnGuardarUsuario:disabled {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #f9fafb !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

#btnGuardarUsuario.is-disabled-by-quality:hover,
#btnGuardarUsuario:disabled:hover {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
}

@media (max-width: 767.98px) {
    .modal-usuario-dialog {
        max-width: calc(100vw - 0.5rem);
        margin: 0.25rem auto;
    }

    #modalUsuario .modal-content {
        max-height: calc(100vh - 0.5rem);
    }

    .modal-usuario-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}