/* ================================================================
   TFMSolutions IA — Global Styles
   Tema: Glassmorphism Futurista (dark mode)
   ================================================================ */

/* ── Variables ── */
:root {
    --bg-deep:       #060b18;
    --bg-base:       #0d1528;
    --bg-panel:      rgba(255,255,255,.04);
    --bg-panel-hover:rgba(255,255,255,.07);
    --glass-border:  rgba(255,255,255,.09);
    --glass-blur:    blur(18px);

    --accent-blue:   #4f8ef7;
    --accent-purple: #8b5cf6;
    --accent-teal:   #06d6a0;
    --accent-pink:   #f472b6;

    --grad-primary:  linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    --grad-glow:     linear-gradient(135deg, #1a3a8a, #4b2a8a);

    --text-primary:  #e2e8f0;
    --text-muted:    #94a3b8;
    --text-dim:      #475569;

    --sidebar-w:     270px;
    --topbar-h:      60px;
    --radius-lg:     16px;
    --radius-md:     10px;
    --radius-sm:     6px;

    --transition:    all .25s cubic-bezier(.4,0,.2,1);
    --shadow-glow:   0 0 24px rgba(79,142,247,.18);
    --shadow-card:   0 8px 32px rgba(0,0,0,.4);

    /* Hace que los controles nativos (popup de <select>, scrollbars) se
       rendericen en oscuro, evitando el fondo blanco de las opciones */
    color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Fondo animado con partículas sutiles */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(79,142,247,.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ── Scrollbar personalizada ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(79,142,247,.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* ── Glass card ── */
.glass {
    background: var(--bg-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* ── Inputs ── */
.tfm-input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: .45rem .8rem;
    font-size: .9rem;
    transition: var(--transition);
    outline: none;
}
.tfm-input:focus {
    border-color: rgba(79,142,247,.55);
    box-shadow: 0 0 0 3px rgba(79,142,247,.15);
    background-color: rgba(255,255,255,.08);
}
.tfm-input::placeholder { color: var(--text-dim); }
.tfm-input:disabled {
    opacity: 1;
    color: var(--text-muted);
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.06);
    cursor: not-allowed;
}

/* ── Select: quita el chrome nativo (borde grueso) y usa flecha propia ── */
select.tfm-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 2.1rem;
    border-color: rgba(79,142,247,.18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px;
}
select.tfm-input:hover { border-color: rgba(79,142,247,.35); background-color: rgba(255,255,255,.07); }
select.tfm-input:focus {
    border-color: rgba(79,142,247,.55);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%234f8ef7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.tfm-input option { background: #0d1526; color: #e2e8f0; }
.tfm-input option:checked { background: #1a2740; }

/* ── Botones ── */
.btn-tfm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.btn-tfm::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .2s;
}
.btn-tfm:hover::after { background: rgba(255,255,255,.08); }
.btn-tfm:active { transform: scale(.97); }

.btn-primary  { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 14px rgba(79,142,247,.3); }
.btn-ghost    { background: transparent; color: var(--text-primary); border: 1px solid var(--glass-border); }
.btn-ghost:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.btn-danger   { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.btn-success  { background: rgba(6,214,160,.15); color: var(--accent-teal); border: 1px solid rgba(6,214,160,.3); }

/* Ripple effect en botones */
.btn-tfm .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-anim .5s linear;
    background: rgba(255,255,255,.25);
    pointer-events: none;
}
@keyframes ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* ── Título de sección ── */
.section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: .4rem 0 .8rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1rem;
}
.section-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 18px;
    background: var(--grad-primary);
    border-radius: 99px;
}

/* ── Table ── */
.tfm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
}
.tfm-table thead th {
    background: rgba(79,142,247,.1);
    color: var(--accent-blue);
    padding: .6rem .8rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .5px;
    border-bottom: 1px solid rgba(79,142,247,.2);
}
.tfm-table tbody tr {
    transition: background .15s;
}
.tfm-table tbody tr:hover {
    background: rgba(255,255,255,.04);
}
.tfm-table tbody td {
    padding: .55rem .8rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--text-primary);
}

/* ── Badge ── */
.badge-tfm {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
}
.badge-blue   { background: rgba(79,142,247,.15); color: var(--accent-blue); }
.badge-purple { background: rgba(139,92,246,.15); color: var(--accent-purple); }
.badge-teal   { background: rgba(6,214,160,.15);  color: var(--accent-teal); }
.badge-red    { background: rgba(239,68,68,.15);  color: #f87171; }

/* ── Page enter animation ── */
/* Sin 'forwards': al terminar, el transform vuelve a 'none' para no
   crear un containing block que rompa los modales con position:fixed. */
.page-enter {
    animation: pageEnter .35s cubic-bezier(.4,0,.2,1);
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal base ── */
.tfm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}
.tfm-modal {
    background: rgba(13,21,40,.92);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,.6), var(--shadow-glow);
    padding: 1.5rem;
    min-width: 320px;
    max-width: 90vw;
    animation: modalEnter .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalEnter {
    from { opacity: 0; transform: scale(.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Glow line decorativa ── */
.glow-line {
    height: 2px;
    background: var(--grad-primary);
    border-radius: 99px;
    box-shadow: 0 0 8px rgba(79,142,247,.5);
}

/* ── Tooltip ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(.9);
    background: rgba(13,21,40,.95);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .78rem;
    white-space: nowrap;
    padding: .3rem .6rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ================================================================
   TEMA CLARO  (html[data-theme="light"])
   Redefine las variables base + ajusta las clases compartidas que
   usan colores fijos. El prefijo html[data-theme="light"] le da
   mayor especificidad que los estilos por componente.
   ================================================================ */
html[data-theme="light"] {
    --bg-deep:        #eef2f7;
    --bg-base:        #f8fafc;
    --bg-panel:       #ffffff;
    --bg-panel-hover: #f1f5f9;
    --glass-border:   rgba(15,23,42,.10);
    --text-primary:   #1e293b;
    --text-muted:     #64748b;
    --text-dim:       #94a3b8;
    --shadow-card:    0 4px 20px rgba(15,23,42,.08);
    --shadow-glow:    0 0 24px rgba(79,142,247,.12);
}
html[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(79,142,247,.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,.05) 0%, transparent 60%);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(79,142,247,.4); }

/* Glass cards */
html[data-theme="light"] .glass { background:#fff; box-shadow:0 4px 20px rgba(15,23,42,.07); }

/* Inputs y selects */
html[data-theme="light"] .tfm-input { background:#fff; border-color:rgba(15,23,42,.14); color:#1e293b; }
html[data-theme="light"] select.tfm-input { border-color:rgba(15,23,42,.14); }
html[data-theme="light"] select.tfm-input:hover { border-color:rgba(79,142,247,.4); background-color:#f8fafc; }
html[data-theme="light"] .tfm-input option { background:#fff; color:#1e293b; }
html[data-theme="light"] .tfm-input:disabled { background:#f1f5f9; color:#64748b; border-color:rgba(15,23,42,.08); }

/* Textos: titulos / valores (oscuros) */
html[data-theme="light"] .page-title,
html[data-theme="light"] .ks-val, html[data-theme="light"] .er-val, html[data-theme="light"] .mr-val,
html[data-theme="light"] .emp-nombre, html[data-theme="light"] .td-nombre, html[data-theme="light"] .td-salario,
html[data-theme="light"] .td-cliente, html[data-theme="light"] .modal-title,
html[data-theme="light"] .welcome-title, html[data-theme="light"] .kpi-val,
html[data-theme="light"] .card-header h3, html[data-theme="light"] .cs-title { color:#1e293b; }

/* Textos: secundarios / etiquetas (gris) */
html[data-theme="light"] .page-desc, html[data-theme="light"] .field-label,
html[data-theme="light"] .ks-label, html[data-theme="light"] .er-label, html[data-theme="light"] .mr-label,
html[data-theme="light"] .emp-sub, html[data-theme="light"] .td-muted, html[data-theme="light"] .td-mono,
html[data-theme="light"] .td-date, html[data-theme="light"] .emp-ingreso, html[data-theme="light"] .kpi-label,
html[data-theme="light"] .kpi-sub, html[data-theme="light"] .welcome-sub,
html[data-theme="light"] .nav-section-label { color:#64748b; }

/* Tabla — encabezados gris con texto blanco */
html[data-theme="light"] .tfm-table thead th { background:#475569; color:#fff; border-bottom-color:#3b475a; }
html[data-theme="light"] .tfm-table tbody td { color:#1e293b; border-bottom-color:rgba(15,23,42,.06); }
html[data-theme="light"] .tfm-table tbody tr:hover { background:rgba(30,58,138,.05); }

/* KPI / tiras / paneles con fondo translucido */
html[data-theme="light"] .kpi-strip, html[data-theme="light"] .filter-panel,
html[data-theme="light"] .resumen-conc, html[data-theme="light"] .kpi-card { background:#fff; border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .ks-sep, html[data-theme="light"] .rc-sep, html[data-theme="light"] .er-sep { background:rgba(15,23,42,.1); }

/* Code cell / chips de codigo */
html[data-theme="light"] .code-cell { background:rgba(79,142,247,.1); color:#3b6fd4; }

/* Barra de progreso de cuotas: texto azul oscuro y pista visible */
html[data-theme="light"] .cuotas-bar { background:rgba(30,58,138,.10); }
html[data-theme="light"] .cb-text { color:#1e3a8a; }

/* Linea divisoria */
html[data-theme="light"] .glow-line { background:linear-gradient(90deg,transparent,rgba(79,142,247,.3),transparent); }

/* Modales — cabecera azul oscuro con texto blanco */
html[data-theme="light"] .modal-card { background:#fff; border-color:rgba(15,23,42,.12); box-shadow:0 24px 80px rgba(15,23,42,.25); }
html[data-theme="light"] .modal-header { background:#1e3a8a; border-bottom-color:#16306b; }
html[data-theme="light"] .modal-header .modal-title { color:#fff; }
html[data-theme="light"] .modal-header .icon-btn { color:rgba(255,255,255,.8); }
html[data-theme="light"] .modal-header .icon-btn:hover { color:#fff; background:rgba(255,255,255,.15); }
html[data-theme="light"] .modal-footer { border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .edit-resumen, html[data-theme="light"] .mov-resumen,
html[data-theme="light"] .abono-saldo, html[data-theme="light"] .mov-table-wrap { background:#f8fafc; border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .quick-btn { background:#f1f5f9; border-color:rgba(79,142,247,.2); color:#475569; }

/* Sidebar (menú de opciones) */
html[data-theme="light"] .sidebar { background:#fff; border-right-color:rgba(15,23,42,.08); box-shadow:4px 0 30px rgba(15,23,42,.08); }
/* Cabecera del menú: azul oscuro como la barra principal, texto blanco, IA azul claro */
html[data-theme="light"] .sidebar-header { background:#1e3a8a; border-bottom-color:#16306b; }
html[data-theme="light"] .brand-name { color:#fff; }
html[data-theme="light"] .brand-ia { background:none; -webkit-text-fill-color:#7cc0ff; color:#7cc0ff; }
/* Opciones del menú en azul oscuro */
html[data-theme="light"] .nav-item { color:#1e3a8a; }
html[data-theme="light"] .nav-item:hover { background:rgba(30,58,138,.08); color:#16306b; }
html[data-theme="light"] .nav-group-toggle { color:#1e3a8a; }
html[data-theme="light"] .nav-group-toggle:hover,
html[data-theme="light"] .nav-group.expanded .nav-group-toggle { background:rgba(30,58,138,.08); color:#16306b; }
html[data-theme="light"] .nav-chev { color:rgba(30,58,138,.5); }
html[data-theme="light"] .sidebar-footer { border-color:rgba(15,23,42,.07); }
html[data-theme="light"] .footer-copy { color:rgba(71,85,105,.6); }

/* Topbar — cabecera de la ventana principal: azul oscuro, texto blanco */
html[data-theme="light"] .topbar { background:#1e3a8a; border-bottom-color:#16306b; box-shadow:0 2px 16px rgba(15,23,42,.18); }
html[data-theme="light"] .topbar-brand { color:#fff; }
html[data-theme="light"] .topbar-icon-btn { color:#fff; }
html[data-theme="light"] .topbar-icon-btn:hover { background:rgba(255,255,255,.15); color:#fff; }
html[data-theme="light"] .user-name { color:#fff; }
html[data-theme="light"] .btn-hamburger span { background:#fff; }
html[data-theme="light"] .btn-hamburger:hover { background:rgba(255,255,255,.12); }

/* Quick actions / botones ghost */
html[data-theme="light"] .quick-btn-primary { color:#3b6fd4; }
html[data-theme="light"] .btn-ghost { color:#475569; }

/* Tooltip */
html[data-theme="light"] [data-tooltip]::after { background:#1e293b; color:#fff; border-color:rgba(15,23,42,.2); }