/* =========================================================================
VISTA EXPRESS — CSS aislado
-------------------------------------------------------------------------
Reglas:
- TODAS las clases usan el prefijo "vexpress-" (nunca clases genéricas)
para que nada de esto pueda chocar con el CSS existente de Dinerius.
- Reutiliza las variables de color ya definidas en :root de index.html
(--gold, --success, --brick, --paper, --ink-dark, --bg-0, --bg-1, etc.)
— no se redefine ninguna paleta nueva.
- Este archivo se puede borrar completo sin afectar ningún otro estilo
de la app (junto con quitar el que lo carga en index.html).
- Pasada visual (V1.1): la superficie de trabajo ahora es clara/crema
("--paper"), como una planilla premium sobre el fondo oscuro de
Dinerius. Todo lo demás sigue siendo solo estructura visual — sin
datos reales conectados todavía.
========================================================================= */
.vexpress-outer{
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 2px;
}
/* ---- Título + aviso BETA, reducido a una línea discreta ---- */
.vexpress-titulo-row{
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.vexpress-titulo-row .vexpress-titulo-txt{
font-family: 'DM Serif Display', serif;
font-size: 0.95rem;
color: var(--text-on-dark);
}
.vexpress-titulo-row .vexpress-titulo-sub{
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.72rem;
color: var(--text-on-dark);
opacity: 0.55;
font-style: italic;
}
/* Tarea 23: la frase se saca de arriba (empujaba la tabla) y pasa a un
pie discreto, centrado, debajo de todo el contenido — solo Desktop. */
.vexpress-titulo-sub-pie{
text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-style: italic;
font-size: 0.72rem; color: rgba(255,255,255,0.75); margin: 34px 0 4px;
}
.vexpress-beta-tag{
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 6px;
background: rgba(192,138,40,0.18);
color: var(--gold-bright);
border: 1px solid var(--line-gold);
margin-left: 6px;
vertical-align: middle;
}
/* ---- Zona superior compacta (fila 1: modo + negocio + período + agregar) ---- */
.vexpress-fila1{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
justify-content: space-between;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-1);
border: 1px solid rgba(192,138,40,0.22);
}
.vexpress-fila1-izq{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.vexpress-modo-toggle{
display: inline-flex;
border: 1px solid var(--line-gold);
border-radius: 9px;
overflow: hidden;
}
.vexpress-modo-btn{
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size: 0.78rem;
padding: 7px 15px;
background: transparent;
color: var(--text-on-dark);
border: none;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.vexpress-modo-btn.active{
background: var(--gold);
color: #14181D;
}
.vexpress-modo-btn:not(.active):hover{
background: rgba(192,138,40,0.14);
}
.vexpress-negocio-select-wrap{
display: none;
align-items: center;
gap: 6px;
}
.vexpress-negocio-select-wrap.visible{ display: flex; }
.vexpress-negocio-select-label{
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.68rem;
color: var(--text-on-dark);
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vexpress-negocio-select{
font-family: 'Quicksand', sans-serif;
font-weight: 600;
font-size: 0.8rem;
padding: 6px 10px;
border-radius: 7px;
border: 1px solid var(--line-gold);
background: var(--bg-0);
color: var(--text-on-dark);
min-width: 160px;
}
.vexpress-periodo-bar{
display: flex;
align-items: center;
gap: 8px;
font-family: 'DM Serif Display', serif;
font-size: 0.9rem;
color: var(--text-on-dark);
white-space: nowrap;
}
.vexpress-periodo-flecha{
background: rgba(192,138,40,0.14);
border: 1px solid var(--line-gold);
color: var(--gold-bright);
border-radius: 7px;
width: 26px;
height: 26px;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease;
}
.vexpress-periodo-flecha:hover{ background: rgba(192,138,40,0.26); }
.vexpress-agregar-btn{
font-family: 'Quicksand', sans-serif;
font-weight: 800;
font-size: 0.82rem;
padding: 8px 16px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
color: #14181D;
cursor: pointer;
box-shadow: 0 6px 14px -6px rgba(192,138,40,0.6);
white-space: nowrap;
}
.vexpress-agregar-btn:hover{ filter: brightness(1.05); }
.vexpress-agregar-btn:disabled{
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
filter: none;
}
/* ---- 3 indicadores (superficie clara individual, compactos) ---- */
.vexpress-totales-bar{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 640px){
.vexpress-totales-bar{ grid-template-columns: 1fr; }
}
.vexpress-total-card{
border-radius: 10px;
padding: 10px 14px;
background: #EDECE4;
border: 1px solid rgba(28,50,71,0.08);
box-shadow: 0 2px 8px -4px rgba(0,0,0,0.25);
}
.vexpress-total-label{
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.62rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.6;
color: var(--ink-dark);
}
.vexpress-total-monto{
font-family: 'Quicksand', sans-serif;
font-weight: 800;
font-size: 1.3rem;
margin-top: 2px;
}
.vexpress-total-card.ingreso .vexpress-total-monto{ color: var(--success-dark); }
.vexpress-total-card.egreso .vexpress-total-monto{ color: var(--brick-dark); }
.vexpress-total-card.resultado .vexpress-total-monto{ color: var(--gold-dark); }
.vexpress-total-card.resultado.negativo .vexpress-total-monto{ color: var(--brick-dark); }
/* ---- GRAN SUPERFICIE CENTRAL (clara/crema) — toolbar + tabla + totales ---- */
.vexpress-panel-claro{
background: #EDECE4;
border-radius: 14px;
padding: 12px 14px 0;
box-shadow: 0 8px 24px -12px rgba(0,0,0,0.4);
overflow: hidden;
}
/* ---- Barra de herramientas: buscar / filtros / columnas (fila 2, dentro del panel claro) ---- */
.vexpress-toolbar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-bottom: 10px;
}
/* Wrapper nuevo, solo para poder colapsarlo en mobile (ver bloque
"MOBILE — Financial Ledger" al final del archivo). display:contents lo
deja invisible como contenedor en Desktop — ahí los