/* MCIB — sistema de diseño y 3 temas seleccionables. El tema se conmuta con data-theme en (fintech | glass | terminal); persiste en localStorage. Todo se define con variables → cambiar de tema no recarga ni reflowea. */ /* ---------- tokens base (compartidos) ---------- */ :root { --radius: 14px; --radius-sm: 10px; --gap: .75rem; --pad: .9rem; --tap: 44px; /* objetivo táctil mínimo */ --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --t-fast: .12s; --t: .2s; --pos: #34D399; --neg: #F87171; --warn: #FBBF24; } /* ---------- TEMA 1: Fintech sobrio (DEFECTO) ---------- */ :root, [data-theme="fintech"] { --bg: #0B1220; --bg-grad: radial-gradient(120% 80% at 50% -10%, rgba(52,211,153,.08), transparent 55%); --surface: #131C2E; --surface-2: #1B2740; --surface-hi: #22314F; --text: #E6EDF7; --muted: #8CA0BC; --border: #26324B; --accent: #34D399; --accent-strong: #10B981; --on-accent: #04160E; --shadow: 0 8px 30px rgba(0,0,0,.35); --card-blur: none; --card-bg: var(--surface); --card-border: 1px solid var(--border); --num-font: var(--font); } /* ---------- TEMA 2: Glassmorphism ---------- */ [data-theme="glass"] { --bg: #0A0A1A; --bg-grad: linear-gradient(160deg, rgba(124,58,237,.35), transparent 40%), radial-gradient(100% 60% at 80% 0%, rgba(37,99,235,.30), transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(52,211,153,.15), transparent 50%); --surface: rgba(30,32,60,.55); --surface-2: rgba(40,44,80,.55); --surface-hi: rgba(60,66,110,.6); --text: #F1F1FA; --muted: #A9AED0; --border: rgba(255,255,255,.14); --accent: #A78BFA; --accent-strong: #8B5CF6; --on-accent: #140A24; --shadow: 0 10px 40px rgba(0,0,0,.45); --card-blur: blur(16px) saturate(140%); --card-bg: rgba(255,255,255,.06); --card-border: 1px solid rgba(255,255,255,.16); --num-font: var(--font); } /* ---------- TEMA 3: Neo-terminal ---------- */ [data-theme="terminal"] { --bg: #050505; --bg-grad: none; --surface: #0C0F0C; --surface-2: #111611; --surface-hi: #17201A; --text: #C8F7D4; --muted: #5E7A66; --border: #1C2A1F; --accent: #22C55E; --accent-strong: #16A34A; --on-accent: #041007; --shadow: none; --card-blur: none; --card-bg: var(--surface); --card-border: 1px solid var(--border); --num-font: var(--mono); --pos: #22C55E; --neg: #EF4444; } /* ---------- reset + base ---------- */ * { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: var(--font); color: var(--text); background: var(--bg-grad), var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .mono, .num { font-family: var(--num-font); font-variant-numeric: tabular-nums; } .pos { color: var(--pos); } .neg { color: var(--neg); } .warn-c { color: var(--warn); } /* ---------- login ---------- */ .login-body { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; } .login-card { width: 100%; max-width: 360px; padding: 2rem 1.6rem; text-align: center; background: var(--card-bg); backdrop-filter: var(--card-blur); border: var(--card-border); border-radius: 20px; box-shadow: var(--shadow); } .login-logo { display: grid; place-items: center; margin-bottom: .6rem; } .login-logo img { filter: drop-shadow(0 4px 14px rgba(52,211,153,.4)); } .login-title { font-size: 1.5rem; letter-spacing: .06em; font-weight: 800; } .login-sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.5rem; } .login-form { display: grid; gap: .7rem; text-align: left; } .login-label { font-size: .8rem; color: var(--muted); } .login-input { width: 100%; min-height: var(--tap); padding: .8rem .9rem; font-size: 1rem; color: var(--text); background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 12px; } .login-input:focus { outline: 2px solid var(--accent); border-color: transparent; } .login-btn { margin-top: .3rem; min-height: var(--tap); font-size: 1rem; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 12px; cursor: pointer; transition: transform var(--t-fast), background var(--t); } .login-btn:hover { background: var(--accent-strong); } .login-btn:active { transform: scale(.98); } .login-btn:disabled { opacity: .6; } .login-error { color: var(--neg); font-size: .85rem; min-height: 1.1rem; text-align: center; } /* ---------- app shell ---------- */ .app { max-width: 720px; margin: 0 auto; padding: .75rem .75rem calc(1rem + env(safe-area-inset-bottom)); } .topbar { display: flex; align-items: center; gap: .5rem; padding: .6rem .2rem; margin-bottom: .5rem; background: linear-gradient(var(--bg), rgba(0,0,0,0)); backdrop-filter: blur(6px); } .brand { display: flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .04em; } .brand img { width: 26px; height: 26px; } .grow { flex: 1; } .badge { padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; } .badge.ok { background: color-mix(in srgb, var(--pos) 22%, transparent); color: var(--pos); } .badge.bad { background: color-mix(in srgb, var(--neg) 22%, transparent); color: var(--neg); } .badge.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); } .badge.neutral { background: var(--surface-hi); color: var(--muted); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot.live { background: var(--pos); box-shadow: 0 0 0 0 var(--pos); animation: pulse 2s infinite; } .dot.off { background: var(--neg); } @keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 60%,transparent);} 70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } .banner { background: color-mix(in srgb, var(--neg) 20%, var(--surface)); border: 1px solid color-mix(in srgb, var(--neg) 45%, transparent); color: var(--text); padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: .6rem; font-weight: 700; display: none; } .bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; } select, input.ctl { min-height: 40px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .7rem; font-size: .9rem; } .card { background: var(--card-bg); backdrop-filter: var(--card-blur); border: var(--card-border); border-radius: var(--radius); padding: var(--pad); margin-bottom: var(--gap); box-shadow: var(--shadow); overflow: hidden; /* defensa final: ningún contenido ancho desborda la tarjeta */ } .card-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .55rem; } .row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--border); } .row:last-child { border-bottom: 0; } .muted { color: var(--muted); font-size: .82rem; } .empty { color: var(--muted); text-align: center; padding: 1.4rem 0; } .hero { text-align: center; padding: .4rem 0 .2rem; } .hero .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .hero .v { font-size: 2.1rem; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; margin: .1rem 0; } .hero .d { font-size: .95rem; font-weight: 700; } /* propuesta / orden / posición como tarjeta rica con estructura HOMOGÉNEA: .item-top = [bloque izq: ticker+nombre+región | crece] [bloque der FIJO: precio+variación]. El nombre largo se elipsa dentro de su bloque en vez de empujar el precio de sitio. */ .item { display: grid; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--border); min-width: 0; } /* grid item con min-width:0 → el contenido nowrap no lo expande */ .item:last-child { border-bottom: 0; } .item > * { min-width: 0; } /* cada fila del grid se contiene (permite el ellipsis dentro) */ /* operaciones ejecutadas del Resumen (29-jul): cada operación en su CAJA, con el borde izquierdo coloreado por lado (verde compra / rojo venta) para identificarla de un vistazo */ .item.op { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .6rem; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border); } .item.op.buy { border-left: 3px solid var(--pos); } .item.op.sell { border-left: 3px solid var(--neg); } /* Cartera: borde por el SIGNO del P&G latente */ .item.op.up { border-left: 3px solid var(--pos); } .item.op.down { border-left: 3px solid var(--neg); } .item.op:last-child { margin-bottom: 0; } .item-top { display: flex; align-items: flex-start; gap: .5rem; flex-wrap: nowrap; } /* bloque IZQUIERDO: ocupa el espacio libre y trunca; min-width:0 permite el ellipsis en flex */ .tkr-block { display: flex; align-items: baseline; gap: .4rem; flex: 1 1 auto; min-width: 0; overflow: hidden; } .tkr { font-weight: 700; white-space: nowrap; flex: none; } /* el nombre es lo ÚNICO que se encoge y elipsa (flex:1 con min-width:0); ticker y chip no */ .tkr-name { font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; } .tkr-block .chip { flex: none; align-self: center; } /* bloque DERECHO fijo: precio (resaltado) arriba, variación diaria debajo, alineados a la derecha. flex:none = nunca encoge; siempre en el mismo sitio, quepa lo que quepa a su izq. */ .px-cell { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-align: right; } .px-big { font-size: 1.12em; font-weight: 650; white-space: nowrap; border-radius: 4px; padding: 0 .18em; } .px-chg { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* el color pos/neg del bloque tiñe precio y variación (variación diaria vs cierre anterior) */ .px-cell.pos .px-big, .px-cell.pos .px-chg { color: var(--pos); } .px-cell.neg .px-big, .px-cell.neg .px-chg { color: var(--neg); } /* P&G latente de la posición, destacado y coloreado por signo */ .pnl-latente { font-weight: 700; font-variant-numeric: tabular-nums; } .item-sub { font-size: .76rem; margin-top: -.15rem; } /* empuja un elemento del meta al extremo derecho de su fila */ .tright { text-align: right; } /* flash del precio RT: fondo verde si sube, rojo si baja (se desvanece en ~1,2s) */ @keyframes px-up { 0% { background: rgba(34, 197, 94, .30); } 100% { background: transparent; } } @keyframes px-down { 0% { background: rgba(239, 68, 68, .30); } 100% { background: transparent; } } .px-cell.flash-up .px-big { animation: px-up 1.2s ease-out; } .px-cell.flash-down .px-big { animation: px-down 1.2s ease-out; } /* Efectivo — fila clave/valor RESPONSIVE: etiqueta a la izq (trunca), importe a la derecha sin partir y alineado; en pantalla estrecha el importe NUNCA se corta ni se sale. */ .kv { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--border); } .kv:last-child { border-bottom: 0; } .kv-k { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kv-v { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; text-align: right; white-space: nowrap; } /* tablas (Efectivo/Evolución): el WRAPPER hace el scroll horizontal, no la tabla — evita que los importes queden ocultos en móvil. La tabla mantiene su ancho natural dentro. */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.2rem; } .tbl-wrap table { width: 100%; min-width: max-content; } .card table { -webkit-overflow-scrolling: touch; } .chip { font-size: .7rem; padding: .12rem .5rem; border-radius: 999px; background: var(--surface-hi); color: var(--muted); } .chip.buy { color: var(--pos); background: color-mix(in srgb, var(--pos) 16%, transparent); } .chip.sell { color: var(--neg); background: color-mix(in srgb, var(--neg) 16%, transparent); } .item-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; color: var(--muted); } .item-actions { display: flex; gap: .5rem; } /* menú ⋯ por orden (28-jul): botón discreto a la derecha + desplegable con las acciones */ .kebab-wrap { position: relative; flex: 0 0 auto; } .kebab { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: .25rem .5rem; cursor: pointer; } .kebab:hover { color: var(--text); border-color: var(--text); } .kebab-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 30; min-width: 10rem; padding: .3rem; flex-direction: column; gap: .15rem; } .kebab-menu.open { display: flex; } .kebab-item { background: none; border: 0; color: var(--text); text-align: left; padding: .5rem .7rem; border-radius: 8px; cursor: pointer; font-size: .9rem; white-space: nowrap; } .kebab-item:hover { background: var(--border); } .kebab-item.danger { color: var(--neg); } .btn { flex: 1; min-height: var(--tap); border: 0; border-radius: var(--radius-sm); font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform var(--t-fast), filter var(--t); } .btn:active { transform: scale(.98); } .btn.confirm { background: var(--accent); color: var(--on-accent); } .btn.reject { background: color-mix(in srgb, var(--neg) 22%, var(--surface)); color: var(--neg); } .btn.ghost { background: var(--surface-hi); color: var(--text); } .btn.danger { background: color-mix(in srgb, var(--neg) 30%, var(--surface)); color: var(--text); } .btn:disabled { opacity: .45; cursor: default; } .progress { height: 6px; border-radius: 999px; background: var(--surface-hi); overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--t); } .countdown { font-family: var(--num-font); } table { width: 100%; border-collapse: collapse; font-size: .85rem; } th, td { text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; } td.num, th.num { text-align: right; font-family: var(--num-font); font-variant-numeric: tabular-nums; } tr.expandable { cursor: pointer; } .fills-row td { background: rgba(0,0,0,.18); padding: .3rem .6rem; font-size: .78rem; } /* gráficos */ .chart { width: 100%; height: 140px; display: block; } .spark path.area { fill: color-mix(in srgb, var(--accent) 16%, transparent); } .spark path.line { fill: none; stroke: var(--accent); stroke-width: 2; } .bars rect { fill: var(--accent); } .bars rect.neg { fill: var(--neg); } .axis { stroke: var(--border); stroke-width: 1; } .axis-t { fill: var(--muted); font-size: 9px; font-family: var(--num-font); } /* skeleton de carga */ .sk { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite; } @keyframes shimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} } .sk-line { height: 14px; margin: .5rem 0; } .sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } /* cabecera FIJA: marca + pestañas siempre visibles al hacer scroll (petición 15-jul) */ .stickyhead { position: sticky; top: 0; z-index: 30; margin: -.75rem -.75rem .5rem; /* sangra el padding de .app a ancho completo */ padding: 0 .75rem env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .tabbar { display: flex; justify-content: space-around; padding: 0 0 .3rem; } .tabbtn { flex: 1; min-height: var(--tap); display: grid; place-items: center; gap: 2px; padding: .3rem; background: none; border: 0; color: var(--muted); font-size: .66rem; font-weight: 600; cursor: pointer; } .tabbtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; } .tabbtn.active { color: var(--accent); } .toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--surface-hi); color: var(--text); padding: .6rem 1rem; border-radius: 999px; font-size: .85rem; box-shadow: var(--shadow); opacity: 0; transition: opacity var(--t); z-index: 40; pointer-events: none; } .toast.show { opacity: 1; } .toast.err { background: color-mix(in srgb, var(--neg) 40%, var(--surface)); } /* modal (doble confirmación) */ .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; place-items: center; z-index: 50; padding: 1rem; } .modal-bg.show { display: grid; } .modal { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.2rem; box-shadow: var(--shadow); } .modal h3 { margin-bottom: .5rem; } .modal p { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; white-space: pre-line; } .modal .row-btns { display: flex; gap: .6rem; } /* selector de tema (configuración) */ .themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .theme-opt { border: 2px solid var(--border); border-radius: var(--radius); padding: .6rem; cursor: pointer; text-align: center; font-size: .75rem; color: var(--muted); } .theme-opt.sel { border-color: var(--accent); color: var(--text); } .theme-swatch { height: 40px; border-radius: 8px; margin-bottom: .4rem; } .sw-fintech { background: linear-gradient(135deg, #0B1220, #34D399); } .sw-glass { background: linear-gradient(135deg, #7C3AED, #2563EB); } .sw-terminal { background: linear-gradient(135deg, #050505, #22C55E); } @media (min-width: 640px) { .app { padding-bottom: 1rem; } .tabbar { max-width: 560px; margin: 0 auto; } } /* Informes: lista clicable + detalle con iframe aislado + barra de acciones */ .report-item { cursor: pointer; } .report-item .rep-sum { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .report-actions { display: flex; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; } .report-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; } /* selector de cartera FILTRANDO (4-ago): inequívoco cuando el filtro está activo */ select#strategyFilter.filtering { border-color: var(--accent); color: var(--accent); font-weight: 700; box-shadow: 0 0 0 1px var(--accent); }