/* Panel de trabajo.
*
* ┌──────────────┬────────┬───────────┬─────────────┐
* │ │ TASAS │ CONVERSOR │ OPERACIONES │
* │ CATCULADORA ├────────┴───────────┴─────────────┤
* │ │ GRÁFICA │
* └──────────────┴──────────────────────────────────┘
*
* LA REGLA QUE MANDA: cabe en una pantalla, sin desplazar la página ni ningún recuadro.
* De ahí sale todo lo demás — tipografías de 9 a 11 px, cabeceras de barra, rellenos de 6.
*
* Los estilos de aquí visten la maquetación PROPIA del panel (ver index.html), no las
* páginas. La primera versión metía las páginas dentro de recuadros y les escondía trozos;
* se veía apretujada porque un bloque de página trae su título, sus explicaciones y su
* aire. Lo único heredado son los de verdad, movidos aquí dentro, y a esos sí se
* les recorta el tamaño para que quepan. */
/* ============ EL MARCO ============ */
/* La app está limitada a 840 px, correcto para una columna de lectura y asfixiante para
cinco recuadros. La clase la pone y la quita js/ui/panel-trabajo.js. */
/* El alto lo REPARTE la columna, no lo adivina una resta. Antes el panel medía
`calc(100vh - 86px)`, donde 86 = la barra de arriba (70) + el relleno del body (16). Esa
cuenta solo vale mientras encima del panel no haya nada más, y sí lo hay: al invitado le
sale el aviso de "crea una cuenta", 128 px que la resta no conoce. Resultado, el panel se
iba 144 px por debajo de la pantalla y había que desplazar — justo lo que el panel promete
que no pasa, y solo le pasaba a quien lo veía por primera vez.
Con la columna flexible, lo que se ponga arriba le quita alto al panel en vez de empujarlo
fuera, sin números mágicos que actualizar. */
.app-container.modo-panel {
max-width: none; padding-left: 8px; padding-right: 8px;
height: calc(100vh - 16px); /* los 16 son el relleno que pone la regla de abajo */
display: flex; flex-direction: column;
}
.app-container.modo-panel > * { flex: 0 0 auto; }
/* El body trae 20 px de relleno arriba y 80 abajo, pensados para una página que se lee de
arriba abajo; aquí esos 100 px salen del gráfico. Se recortan mientras el panel está
montado, junto con los dos pies de página, que son avisos de lectura. */
body.con-panel { padding-top: 8px; padding-bottom: 8px; }
.app-container.modo-panel > #page-panel { flex: 1 1 auto; min-height: 440px; }
.app-container.modo-panel > .note,
.app-container.modo-panel > .version-footer { display: none; }
.panel-rejilla {
height: 100%;
display: grid;
gap: 6px;
grid-template-columns: 300px 1fr 1fr 1fr;
/* La fila de arriba va ACOTADA, no en `auto`: con auto el contenido de las celdas la
estira hasta ahogar a la gráfica. Los minmax(0,…) permiten además que cada celda
encoja por debajo de su contenido; sin ellos una rejilla no baja de lo que lleva. */
grid-template-rows: minmax(0, 168px) minmax(0, 1fr);
grid-template-areas:
"calc tasas conv ops"
"calc graf graf graf";
}
.p-calc { grid-area: calc; } .p-tasas { grid-area: tasas; }
.p-conv { grid-area: conv; } .p-ops { grid-area: ops; } .p-graf { grid-area: graf; }
.panel-celda {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 7px;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
overflow: hidden;
}
/* ============ LO QUE NO SE LEÍA: TASAS Y CONVERSOR ============ */
/* Dos textos concretos, los más pequeños del panel, iban en --muted (#6b7280): sobre el
fondo de las celdas eso es 3,8 de contraste, por debajo del 4,5 que hace falta para leer
una letra pequeña sin esforzarse. Medido, no estimado.
.pt-d 9 px las notas de cada tasa
.p-conv .pc-campo > i 8 px "tengo bolívares" / "son dólares"
Van en dorado —el color de la app— y suben a 10,3.
Y SOLO ESOS DOS. El resto del panel se queda en gris a propósito: si se doran también
las etiquetas de la Catculadora y las cabeceras de las cinco celdas, el dorado deja de
señalar nada y la pantalla se vuelve ruido. Se probó, y era demasiado. */
/* Cabecera de barra: fina, en mayúsculas, con línea. Sitúa sin robar altura. */
.panel-t {
flex: 0 0 auto;
margin: 0;
font-family: var(--font-mono);
font-weight: 500;
font-size: 8.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--muted);
padding: 5px 10px;
border-bottom: 1px solid var(--border);
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.panel-t span:last-child { color: var(--text-secondary); letter-spacing: 0.05em; }
/* La tasa del conversor se mueve a la cabecera y trae el tamaño que tenía en su página. */
.panel-t #conversorTasaTexto {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--gold); letter-spacing: 0;
}
.panel-hueco {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 9px 10px;
display: flex;
flex-direction: column;
gap: 7px;
scrollbar-width: thin;
}
.panel-hueco::-webkit-scrollbar { width: 6px; }
.panel-hueco::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* ============ CAMPOS DEL PANEL ============ */
/* Etiqueta pequeña encima, campo debajo: es la forma del boceto, y la que permite meter
tres campos en el alto que la página gasta en uno. */
.pc-campo { display: block; }
.pc-campo > i {
display: block;
font-style: normal;
font-size: 8px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 3px;
}
.pc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
/* Solo en el conversor. Las mismas etiquetas en la Catculadora se quedan en gris: allí
están junto a la tira de bancos y al resumen, y doradas competían con todo. */
.p-conv .pc-campo > i { color: var(--gold); }
/* La flecha entre "tengo bolívares" y "son dólares" es lo que dice hacia dónde va la
cuenta. En gris apagado no se veía, y es media instrucción. */
.pc-flecha { text-align: center; color: var(--gold-dim); font-size: 11px; line-height: 1; }
.pc-pie { margin-top: auto; padding-top: 4px; }
/* Los vienen de la página, donde son grandes porque allí hay sitio. */
.p-calc .input-row,
.p-conv .input-row { padding: 3px 8px; margin: 0; }
.p-calc .input-row input,
.p-conv .input-row input { font-size: 13px; padding: 3px 0; }
.p-calc .input-row .prefix,
.p-conv .input-row .prefix { font-size: 10px; }
/* Bancos: fichas de TEXTO, pequeñas y en dos filas.
En su página son diez tarjetas con logotipo, del tamaño que hace falta para elegir con
el dedo en un móvil. Aquí eso se comía media columna y dejaba los campos fuera de la
celda — la primera versión del panel salía ya desplazada. El logotipo se va: dentro del
panel ya sabes en qué banco estás porque lo dice la cabecera, y el nombre basta para
cambiarlo.
La regla va sobre .banco-strip y no sobre .pc-bancos: la tira se MUEVE dentro de la
ranura, así que la ranura es su padre y no ella misma. */
.pc-bancos .banco-strip {
display: grid !important;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
overflow: visible !important;
padding: 0 !important;
}
.pc-bancos .banco-strip > * {
min-width: 0 !important; width: auto !important; margin: 0 !important; flex: none !important;
}
.pc-bancos .tile {
padding: 5px 2px 4px; min-height: 0; gap: 1px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pc-bancos .tile .badge { display: none; }
.pc-bancos .tile-name {
font-size: 8.5px; font-weight: 700; line-height: 1.15;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pc-bancos .tile-sub { font-size: 7px; line-height: 1.1; }
.p-calc .carousel-arrow { display: none !important; }
.p-calc .banco-carousel { display: block !important; }
/* El resumen de la operación: cuatro cifras en dos filas, sin sus explicaciones. */
/* Las cifras del resumen se salían del recuadro y quedaban cortadas con puntos
suspensivos. Se bajan de tamaño y se dejan partir: vale más leerlas en dos líneas que
no leerlas. */
.p-calc .resumen-grid4 { grid-template-columns: 1fr 1fr !important; gap: 5px; }
.p-calc .resumen-grid4 .hint { display: none; }
.p-calc .resumen-tile { padding: 6px 7px; }
.p-calc .resumen-tile .val,
.p-calc .resumen-tile > div:last-child {
font-size: 12px !important; white-space: normal !important;
overflow: visible !important; text-overflow: clip !important;
}
.p-calc .resumen-tile .lbl,
.p-calc .resumen-tile > div:first-child { font-size: 7.5px !important; }
.p-calc .btn-main { padding: 8px; font-size: 11px; margin: 0; }
.p-calc .tasa-sugerencia { font-size: 9.5px; padding: 5px 7px; }
/* El resultado, recortado a lo que se mira al cerrar una operación: la ganancia neta, sus
cuatro cifras, la fecha con el botón de guardar, el recibo en PDF y el uso recomendado
de la tarjeta.
El corte va en el hijo 8 —la tarjeta de ruta— y de ahí para abajo se esconde todo: los
dos análisis, el desglose de comisiones, la rentabilidad, los botones de compartir, la
tasa personalizada y el pie. Eso sigue entero en la Catculadora, que es donde se estudia
una operación; el panel es para cerrarla y seguir trabajando. */
.p-calc #step2 > *:nth-child(n + 8) { display: none !important; }
.pc-volver {
margin-top: 8px; padding: 6px; width: 100%;
background: none; border: 1px solid var(--border); border-radius: 5px;
color: var(--text-secondary); font: inherit; font-size: 10px; cursor: pointer;
}
.pc-volver:hover { border-color: var(--border-hover); color: var(--text); }
/* ============ TASAS ============ */
/* Tres tasas que se parecen mucho entre sí (742 / 745 / 957) y que hay que distinguir de
un vistazo. Antes el nombre iba en 9 px con espaciado de titular, o sea el tamaño de
una nota al pie para lo único que dice cuál es cuál: ahora el nombre manda y la
aclaración va debajo, en gris. */
/* Las tres filas se separan con su propia línea, así que aquí sobra la separación que
.panel-hueco le da a todo lo demás. Sin quitarla las tres no caben en la celda y la
tercera —la tasa de venta, la que más se mira— quedaba debajo del corte, con la celda
desplazándose. Medido: 174 px de contenido en 143 px de hueco. */
.p-tasas .panel-hueco { gap: 0; padding: 4px 10px; }
.pt-fila {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "k v" "d v";
align-items: center;
gap: 0 10px;
padding: 5px 0;
border-bottom: 1px solid var(--border);
}
.pt-fila:last-child { border-bottom: none; }
.pt-k { grid-area: k; font-size: 11.5px; font-weight: 600; color: var(--text); }
.pt-d { grid-area: d; font-size: 9px; color: var(--gold); margin-top: 2px; }
.pt-v { grid-area: v; font-family: var(--font-mono); font-size: 18px; font-weight: 600;
font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
/* La unidad, pequeña y pegada: sin ella son tres números sueltos. */
.pt-v > i { font-style: normal; font-size: 9px; font-weight: 400;
color: var(--muted); margin-left: 3px; }
.pt-vacio { color: var(--muted); }
/* ============ OPERACIONES ============ */
.po-fila {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
align-items: center;
gap: 8px;
width: 100%;
text-align: left;
background: var(--panel-2);
border: 1px solid transparent;
border-radius: 5px;
padding: 5px 7px;
color: inherit;
font: inherit;
cursor: pointer;
}
.po-fila:hover { border-color: var(--border-hover); }
.po-icono {
width: 20px; height: 20px; border-radius: 5px;
display: grid; place-items: center;
font-size: 8px; font-weight: 700;
overflow: hidden; /* el logo, dentro de las esquinas — ver logoBanco */
}
.po-que { font-size: 10.5px; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.po-que > i { font-style: normal; color: var(--muted); font-size: 9px; margin-left: 5px; }
.po-estado { font-size: 8px; padding: 1px 5px; text-transform: capitalize; }
.po-g { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--green); font-variant-numeric: tabular-nums; }
.po-g.neg, .po-total.neg { color: var(--red); }
/* Borrar. Apagado hasta que pasas por encima de la fila: es irreversible y no tiene por
qué llamar la atención estando ahí todo el día. Sigue pidiendo confirmación — la pide
eliminarOperacion, la misma función que usa la página de Operaciones. */
.po-borrar {
background: none; border: none; padding: 0; cursor: pointer;
width: 16px; height: 16px; line-height: 1;
display: grid; place-items: center; border-radius: 4px;
color: var(--muted); font-size: 10px; opacity: 0;
transition: opacity .12s, color .12s, background .12s;
}
.po-fila:hover .po-borrar { opacity: 1; }
.po-borrar:hover { color: var(--red); background: rgba(234, 57, 67, 0.14); }
/* Sin ratón no hay "pasar por encima", así que ahí se ve siempre. */
@media (hover: none) { .po-borrar { opacity: 1; } }
.po-total { font-family: var(--font-mono); font-size: 11px; color: var(--green); }
.po-vacio { font-size: 10px; color: var(--muted); text-align: center;
padding: 14px 4px; line-height: 1.6; }
/* ============ GRÁFICA ============ */
/* De 605 px de celda las velas se quedaban con 246: el resto eran dos barras de
herramientas, las pestañas de temporalidad, el aviso de arrastre, una nota y el RSI.
Aquí se recorta todo lo que no sea mirar el precio, que es a lo que se viene. Lo
quitado sigue en el Dashboard y en pantalla completa. */
.p-graf .panel-hueco { padding: 5px 8px; gap: 0; }
/* La altura va en .chart-panes, el contenedor flex, y no en el lienzo: dentro de un flex
la altura del hijo la decide el padre, así que ponerla en el lienzo no hace nada ni con
!important. La calcula js/ui/panel-trabajo.js midiendo el hueco. */
.p-graf .chart-panes { height: var(--alto-grafico-panel, 320px) !important; }
.p-graf .chart-canvas-lwc { min-height: 0 !important; }
.p-graf #rsiChart { height: 46px !important; min-height: 0 !important; }
/* Fuera: el desplegable de selección (gasta una tarjeta en elegir entre cinco gráficos),
el panel del máximo (es un análisis para leer, no para mirar de reojo), el aviso de
"arrastra para ver días anteriores" y la nota del rango probable. */
.p-graf .chart-switch-wrap,
.p-graf #notaMaximoDia,
.p-graf #notaRangoProbable,
.p-graf #notaProyeccion,
.p-graf .chart-nav,
.p-graf .chart-nav-pista { display: none !important; }
/* Y las dos barras que quedan, apretadas: la del precio y la de tipo de gráfico. */
.p-graf .chart-toolbar { padding: 0 0 2px !important; min-height: 0; gap: 6px; }
.p-graf .chart-header-lwc { padding: 0 0 2px; }
.p-graf .velas-tabs { margin-top: 3px !important; }
.p-graf .velas-tabs .tab { padding: 3px 8px; font-size: 9.5px; }
.p-graf .chart-wrap { margin: 0 !important; }
/* ============ CUANDO NO CABE ============ */
/* Por debajo de 1250 px cuatro columnas dejan los campos sin ancho para rellenarse. El
panel se apila y sí hay que desplazar — es el límite real de la idea, y conviene que se
note en vez de disimularlo: en pantalla pequeña la herramienta es la app normal. */
@media (max-width: 1250px) {
/* Aquí el panel SÍ se desplaza a propósito, así que se suelta la columna de altura fija:
si no, el reparto flexible seguiría intentando meterlo todo en una pantalla. */
.app-container.modo-panel { height: auto; display: block; }
.app-container.modo-panel > #page-panel { height: auto; min-height: 0; }
.panel-rejilla {
grid-template-columns: minmax(290px, 1fr) 1fr;
grid-template-rows: none;
grid-template-areas:
"calc tasas"
"calc conv"
"calc ops"
"graf graf";
}
.p-graf .chart-panes { height: 320px !important; }
}
@media (max-width: 760px) {
.panel-rejilla {
grid-template-columns: 1fr;
grid-template-areas: "graf" "tasas" "calc" "conv" "ops";
}
}