/* Conciliador de Anticipos — Paleta "Banking Light" dual-brand
   LIFTIT azul primario (#0051F4) — dueño del sistema.
   Mandacob ámbar (#E89800) — acento en Fase 1 Desembolso.
   Tema claro con contraste WCAG AAA en texto primario.
   Mantener tokens en sync con app/utils/theme.py. */

:root {
    /* Fondos */
    --bg-primary: #F5F7FA;
    --bg-secondary: #FFFFFF;
    --bg-surface: #F8FAFC;
    --bg-surface-raised: #EEF2F7;
    --border-color: #E2E8F0;

    /* Marcas */
    --brand-liftit: #0051F4;
    --brand-liftit-hover: #2E6FFF;
    --brand-liftit-dim: #0142C5;

    --brand-mandacob: #E89800;
    --brand-mandacob-hover: #FFB020;
    --brand-mandacob-ref: #006CFF;

    /* Alias semánticos — LIFTIT manda */
    --accent-primary: var(--brand-liftit);
    --accent-hover: var(--brand-liftit-hover);

    /* Tinted backgrounds */
    --bg-liftit-tint: #EFF4FF;
    --bg-mandacob-tint: #FFF6E3;
    --bg-success-tint: #ECFDF5;

    /* Semánticos */
    --accent-success: #059669;
    --accent-warning: #D97706;
    --accent-danger: #DC2626;
    --accent-info: #0284C7;

    /* Texto */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-on-accent: #FFFFFF;
    --text-on-mandacob: #FFFFFF;

    /* Sombras (jerarquia en tema claro) */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--bg-primary) !important;
    font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif !important;
    color: var(--text-primary) !important;
}

/* Paddings reducidos para recuperar altura util */
.card-body { padding: 12px 16px !important; }
.card { margin-bottom: 8px !important; }
.dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-spreadsheet-container .dash-spreadsheet-inner th {
    padding: 4px 6px !important;
}

/* --------------------------------------------------------------
   Sobrescrituras de clases Bootstrap oscuras heredadas del tema previo.
   Los layouts usan extensivamente text-light / text-muted / bg-dark;
   en tema claro deben leer oscuras sobre fondos claros.
   -------------------------------------------------------------- */
.text-light,
.text-white {
    color: var(--text-primary) !important;
}

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

.bg-dark {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Cards */
.card {
    border-radius: 10px !important;
    box-shadow: var(--shadow-md);
}

/* Primary buttons — LIFTIT */
.btn-primary {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-on-accent) !important;
    font-weight: 600 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--text-on-accent) !important;
}

.btn-primary:active,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(0, 81, 244, 0.25) !important;
}

/* Botones outline — ajustados para fondo claro */
.btn-outline-warning {
    color: var(--accent-warning) !important;
    border-color: var(--accent-warning) !important;
}
.btn-outline-warning:hover {
    background-color: var(--accent-warning) !important;
    color: #FFFFFF !important;
}
.btn-outline-success {
    color: var(--accent-success) !important;
    border-color: var(--accent-success) !important;
}
.btn-outline-success:hover {
    background-color: var(--accent-success) !important;
    color: #FFFFFF !important;
}

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

/* Mandacob accent button */
.btn-mandacob {
    background-color: var(--brand-mandacob) !important;
    border-color: var(--brand-mandacob) !important;
    color: var(--text-on-mandacob) !important;
    font-weight: 600 !important;
}

.btn-mandacob:hover,
.btn-mandacob:focus {
    background-color: var(--brand-mandacob-hover) !important;
    border-color: var(--brand-mandacob-hover) !important;
    color: #1A1200 !important;
}

/* Inputs */
.form-control.bg-dark,
.form-select.bg-dark,
.form-control,
.form-select {
    background-color: #FFFFFF !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-control:focus,
.form-select:focus,
.form-control.bg-dark:focus,
.form-select.bg-dark:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 81, 244, 0.15) !important;
    background-color: #FFFFFF !important;
    color: var(--text-primary) !important;
}

/* DataTable overrides */
.dash-table-container .dash-spreadsheet-container {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm);
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    font-size: 13px !important;
}

/* Editable cell input — contraste alto para edicion inline */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface-raised) !important;
    border: 1px solid var(--accent-primary) !important;
    font-weight: 600 !important;
    caret-color: var(--text-primary) !important;
}

/* Focused editable cell */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
    background-color: var(--bg-liftit-tint) !important;
    color: var(--text-primary) !important;
}

/* Scrollbar (claro, sutil) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Modal — fondo blanco y texto oscuro */
.modal-content {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg);
}

.modal-content .bg-dark {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

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

/* Navbar */
.navbar {
    padding: 0.5rem 1rem !important;
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Alerts */
.alert {
    border-radius: 8px !important;
    border: 1px solid transparent;
}
.alert-info {
    background-color: #E0F2FE !important;
    color: #075985 !important;
    border-color: #BAE6FD !important;
}
.alert-success {
    background-color: #D1FAE5 !important;
    color: #065F46 !important;
    border-color: #A7F3D0 !important;
}
.alert-warning {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FDE68A !important;
}
.alert-danger {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border-color: #FECACA !important;
}

/* Badges por fase/estado */
.badge-disbursement-pending {
    background-color: var(--accent-warning);
    color: #FFF;
}

.badge-disbursement-done {
    background-color: var(--accent-success);
    color: #FFF;
}

.badge-mandacob {
    background-color: var(--brand-mandacob);
    color: var(--text-on-mandacob);
    font-weight: 600;
}

.badge-liftit {
    background-color: var(--brand-liftit);
    color: var(--text-on-accent);
    font-weight: 600;
}

/* Colores de texto semanticos (usados inline) ajustados para fondo claro */
.text-info {
    color: var(--accent-info) !important;
}
.text-warning {
    color: var(--accent-warning) !important;
}
.text-success {
    color: var(--accent-success) !important;
}
.text-danger {
    color: var(--accent-danger) !important;
}

/* Animation for loading */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dash-table-container {
    animation: fadeIn 0.3s ease-in-out;
}

/* Radio items */
.form-check-input:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Links */
a {
    color: var(--accent-primary);
    text-decoration: none;
}

a:hover {
    color: var(--brand-liftit-hover);
    text-decoration: underline;
}

/* Nav underline active */
.nav-tab-active {
    border-bottom: 2px solid var(--accent-primary) !important;
}

.nav-tab-active-mandacob {
    border-bottom: 2px solid var(--brand-mandacob) !important;
}

/* Bootstrap .border-secondary usada en inputs dark — ajustar a borde suave */
.border-secondary {
    border-color: var(--border-color) !important;
}

/* Logo LIFTIT es blanco sobre transparente (diseñado para fondo oscuro).
   En tema claro necesita un chip oscuro detrás para que se vea. */
img[src$="liftit_logo.png"] {
    background-color: #0F172A;
    border-radius: 6px;
    padding: 6px 10px;
    box-sizing: content-box;
}

/* dbc.Tabs en tema claro — los labels por default son blancos y no se ven. */
.nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
}

.nav-tabs .nav-link:hover {
    color: var(--accent-primary) !important;
    background-color: var(--bg-surface-raised) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active {
    color: var(--accent-primary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) var(--border-color) var(--bg-secondary) !important;
    font-weight: 600 !important;
}