/* LP Investments — estilos base
Paleta y specs siguiendo la guía de dataviz (referencias/palette.md):
superficies, tinta de texto, color categórico (azul) y colores de estado
reservados para pending/approved/rejected. */
:root {
color-scheme: light;
--surface-1: #fcfcfb;
--surface-2: #ffffff;
--page-plane: #f2f4f8;
--text-primary: #0b0b0b;
--text-secondary: #52514e;
--text-muted: #898781;
--gridline: #e1e0d9;
--baseline: #c3c2b7;
--border: rgba(11, 11, 11, 0.10);
--brand: #1d5aa3; /* series-1 / azul (oscuro) */
--brand-dark: #0f3868;
--brand-wash: rgba(29, 90, 163, 0.10);
--good: #0ca30c;
--good-text: #006300;
--warning: #fab219;
--serious: #ec835a;
--critical: #d03b3b;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--shadow-1: 0 1px 2px rgba(11,11,11,0.04), 0 4px 16px rgba(11,11,11,0.06);
}
/* Modo oscuro automático DESACTIVADO a petición de Lauren: la app debe
verse siempre en claro, aunque el móvil/navegador tenga el modo oscuro
activado (color-scheme: light en :root ya lo fuerza). Se deja comentado
el bloque de variables que había para el modo oscuro, por si se quisiera
reactivar más adelante.
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--surface-1: #1a1a19;
--surface-2: #201f1e;
--page-plane: #0d0d0d;
--text-primary: #ffffff;
--text-secondary: #c3c2b7;
--text-muted: #898781;
--gridline: #2c2c2a;
--baseline: #383835;
--border: rgba(255, 255, 255, 0.10);
--brand: #3672b9;
--brand-dark: #17417a;
--brand-wash: rgba(54, 114, 185, 0.14);
--good: #0ca30c;
--good-text: #0ca30c;
--warning: #fab219;
--serious: #ec835a;
--critical: #e66767;
}
}
*/
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
background: var(--page-plane);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.hidden { display: none !important; }
/* ---------- Layout: auth screens ---------- */
.auth-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 1.1fr 1fr;
}
/* Barra superior con el logo, solo visible en la versión móvil del login
(en escritorio el logo ya sale en el panel izquierdo .auth-visual). */
.auth-topbar {
display: none;
align-items: center;
gap: 10px;
padding: 18px 20px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
background: var(--surface-2);
}
.auth-topbar .brand-mark { width: 30px; height: 30px; border-radius: 9px; display: block; }
.field-password { position: relative; }
.field-input-row { display: flex; align-items: center; gap: 6px; }
.field-input-row input { flex: 1; min-width: 0; }
.field-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
padding: 0;
}
.field-toggle:hover { color: var(--text-secondary); }
.auth-divider { height: 1px; background: var(--border); margin: 18px 0; }
.auth-forgot {
display: block;
width: 100%;
text-align: center;
background: none;
border: none;
color: var(--brand);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
padding: 4px;
}
.auth-forgot:hover { color: var(--brand-dark); text-decoration: underline; }
.auth-visual {
background:
radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.10), transparent 60%),
linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 100%);
color: #fff;
padding: 56px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.auth-visual .brand { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; display:flex; align-items:center; gap:10px; }
.auth-visual .brand-mark { width: 34px; height: 34px; border-radius: 10px; display:block; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.auth-visual h1 { font-size: 34px; line-height: 1.2; max-width: 420px; margin: 0; }
.auth-visual p { opacity: 0.9; max-width: 420px; line-height: 1.5; }
.auth-visual .stat-row { display:flex; gap: 28px; margin-top: 20px; }
.auth-visual .stat b { display:block; font-size: 22px; }
.auth-visual .stat span { font-size: 12px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.06em; }
.auth-form-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.auth-card {
width: 100%;
max-width: 380px;
}
.auth-card h2 { font-size: 24px; margin: 0 0 6px; }
.auth-card .sub { color: var(--text-secondary); margin: 0 0 28px; font-size: 14px; }
.field { margin-bottom: 16px; }
.field label { display:block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.field input, .field select, .field textarea {
width: 100%;
padding: 11px 13px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text-primary);
font-size: 14px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-wash);
}
.field textarea {
font-family: inherit;
resize: vertical;
min-height: 90px;
box-sizing: border-box;
}
.contact-textarea { line-height: 1.45; }
.table-input {
width: 160px;
padding: 7px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text-primary);
font-size: 14px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.table-input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-wash);
}
.closes-month-header { cursor: pointer; user-select: none; }
.closes-month-header td { background: var(--surface-2); }
.closes-month-header:hover td { background: var(--brand-wash); }
.closes-arrow { display: inline-block; width: 14px; color: var(--text-secondary); }
/* Cierre calculado automáticamente (día anterior + depósitos - retiros):
se muestra como placeholder en vez de valor relleno, para dejar claro que
no es un valor fijado a mano y que no se reenviará al guardar salvo que
se escriba algo encima. */
.closes-input-auto { font-style: italic; color: var(--text-secondary); }
.closes-input-auto::placeholder { color: var(--text-secondary); opacity: 0.85; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
border-radius: var(--radius-sm);
border: none;
background: var(--brand);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, transform .05s ease;
}
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--critical); }
.btn.danger:hover { background: #b52f2f; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.error-box {
background: rgba(208, 59, 59, 0.08);
border: 1px solid rgba(208, 59, 59, 0.25);
color: var(--critical);
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
margin-bottom: 16px;
}
.success-box {
background: rgba(12, 163, 12, 0.08);
border: 1px solid rgba(12, 163, 12, 0.25);
color: var(--good-text);
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
margin-bottom: 16px;
}
/* ---------- Layout: app shell ---------- */
.app-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 240px 1fr;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s ease;
}
/* Efecto de profundidad ("parallax") a juego con las pantallas a pantalla
completa (.tx-screen): mientras una de ellas está abierta, el menú
principal que queda debajo se desplaza un poco hacia la izquierda y se
oscurece levemente; al volver atrás, encoje la animación y el menú
principal "vuelve" a su sitio desde la izquierda — es lo que, junto al
overlay deslizándose de vuelta hacia la derecha, da la sensación de una
transición de app nativa en vez de un cambio brusco. Body.nav-pushed lo
activa initNavTransitionObserver() en dashboard.js en cuanto hay algún
.tx-screen visible, sea cual sea. */
body.nav-pushed .app-shell {
transform: translateX(-26px);
filter: brightness(0.94);
}
/* El override responsive de .app-shell/.sidebar/.main vive al final del
archivo (con el resto de reglas de navegación inferior): así se aplica
siempre después de las reglas base de esas mismas clases, sin depender
del orden en que aparezcan aquí arriba (dos reglas con la misma
especificidad — un solo selector de clase — las gana la que esté
declarada más abajo en el archivo, esté o no dentro de un @media). */
.sidebar {
background: var(--surface-1);
border-right: 1px solid var(--border);
padding: 22px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sidebar .brand { display:flex; align-items:center; gap:10px; font-weight: 700; padding: 6px 10px 22px; flex-wrap: wrap; row-gap: 2px; }
.sidebar .brand-text { white-space: nowrap; }
.sidebar .brand-mark { width: 30px; height: 30px; border-radius: 9px; display:block; box-shadow: 0 1px 4px rgba(0,0,0,0.14); }
.nav-item {
display:flex; align-items:center; gap:10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item.active { background: var(--brand-wash); color: var(--brand-dark); }
.nav-badge {
margin-left: auto;
background: var(--critical);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 3px 6px;
border-radius: 999px;
}
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
/* ---------- Navegación inferior (móvil) ----------
El menú lateral (.sidebar) se oculta por completo por debajo de 780px
(ver media query de .app-shell más arriba), así que en el móvil esta
barra fija de tarjetas con icono es la única forma de cambiar de
pestaña. Reutiliza la misma clase .nav-item y el mismo atributo
data-tab que el menú lateral, así que el cambio de pestaña (initTabs()
en dashboard.js/admin.js) y el estado "active" funcionan igual sin
tocar el JavaScript. */
.bottom-nav {
display: none;
position: fixed;
left: 14px; right: 14px; bottom: calc(4px + env(safe-area-inset-bottom));
z-index: 40;
background: var(--surface-1);
border-radius: 999px;
box-shadow: 0 6px 20px rgba(11,11,11,0.14);
padding: 8px 6px;
gap: 2px;
}
/* El menú es flotante, así que el contenido de debajo puede seguir
viéndose al hacer scroll por detrás. En vez de que se corte de golpe
justo en el borde, este degradado (mismo color que el fondo de la
página) lo desvanece poco a poco según se acerca al menú. No bloquea
los toques: pointer-events:none. */
.bottom-nav-fade {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
height: calc(118px + env(safe-area-inset-bottom));
z-index: 39;
pointer-events: none;
background: linear-gradient(to top, var(--page-plane) 48%, transparent 100%);
}
.bottom-nav-item.nav-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 5px 1px;
border-radius: 999px;
font-size: 10px;
letter-spacing: -0.01em;
position: relative;
color: var(--text-secondary);
/* El fondo de "activo" se pinta solo detrás del icono (.bn-icon), no en
toda la fila — sobreescribe el ".nav-item.active" genérico del menú de
escritorio, pensado para una fila entera. */
background: none;
}
.bottom-nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bottom-nav-item .bn-icon {
width: 48px; height: 29px;
display: flex; align-items: center; justify-content: center;
border-radius: 999px;
}
.bottom-nav-item svg { width: 23px; height: 23px; flex-shrink: 0; }
.bottom-nav-item.active { background: none; }
.bottom-nav-item.active .bn-icon { background: var(--brand-wash); }
.bottom-nav-item.active span:last-child { color: var(--brand); font-weight: 700; }
.bottom-nav-item .nav-badge { position: absolute; top: 0; right: 18%; }
/* El admin tiene 6 pestañas en vez de las 3 del cliente — con flex:1 cada
una se queda sin sitio y las etiquetas más largas ("Transacciones") se
cortan. En vez de encoger más la letra, esta barra concreta pasa a ser
un carril de scroll horizontal con ancho fijo por botón (como el carril
de planes/banners del resto de la app), para que cada etiqueta se siga
leyendo entera; el resto de .bottom-nav (la del cliente, 3 pestañas) no
se toca. */
.admin-bottom-nav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: flex-start;
}
.admin-bottom-nav::-webkit-scrollbar { display: none; }
.admin-bottom-nav .bottom-nav-item.nav-item { flex: 0 0 auto; width: 78px; font-size: 9.5px; }
.user-chip { display:flex; align-items:center; gap:10px; padding: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.user-chip .who { font-size: 13px; line-height: 1.3; overflow:hidden; }
.user-chip .who b { display:block; font-size: 13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.user-chip .who span { color: var(--text-muted); font-size: 12px; }
.main {
padding: 26px 30px 60px;
max-width: 1180px;
/* .main es un elemento de grid (columna de .app-shell) y por defecto un
elemento de grid no se encoge por debajo del contenido más ancho que
tenga dentro (aunque sea un texto o fila suelta que no hace falta ver
entera de una vez), por muy estrecha que sea la pantalla. Sin este
min-width:0 esto empuja toda la página a desbordar horizontalmente en
móvil aunque cada tarjeta por separado "quepa" bien. */
min-width: 0;
}
.topbar {
display:flex; align-items:center; justify-content:space-between;
margin-bottom: 22px;
gap: 16px;
flex-wrap: wrap;
}
.topbar h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.topbar .topbar-actions { display:flex; align-items:center; gap: 10px; }
.live-dot {
display:inline-flex; align-items:center; gap:6px;
font-size: 12px; font-weight: 600; color: var(--good-text);
background: rgba(12,163,12,0.08);
border: 1px solid rgba(12,163,12,0.25);
padding: 5px 10px;
border-radius: 999px;
}
.live-dot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: 1.4fr 1fr; }
/* Mismo motivo que min-width:0 en .main: los hijos directos de cualquier
grid (tarjetas, la propia rejilla anidada de las tarjetas resumen…) no
deben negarse a encogerse por debajo de su contenido — si no, una sola
tarjeta ancha vuelve a forzar el desbordamiento de toda la columna. */
.grid > * { min-width: 0; }
@media (max-width: 900px) {
.grid.cols-3 { grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: 1fr; }
}
.card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-1);
}
.card h3 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 10px;
font-weight: 700;
}
.stat-tile .value { font-size: 30px; font-weight: 650; letter-spacing: -0.01em; }
.stat-tile .delta { font-size: 13px; font-weight: 600; margin-top: 6px; display:flex; align-items:center; gap:5px; }
.delta.up { color: var(--good-text); }
.delta.down { color: var(--critical); }
/* Tarjeta de "Saldo total": azul con profundidad en vez de un degradado
plano de dos tonos — una base diagonal oscuro→vivo→oscuro, un brillo
suave arriba a la izquierda (como un reflejo de luz) y un resplandor
abajo a la derecha, para que se lea como algo elegante/premium y no como
un simple botón azul. Esquinas redondeadas, estilo minimalista. Además
es el desplegable que muestra/oculta el resto de saldos (ver
initHeroBalanceToggle() en dashboard.js). */
.hero-balance {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 95% at 10% -15%, rgba(255,255,255,0.24), transparent 55%),
radial-gradient(85% 85% at 105% 115%, rgba(96,165,250,0.5), transparent 60%),
linear-gradient(150deg, #0f1f45 0%, #1d4fc4 52%, #0b1733 100%);
border: none;
color: #ffffff;
cursor: pointer;
user-select: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 16px 36px -16px rgba(9,22,51,0.6);
}
.hero-balance:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.hero-balance .label { font-size: 13px; color: rgba(255,255,255,0.82); font-weight: 600; margin-bottom: 6px; }
.hero-balance .value { font-size: 44px; font-weight: 650; letter-spacing: -0.02em; color: #ffffff; }
.hero-balance .sub { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,0.82); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-balance .hero-balance-hint { margin-top: 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.72); }
/* Beneficio y % de beneficio: una única píldora blanca y compacta (no dos
cajas sueltas) justo debajo del saldo, con el texto en verde/rojo bien
saturado — máximo contraste posible sobre el azul de la tarjeta, así se
lee de un vistazo. */
.hero-balance .hero-profit-pill {
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 7px;
background: #ffffff;
border-radius: 999px;
padding: 9px 18px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.005em;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.hero-balance .hero-profit-pill .hero-profit-arrow { font-size: 11px; line-height: 1; }
.hero-balance .hero-profit-pill .hero-profit-pct { opacity: 0.8; font-weight: 600; }
.hero-balance .hero-profit-pill.positive { color: var(--good-text); }
.hero-balance .hero-profit-pill.negative { color: var(--critical); }
/* Resumen "estilo app de banco" en móvil: oculto por defecto (escritorio
sigue mostrando .resumen-desktop como siempre). El resto de sus reglas
vive al final del archivo, dentro del @media de móvil, junto con el
resto de overrides responsive. */
.resumen-mobile { display: none; }
/* ---------- Chart ---------- */
.chart-wrap { position: relative; }
.chart-tooltip {
position: absolute;
pointer-events: none;
background: var(--surface-2);
border: 1px solid var(--border);
box-shadow: var(--shadow-1);
border-radius: 10px;
padding: 8px 11px;
font-size: 12px;
line-height: 1.5;
transform: translate(-50%, -110%);
opacity: 0;
transition: opacity .1s ease;
white-space: nowrap;
z-index: 5;
}
.chart-tooltip b { color: var(--text-primary); font-size: 13px; }
.chart-tooltip .muted { color: var(--text-muted); }
/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
font-weight: 700;
padding: 10px 12px;
border-bottom: 1px solid var(--gridline);
}
tbody td { padding: 12px; border-bottom: 1px solid var(--gridline); font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
.empty-row td { color: var(--text-muted); text-align: center; padding: 26px; font-variant-numeric: normal; }
.badge {
display: inline-flex; align-items:center; gap:6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.badge .dot { width:7px; height:7px; border-radius:50%; }
.badge.pending { background: rgba(250,178,25,0.14); color: #8a5c00; }
.badge.pending .dot { background: var(--warning); }
.badge.approved { background: rgba(12,163,12,0.10); color: var(--good-text); }
.badge.approved .dot { background: var(--good); }
.badge.rejected { background: rgba(208,59,59,0.10); color: var(--critical); }
.badge.rejected .dot { background: var(--critical); }
.badge.completed { background: rgba(42,120,214,0.10); color: var(--brand-dark); }
.badge.completed .dot { background: var(--brand); }
.badge.paid { background: rgba(42,120,214,0.10); color: var(--brand-dark); }
.badge.paid .dot { background: var(--brand); }
.amount.positive { color: var(--good-text); }
.amount.negative { color: var(--critical); }
.month-nav { display:inline-flex; align-items:center; gap:8px; }
.month-nav .btn { padding: 4px 12px; }
.month-label { font-weight:650; min-width:130px; text-align:center; display:inline-block; text-transform:capitalize; }
/* ---------- Forms within cards ---------- */
.inline-form { display:flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { margin-bottom: 0; flex: 1; min-width: 160px; }
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(11,11,11,0.45);
display: flex; align-items: center; justify-content: center;
/* Por encima de cualquier .tx-screen (hasta z-index 74, ver más abajo),
para que un modal (p.ej. "Editar correo electrónico" desde Datos
personales) se pueda abrir encima de esas pantallas sin quedar tapado
ni bloquear los toques con la pantalla de debajo. */
z-index: 90;
padding: 20px;
}
.modal {
background: var(--surface-1);
border-radius: var(--radius-lg);
padding: 24px;
width: 100%;
max-width: 420px;
max-height: 85vh;
overflow-y: auto;
box-shadow: var(--shadow-1);
}
.modal h3 { margin-top: 0; font-size: 18px; }
.modal-actions { display:flex; gap: 10px; justify-content:flex-end; margin-top: 18px; }
.section-title { font-size: 16px; font-weight: 700; margin: 34px 0 14px; }
.section-title:first-of-type { margin-top: 0; }
.ticker-wrap {
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 20px;
background: var(--surface-1);
}
.note {
font-size: 12px;
color: var(--text-muted);
line-height: 1.6;
}
/* La cabecera de la pestaña "Planes" (no la del mismo título dentro de
Resumen) más grande, a petición de Lauren: tanto "Planes disponibles"
como el saldo disponible para invertir se leen mejor así. */
/* Selector combinado (en vez de solo .plans-tab-title) para ganarle en
especificidad al "@media (max-width:780px) .section-title" que si no
sale más tarde en la hoja de estilos y se come este tamaño en móvil. */
.section-title.plans-tab-title { font-size: 22px; }
.note.plans-tab-cash { font-size: 15px; }
.toast {
position: fixed;
bottom: 22px;
right: 22px;
background: var(--surface-1);
border: 1px solid var(--border);
box-shadow: var(--shadow-1);
border-radius: var(--radius-sm);
padding: 12px 16px;
font-size: 13.5px;
z-index: 60;
max-width: 320px;
}
.toast.error { border-color: rgba(208,59,59,0.35); color: var(--critical); }
.toast.success { border-color: rgba(12,163,12,0.35); color: var(--good-text); }
/* ---------- Planes de inversión (pestaña "Planes") ----------
Las plantillas se agrupan por categoría (Planes Mensuales / Semanales /
Fines de Semana / EXPRESS, según el prefijo del nombre — ver
categoryForTemplate() en dashboard.js), cada una como un desplegable:
su cabecero es un botón que abre/cierra la rejilla de tarjetas de
debajo (bindPlanCategoryToggles() en dashboard.js), con la flechita
girando según el estado. */
.plan-categories { display: flex; flex-direction: column; gap: 26px; }
.plan-category-head {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
margin-bottom: 13px;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: 18px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.01em;
text-align: left;
cursor: pointer;
}
.plan-category-label { flex: 1; text-transform: uppercase; }
.plan-category-dots {
display: none;
align-items: center;
gap: 5px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
max-width: 40%;
}
.plan-category-collapsed .plan-category-dots { display: flex; }
.pc-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pc-status-dot-available { background: var(--good-text); }
.pc-status-dot-insufficient { background: var(--warning); }
.pc-status-dot-soldout { background: var(--critical); }
.plan-category-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--brand);
flex-shrink: 0;
box-shadow: 0 0 0 4px var(--brand-wash);
}
.plan-category-chevron {
display: flex;
color: var(--text-muted);
transition: transform 0.22s ease;
flex-shrink: 0;
}
.plan-category-chevron svg { width: 20px; height: 20px; }
.plan-category-collapsed .plan-category-chevron { transform: rotate(-90deg); }
.plan-category-collapsed .plans-grid { display: none; }
.plans-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Borde grueso en negro/gris muy oscuro en vez del borde fino genérico de
.card, para que cada plan quede bien delimitado dentro de su categoría. */
.plan-card {
display:flex; flex-direction:column; gap:12px;
position: relative;
overflow: hidden;
border: 2px solid var(--text-primary);
}
.plan-card.sold-out { opacity: 0.6; }
.plan-card .plan-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.plan-card .plan-head h3 { margin:0; font-size:16px; }
.plan-card .plan-stats { display:flex; flex-wrap:wrap; gap:18px 24px; }
.plan-card .plan-stats > div { display:flex; flex-direction:column; gap:3px; }
.plan-card .plan-stats .k { font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color: var(--text-muted); }
.plan-card .plan-stats .v { font-size:16px; font-weight:650; }
.plan-progress-track { width:100%; height:8px; border-radius:999px; background: var(--surface-2); overflow:hidden; }
.plan-progress-fill { height:100%; border-radius:999px; background: var(--brand); }
.plan-progress-label { font-size:12px; color: var(--text-muted); display:flex; justify-content:space-between; margin-top:6px; }
.plan-slots-alert {
background: rgba(250,178,25,0.16);
color: #8a5c00;
border: 1px solid rgba(250,178,25,0.4);
border-radius: 8px;
padding: 7px 12px;
font-size: 13px;
font-weight: 700;
text-align: center;
}
/* Los tres estados del botón de un plan disponible: verde si se puede
invertir, azul si falta saldo, y rojo (sólido, igual de "lleno" que el
verde) si está agotado — la transparencia de los planes agotados se
nota en toda la tarjeta (.plan-card.sold-out), no en el botón. */
.plan-btn-available { background: var(--good); }
.plan-btn-available:hover { background: #089208; }
.plan-btn-insufficient { background: var(--brand); }
.plan-btn-insufficient:hover { background: var(--brand); }
.plan-btn-soldout { background: var(--critical); }
.plan-btn-soldout:hover { background: var(--critical); }
.btn.plan-btn:disabled { opacity: 1; cursor: not-allowed; }
.btn.plan-btn.plan-btn-insufficient:disabled { opacity: 0.85; }
/* Resalte momentáneo al llegar desde el banner "Invertir ahora" de
EXPRESS, para que quede claro cuál es la tarjeta a la que se ha
desplazado la pantalla. */
.plan-card-highlight { animation: plan-card-pulse 1.6s ease-out; }
@keyframes plan-card-pulse {
0% { box-shadow: 0 0 0 0 rgba(29, 90, 163, 0.55); }
60% { box-shadow: 0 0 0 10px rgba(29, 90, 163, 0); }
100% { box-shadow: 0 0 0 0 rgba(29, 90, 163, 0); }
}
/* ---------- Responsive (móvil): navegación inferior y contenido ----------
Deliberadamente al final del archivo. .app-shell, .sidebar, .main y
.toast ya tienen su regla base "de escritorio" más arriba con la misma
especificidad (un solo selector de clase); en CSS, entre dos reglas con
la misma especificidad gana la que aparece más abajo en el archivo, así
que estas reglas necesitan estar aquí para poder ganar siempre en
móvil, sea cual sea el orden de las reglas base. */
@media (max-width: 780px) {
.app-shell { grid-template-columns: 1fr; }
.sidebar { display: none; }
/* El menú inferior es flotante (position:fixed) y en Safari/iOS la barra
de herramientas del propio navegador también ocupa parte visible de
la pantalla sin que la web pueda "empujarla" — así que el hueco
reservado abajo tiene que ser bastante más generoso que la altura del
menú en sí, o la última sección (Transacciones recientes) puede
quedar tapada justo detrás de él nada más cargar la página. */
/* padding-top incluye el inset de zona segura del iPhone: al añadir la
web a la pantalla de inicio (apple-mobile-web-app-capable), la página
se abre a pantalla completa sin la barra de Safari, así que el propio
contenido tiene que apartarse del reloj/batería o el título de cada
pestaña queda tapado debajo — por eso "Planes disponibles" e
"Importe" se veían pegados arriba del todo. En una pestaña normal de
Safari env(safe-area-inset-top) vale 0, así que esto no cambia nada
ahí. */
.main { padding: calc(18px + env(safe-area-inset-top)) 14px 168px; }
.bottom-nav { display: flex; }
.bottom-nav-fade { display: block; }
.toast { bottom: calc(88px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: none; }
/* Contenido de las pestañas: menos aire y tipografía más contenida para
que quepa cómodo en el ancho de un iPhone. */
.topbar { margin-bottom: 16px; }
.topbar h1 { font-size: 19px; }
.grid { gap: 12px; }
.card { padding: 16px; }
.hero-balance .value { font-size: 32px; }
.hero-balance .hero-profit-pill { font-size: 13px; padding: 7px 14px; }
.stat-tile .value { font-size: 22px; }
.section-title { font-size: 15px; margin: 24px 0 12px; flex-wrap: wrap; row-gap: 8px; }
/* Tablas: en vez de desbordar toda la página, cada tarjeta/modal que
contiene una tabla se convierte en su propio carril de scroll
horizontal (el contenido de la tabla no se envuelve en varias líneas,
así las columnas quedan legibles y basta con deslizar el dedo). */
.card:has(> table), .modal:has(> table) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.card:has(> table) table, .modal:has(> table) table {
white-space: nowrap;
}
/* Formularios en línea (añadir movimiento, depósito, editar retirada…):
un campo por fila en vez de encajar varios campos estrechos uno al
lado del otro. */
.inline-form { flex-direction: column; align-items: stretch; }
.inline-form .field { min-width: 0; max-width: none !important; width: 100%; }
.modal { padding: 18px; }
.modal-backdrop { padding: 12px; }
}
/* Rediseño específico para el login en móvil: logo arriba, título sobre
fondo gris y los campos agrupados en una tarjeta blanca redondeada. En
escritorio no se toca nada de lo anterior. Va al final del archivo a
propósito: así sus reglas ganan siempre a las reglas base de .auth-card,
.field y .btn de más arriba, sin depender de !important. */
@media (max-width: 860px) {
.auth-shell { grid-template-columns: 1fr; }
.auth-visual { display: none; }
.auth-topbar { display: flex; }
.auth-form-wrap { padding: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.auth-card { max-width: none; }
.auth-card-head { padding: 22px 20px 18px; }
.auth-card-head h2 { font-size: 22px; }
.auth-card-body {
margin: 0 16px 16px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
padding: 22px 18px;
}
.auth-card-body .field {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 9px 14px;
margin-bottom: 14px;
background: var(--surface-2);
transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-card-body .field:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-wash);
}
.auth-card-body .field label {
font-size: 11.5px;
margin-bottom: 2px;
color: var(--text-muted);
font-weight: 500;
}
.auth-card-body .field input {
border: none;
padding: 0;
font-size: 16px;
background: transparent;
}
.auth-card-body .field input:focus { box-shadow: none; border: none; }
.auth-card-body .btn.block { border-radius: var(--radius-md); padding: 14px; font-size: 15.5px; margin-top: 4px; }
}
/* Rediseño del Resumen en móvil, estilo app bancaria: saldo a pantalla
completa en azul, acciones rápidas, banner para invertir y los planes /
movimientos recientes en carriles horizontales. Va al final a propósito
(mismo motivo que el resto de overrides de este bloque): así gana
siempre a las reglas base de .card, .btn, etc. de más arriba. */
@media (max-width: 780px) {
.topbar { display: none; }
.resumen-desktop { display: none; }
.resumen-desktop-stats { display: none; }
/* Cancela el padding-top de .main (incluido el nuevo inset de zona
segura) para que el banner de cabecera siga pudiendo pintarse a
sangre hasta el borde superior — .mh-hero de aquí abajo añade su
propio inset, así que no se pierde el espacio, solo se mueve de
sitio. */
.resumen-mobile { display: block; margin: calc(-18px - env(safe-area-inset-top)) -14px 0; }
.mh-hero {
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 34px, transparent 34px, transparent 68px),
radial-gradient(120% 95% at 10% -15%, rgba(255,255,255,0.22), transparent 55%),
radial-gradient(85% 85% at 105% 115%, rgba(96,165,250,0.5), transparent 60%),
linear-gradient(150deg, #0f1f45 0%, #1d4fc4 52%, #0b1733 100%);
color: #fff;
/* El hueco inferior tiene que ser mayor que el solape del banner de
"Invertir en planes" (margin-top: -38px en .mh-invest-wrap) más un
margen de seguridad, si no las etiquetas "Agregar/Retirar/Mover" de
justo encima quedan tapadas por ese banner. */
padding: calc(16px + env(safe-area-inset-top)) 20px 56px;
}
.mh-profile-btn {
width: 38px; height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.75);
background: rgba(255,255,255,0.16);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
margin-bottom: 18px;
}
.mh-profile-btn svg { width: 19px; height: 19px; }
.mh-balance-label { font-size: 14px; color: rgba(255,255,255,0.82); font-weight: 600; margin-bottom: 8px; text-align: center; }
.mh-balance-value { font-size: 54px; font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.mh-actions { display: flex; gap: 14px; margin-top: 32px; }
.mh-action {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 8px;
background: none; border: none; color: #fff;
font-size: 13px; font-weight: 600;
cursor: pointer;
}
.mh-action-icon {
width: 54px; height: 54px;
border-radius: 50%;
background: #fff;
color: #1d4fc4;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(8,16,40,0.25);
}
.mh-action-icon svg { width: 22px; height: 22px; }
.mh-action:active .mh-action-icon { background: #eaf2ff; }
/* Cabecera azul del Resumen del admin (misma .mh-hero de arriba, pero sin
el banner "Invertir en planes" solapado debajo, así que no necesita el
hueco extra de 56px) y sus chips de Clientes/Retiradas/Depósitos
pendientes, mismo lenguaje visual que .mh-action pero sin ser
botones. */
.admin-mh-hero { padding-bottom: 26px; }
.mh-stats-row { display: flex; gap: 10px; margin-top: 26px; }
.mh-stat-pill {
flex: 1;
min-width: 0;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.24);
border-radius: var(--radius-lg);
padding: 12px 8px;
text-align: center;
}
.mh-stat-pill-value { display: block; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.mh-stat-pill-label { display: block; font-size: 10.5px; color: rgba(255,255,255,0.8); font-weight: 600; margin-top: 3px; }
/* El banner "Invertir en planes" está a caballo entre el azul del saldo
y el fondo blanco de debajo (mitad en cada zona), como en la
referencia: se consigue subiéndolo con un margen negativo. position +
z-index explícitos para que no quede ninguna duda de que se pinta
siempre por encima del azul del hero (y no por detrás, tapado). */
.mh-invest-wrap {
position: relative;
z-index: 3;
width: calc(100% - 32px);
margin: -38px 16px 16px;
}
.mh-invest-banner {
display: flex; align-items: center; gap: 12px;
width: 100%;
margin: 0;
background: var(--surface-2);
border: 1.5px solid #1d4fc4;
border-radius: var(--radius-lg);
box-shadow: 0 4px 14px rgba(11,11,11,0.12), 0 1px 3px rgba(11,11,11,0.06);
padding: 17px;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
cursor: pointer;
}
.mh-invest-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: #eaf2ff;
color: #2f6fed;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mh-invest-icon svg { width: 20px; height: 20px; }
.mh-invest-text { flex: 1; text-align: left; }
.mh-invest-arrow { color: var(--text-muted); font-size: 21px; }
/* Hueco reservado para los 2 banners promocionales, de momento vacíos
(placeholders) — mismo carril con scroll-snap que "Tus Planes" y
puntos de paginación debajo, como en la referencia. */
.mh-banners-section { margin: 0 0 20px; }
.mh-banners-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 16px;
/* Sin esto, el navegador "come" el padding izquierdo nada más cargar:
al tener scroll-snap-type, ajusta solo el scroll inicial para que el
borde del primer banner quede pegado al borde de la pantalla (en vez
de dejar los 16px de aire que da el padding), así que el banner
aparecía descuadrado a la izquierda respecto al botón "Invertir en
planes" de arriba. Con scroll-padding-left el snap respeta ese hueco
en vez de tragárselo. */
scroll-padding-left: 16px;
/* El scroll horizontal nativo pintaba una barra fina y semitransparente
justo debajo del banner (parecida a la rayita separadora de las
filas de "Transacciones Recientes"), que no pega nada con los puntos
de paginación de debajo. El carril se puede seguir deslizando igual
de bien sin enseñar esa barra. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.mh-banners-scroll::-webkit-scrollbar { display: none; height: 0; }
/* El ancho del banner es el 100% de lo que queda dentro del padding del
carril (16px a cada lado, igual que el margen de .mh-invest-wrap), así
su borde izquierdo queda exactamente alineado con el del botón
"Invertir en planes" de arriba. Antes se restaban otros 32px de más
(calc(100% - 32px) sobre un contenedor que YA tenía ese padding
descontado), lo que dejaba el banner más estrecho de lo debido. */
.mh-banner-slot {
scroll-snap-align: start;
flex: 0 0 100%;
height: 140px;
border-radius: var(--radius-lg);
background: var(--surface-2);
border: 1.5px dashed var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
}
/* Banner promocional de los planes EXPRESS: mismos colores/estructura
que la referencia (franja clara con texto a la izquierda, panel
oscuro en diagonal a la derecha con un gráfico en vez de una foto). */
.mh-banner-promo {
appearance: none;
-webkit-appearance: none;
margin: 0;
font: inherit;
color: inherit;
position: relative;
padding: 0;
border: none;
background: linear-gradient(135deg, #dde6fb 0%, #c9d8f8 100%);
align-items: stretch;
justify-content: flex-start;
overflow: hidden;
cursor: pointer;
text-align: left;
}
.mh-banner-promo:active { transform: scale(0.99); }
.mh-banner-promo-text {
position: relative;
z-index: 2;
flex: 1 1 auto;
min-width: 0;
padding: 16px 12px 16px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.mh-banner-promo-text h3 {
margin: 0;
font-size: 17px;
font-weight: 800;
color: #10131a;
letter-spacing: -0.01em;
}
.mh-banner-promo-text p {
margin: 0;
font-size: 12px;
line-height: 1.35;
color: #4b5267;
font-weight: 500;
}
.mh-banner-promo-cta {
margin-top: 4px;
font-size: 13.5px;
font-weight: 800;
color: var(--brand-dark);
}
.mh-banner-promo-art {
position: relative;
flex: 0 0 44%;
background:
radial-gradient(85% 85% at 100% 100%, rgba(96,165,250,0.45), transparent 60%),
linear-gradient(160deg, #0f1f45 0%, #1d4fc4 55%, #0b1733 100%);
clip-path: polygon(38% 0, 100% 0, 100% 100%, 38% 100%, 58% 50%);
}
/* El gráfico (línea quebrada + puntos + flecha) vive en un hermano
aparte de .mh-banner-promo-art a propósito — ver el comentario en
dashboard.html. clip-path recorta también a los hijos (como
overflow:hidden), así que colocar el icono DENTRO del panel recortado
siempre se come parte del dibujo por el "pico" central del recorte
(58% del ancho del panel a media altura), sea cual sea su tamaño; ya
se probó a 34px y a 72px y en los dos casos solo sobrevivía la
flecha. Como hermano, en cambio, se puede anclar directamente a la
franja del banner que el recorte nunca toca: a media altura esa
franja empieza en 56% + 58%×44% ≈ 81.5% del ancho total del banner,
así que un icono de 46px pegado a 10px del borde derecho (apurando
incluso en el móvil más estrecho que soporta la app, ≈360px de
ancho) queda siempre entero dentro de ella. */
.mh-banner-promo-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 46px;
height: 46px;
z-index: 1;
}
.mh-banner-promo-icon svg { display: block; width: 100%; height: 100%; }
/* Segundo banner, "Asesoramiento Personal": mismo tratamiento de color
sólido en degradado azul oscuro que la foto de referencia de Lauren
(tarjeta PaysafeCard/Steam), con el logo de LPC Investments sobre una
placa blanca en vez de una foto de producto, y el botón "Contactar"
con los mismos colores del resto de la web (blanco sobre azul, como
los botones primarios .btn pero invertidos para leerse sobre el
fondo oscuro). */
.mh-banner-advise {
appearance: none;
-webkit-appearance: none;
margin: 0;
font: inherit;
padding: 18px 18px 16px;
border: none;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
text-align: left;
cursor: pointer;
color: #fff;
position: relative;
overflow: hidden;
background:
radial-gradient(85% 85% at 100% 100%, rgba(96,165,250,0.45), transparent 60%),
linear-gradient(160deg, #0f1f45 0%, #1d4fc4 55%, #0b1733 100%);
}
.mh-banner-advise:active { transform: scale(0.99); }
.mh-banner-advise-logo {
flex: 0 0 auto;
width: 48px; height: 48px;
border-radius: 14px;
background: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(8,16,40,0.3);
}
.mh-banner-advise-logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.mh-banner-advise-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mh-banner-advise-text h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.mh-banner-advise-text p { margin: 0; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,0.8); font-weight: 500; }
.mh-banner-advise-cta {
margin-top: 3px;
display: inline-block;
align-self: flex-start;
background: #fff;
color: var(--brand-dark);
font-size: 12.5px;
font-weight: 800;
padding: 7px 14px;
border-radius: 999px;
}
.mh-banner-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.mh-banner-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-wash); }
.mh-banner-dot.active { background: var(--brand); width: 16px; border-radius: 999px; }
.mh-section { padding: 0 16px; margin-bottom: 20px; }
.mh-section-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 13px;
font-size: 16px; font-weight: 700;
}
.mh-see-all { font-size: 14px; font-weight: 600; color: var(--brand); text-decoration: none; cursor: pointer; }
.mh-plans-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
margin: 0 -16px;
padding-left: 16px;
padding-right: 16px;
}
.mh-plan-card {
scroll-snap-align: start;
flex: 0 0 auto;
width: 178px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
cursor: pointer;
}
.mh-plan-card .mh-plan-name { font-size: 14px; font-weight: 700; margin-bottom: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-plan-card .mh-plan-amount { font-size: 18.5px; font-weight: 650; }
.mh-plan-card .mh-plan-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.mh-plan-card .mh-plan-badge { display: inline-block; margin-top: 11px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mh-plan-card .mh-plan-badge.active { background: rgba(12,163,12,0.10); color: var(--good-text); }
.mh-plan-card .mh-plan-badge.offer { background: var(--brand-wash); color: var(--brand-dark); }
.mh-tx-list {
display: flex; flex-direction: column;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 4px 14px;
}
.mh-tx-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--gridline); cursor: pointer; }
.mh-tx-row:last-child { border-bottom: none; }
.mh-tx-icon {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 22px;
font-weight: 700;
line-height: 1;
}
.mh-tx-icon.positive { color: var(--good-text); }
.mh-tx-icon.negative { color: var(--critical); }
.mh-tx-main { flex: 1; min-width: 0; }
.mh-tx-title { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-tx-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-tx-right { flex-shrink: 0; text-align: right; }
.mh-tx-amount { font-size: 15.5px; font-weight: 700; }
.mh-tx-amount.positive { color: var(--good-text); }
.mh-tx-amount.negative { color: var(--critical); }
.mh-tx-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
}
/* ---------- Pantallas de transacciones a pantalla completa (solo móvil):
detalle de un movimiento, listado completo con filtro de fechas y
detalle de un plan. Son overlays fijos que se abren/cierran con la
clase ".hidden"; su apertura está controlada desde dashboard.js y solo
se dispara en ancho móvil.
En vez de aparecer/desaparecer de golpe (display:none), se deslizan
desde la derecha al abrir y vuelven a salir por la derecha al cerrar
(como la navegación "push/pop" de una app nativa), con una curva de
easing suave y una duración de unas pocas décimas de segundo. Para que
eso se pueda animar el elemento tiene que seguir siempre "pintado"
(display:flex) y lo que cambia es su posición vía transform — por eso
usan su propia clase ".tx-screen-closed" en vez de la utilidad genérica
".hidden" (que fuerza display:none !important en todo el sitio y
impediría cualquier animación). Cuando está "cerrada" además lleva
pointer-events:none para que no se pueda interactuar con ella ni
aunque un dedo roce ese borde durante la animación. ---------- */
.tx-screen {
position: fixed;
inset: 0;
z-index: 70;
background: var(--page-plane);
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateX(0);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.tx-screen.tx-screen-closed {
transform: translateX(100%);
pointer-events: none;
}
/* El detalle de un movimiento puede abrirse encima del listado completo
("Ver todo"), así que siempre va en un z-index más alto que éste,
independientemente del orden en el HTML. */
#txDetailScreen { z-index: 75; }
.tx-screen-header {
display: grid;
grid-template-columns: 36px 1fr 36px;
align-items: center;
gap: 12px;
padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
background: var(--surface-1);
position: sticky;
top: 0;
z-index: 1;
border-bottom: 1px solid var(--border);
}
.tx-screen-back {
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: var(--surface-2);
box-shadow: 0 1px 3px rgba(11,11,11,0.08);
display: flex; align-items: center; justify-content: center;
color: var(--text-primary);
cursor: pointer;
}
.tx-screen-back svg { width: 18px; height: 18px; }
.tx-screen-header h2 { margin: 0; font-size: 17px; font-weight: 700; text-align: center; }
.tx-screen-body { padding: 16px; flex: 1; }
.tx-detail-card {
background: var(--surface-2);
border-radius: var(--radius-lg);
padding: 18px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(11,11,11,0.06);
}
.tx-detail-row + .tx-detail-row { margin-top: 18px; }
.tx-detail-label { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.tx-detail-value { font-size: 14.5px; color: var(--text-secondary); }
.tx-detail-value.amount-positive { color: var(--good-text); font-weight: 700; }
.tx-detail-value.amount-negative { color: var(--critical); font-weight: 700; }
.tx-filter-card {
background: var(--surface-2);
border-radius: var(--radius-lg);
padding: 14px 16px 16px;
margin-bottom: 14px;
box-shadow: 0 1px 3px rgba(11,11,11,0.06);
}
.tx-filter-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.tx-filter-row + .tx-filter-row { border-top: 1px solid var(--gridline); }
.tx-filter-icon { color: var(--text-muted); display: flex; flex-shrink: 0; }
.tx-filter-icon svg { width: 18px; height: 18px; }
.tx-filter-label { font-size: 14px; font-weight: 600; flex: 1; }
/* El campo de fecha es el nativo de verdad (así el
selector de fecha del móvil se abre siempre, de forma nativa, en vez de
depender de showPicker() — que en algunos navegadores móviles no
funciona). Se le da aspecto de píldora y, mientras no tiene valor, se le
superpone un rótulo "Seleccionar fecha" que no bloquea el toque
(pointer-events: none) para que siga abriendo el selector nativo. */
.tx-filter-date-field {
position: relative;
flex-shrink: 0;
width: 156px;
overflow: hidden;
border-radius: 999px;
}
.tx-filter-date-input {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
background: var(--brand-wash);
border: none;
border-radius: 999px;
padding: 7px 14px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
/* Mientras no tiene valor, el texto nativo del campo ("dd/mm/aaaa") se
deja transparente: en Chromium ese texto se pinta por encima del
rótulo superpuesto (aunque esté detrás en el DOM), así que si no se
oculta aquí se ve mezclado con "Seleccionar fecha". En cuanto el
campo tiene valor (.has-value) se vuelve a mostrar con el color real. */
color: transparent;
width: 100%;
text-align: right;
cursor: pointer;
}
.tx-filter-date-input.has-value { color: var(--brand-dark); }
.tx-filter-date-input::-webkit-calendar-picker-indicator { opacity: 0; }
.tx-filter-date-placeholder {
position: absolute;
inset: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 14px;
border-radius: 999px;
background: var(--brand-wash);
color: var(--brand-dark);
font-size: 13px;
font-weight: 700;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-filter-date-placeholder.hidden { display: none; }
.tx-filter-reset { display: block; margin: 12px auto 0; background: none; border: none; color: var(--brand); font-weight: 700; font-size: 14px; cursor: pointer; }
.tx-filter-info {
display: flex; align-items: center; gap: 8px;
background: var(--brand-wash);
color: var(--brand-dark);
border-radius: 10px;
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
margin-bottom: 18px;
}
.tx-filter-info-icon {
width: 16px; height: 16px;
border-radius: 50%;
border: 1.5px solid currentColor;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
.tx-all-list {
background: var(--surface-2);
border-radius: var(--radius-lg);
padding: 4px 16px;
box-shadow: 0 1px 3px rgba(11,11,11,0.06);
}
.tx-all-list .mh-tx-row { padding: 13px 0; }
/* Detalle de un plan (#planDetailScreen): nombre + barra de progreso verde
con los días transcurridos, reutilizando ".tx-detail-card" para el resto
de los datos (invertido, rendimiento, fecha). */
.plan-detail-name { font-size: 19px; font-weight: 700; margin-bottom: 16px; }
.plan-detail-progress-track {
height: 8px;
border-radius: 999px;
background: var(--gridline);
overflow: hidden;
}
.plan-detail-progress-fill {
height: 100%;
border-radius: 999px;
background: var(--good-text);
transition: width 0.3s ease;
}
.plan-detail-progress-label {
display: flex;
justify-content: space-between;
font-size: 12.5px;
color: var(--text-muted);
margin-top: 6px;
}
.plan-detail-variable-note { font-size: 13px; color: var(--text-muted); }
/* ---------- "Cuenta" móvil: menú (Datos personales / Seguridad y
privacidad / Datos bancarios / Cerrar sesión), ficha de datos de
solo-lectura, formulario de cambio de contraseña y listado de IBANs.
Todo dentro de las .tx-screen correspondientes, apiladas con z-index
creciente para poder volver atrás paso a paso. ---------- */
#personalDataScreen, #securityScreen, #bankDataScreen { z-index: 72; }
#changePasswordScreen { z-index: 74; }
.account-menu { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.account-row {
display: flex; align-items: center; gap: 14px;
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 16px;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
text-align: left;
cursor: pointer;
}
.account-row-icon {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--brand-wash);
color: var(--brand-dark);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.account-row-icon svg { width: 19px; height: 19px; }
.account-row-label { flex: 1; }
.account-row-arrow { color: var(--text-muted); font-size: 20px; line-height: 1; }
.account-logout-btn {
display: block;
width: 100%;
background: none;
border: 1.5px solid var(--critical);
color: var(--critical);
font-weight: 700;
font-size: 15px;
border-radius: var(--radius-md);
padding: 14px;
cursor: pointer;
margin-top: 8px;
}
.account-logout-btn:active { background: rgba(208,59,59,0.08); }
/* Cabecera y ficha de "Datos personales" al estilo exacto de la referencia
que mandó Lauren: título grande y en negrita (no la etiqueta pequeña en
mayúsculas que se usaba antes), y dentro de la ficha cada fila es una
etiqueta en negrita arriba con el dato en gris justo debajo, sin líneas
separadoras entre filas (solo el espaciado). */
.account-section-label {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0 2px 12px;
}
.account-data-card { padding: 4px 18px; }
/* Fila "normal" (sin lápiz): etiqueta y dato apilados, uno debajo del
otro, igual que en la referencia — por eso NO lleva display:flex aquí.
Solo las filas editables (con lápiz) necesitan ponerse en fila, para
dejar sitio al botón a la derecha del bloque de texto (que a su vez
sigue apilado por dentro, al ser los dos