760 lines
46 KiB
CSS
760 lines
46 KiB
CSS
:root {
|
|
--fondo: #f5f6f8;
|
|
--superficie: #ffffff;
|
|
--superficie-2: #f0f2f5;
|
|
--borde: #e2e5ea;
|
|
--texto: #1b1f24;
|
|
--texto-2: #5b6470;
|
|
--texto-3: #8a929c;
|
|
--acento: #2459c9;
|
|
--acento-suave: #e6edfb;
|
|
--sobre-acento: #ffffff;
|
|
--positivo: #13795b;
|
|
--positivo-suave: #e3f4ee;
|
|
--negativo: #c0392b;
|
|
--negativo-suave: #fbe9e7;
|
|
--aviso: #9a6200;
|
|
--aviso-suave: #fdf3dc;
|
|
--sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
|
|
--radio: 10px;
|
|
--serie-1: #2459c9;
|
|
--serie-2: #9aa3ae;
|
|
--c-Fondo: #2459c9;
|
|
--c-PlanPensiones: #7c4dcc;
|
|
--c-Cripto: #e08a00;
|
|
--c-Metal: #b8960c;
|
|
--c-ETF: #13795b;
|
|
--c-Accion: #c0392b;
|
|
--c-CuentaTrading: #0e8aa8;
|
|
--c-Prestamo: #b54d8f;
|
|
--c-Tierra: #6b8e23;
|
|
--c-Inmueble: #8d6e4a;
|
|
--c-RentaFija: #4a6fa5;
|
|
--c-Cuenta: #7a8794;
|
|
--c-Deuda: #9a5b3c;
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* Modo oscuro: lo decide tema.js (el del sistema o el elegido con el botón) */
|
|
:root[data-tema="oscuro"] {
|
|
--fondo: #111418;
|
|
--superficie: #1a1e24;
|
|
--superficie-2: #22272e;
|
|
--borde: #2e343c;
|
|
--texto: #e7eaee;
|
|
--texto-2: #a5adb8;
|
|
--texto-3: #7b838e;
|
|
--acento: #6f9cf5;
|
|
--acento-suave: #1d2a44;
|
|
--sobre-acento: #0b1220;
|
|
--positivo: #45c496;
|
|
--positivo-suave: #15302a;
|
|
--negativo: #f07a6c;
|
|
--negativo-suave: #3a1f1c;
|
|
--aviso: #e7b454;
|
|
--aviso-suave: #3a2f17;
|
|
--sombra: 0 1px 2px rgba(0, 0, 0, .4);
|
|
--serie-1: #6f9cf5;
|
|
--serie-2: #6b737d;
|
|
--c-Fondo: #6f9cf5;
|
|
--c-PlanPensiones: #a888e8;
|
|
--c-Cripto: #f0a830;
|
|
--c-Metal: #d6b73d;
|
|
--c-ETF: #45c496;
|
|
--c-Accion: #f07a6c;
|
|
--c-CuentaTrading: #4cc2de;
|
|
--c-Prestamo: #e07ab8;
|
|
--c-Tierra: #9cc25a;
|
|
--c-Inmueble: #c9a27a;
|
|
--c-RentaFija: #8fb0e0;
|
|
--c-Cuenta: #98a3ae;
|
|
--c-Deuda: #d99373;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; }
|
|
body {
|
|
background: var(--fondo);
|
|
color: var(--texto);
|
|
font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
|
|
}
|
|
button, input, select, textarea { font: inherit; color: inherit; }
|
|
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
.pos { color: var(--positivo); }
|
|
.neg { color: var(--negativo); }
|
|
.suave { color: var(--texto-2); }
|
|
.muy-suave { color: var(--texto-3); font-size: 13px; }
|
|
.oculto { display: none !important; }
|
|
|
|
/* ── Cabecera ── */
|
|
.cabecera {
|
|
position: sticky; top: 0; z-index: 10;
|
|
background: var(--superficie);
|
|
border-bottom: 1px solid var(--borde);
|
|
}
|
|
.cabecera-fila {
|
|
max-width: 1200px; margin: 0 auto; padding: 12px 16px;
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
}
|
|
.marca { font-weight: 700; font-size: 18px; margin-right: auto; }
|
|
.marca small { display: block; font-weight: 400; font-size: 12px; color: var(--texto-3); }
|
|
.pestanas {
|
|
max-width: 1200px; margin: 0 auto; padding: 0 16px;
|
|
display: flex; gap: 4px; overflow-x: auto;
|
|
}
|
|
.pestana {
|
|
border: 0; background: none; padding: 10px 12px; cursor: pointer;
|
|
color: var(--texto-2); border-bottom: 2px solid transparent; white-space: nowrap;
|
|
}
|
|
.pestana[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
|
|
.pestana .contador {
|
|
display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
|
|
background: var(--aviso-suave); color: var(--aviso); font-size: 12px; font-weight: 600; text-align: center;
|
|
}
|
|
|
|
/* ── Botones ── */
|
|
.btn {
|
|
border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px;
|
|
padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover { background: var(--superficie-2); }
|
|
.btn:disabled { opacity: .55; cursor: default; }
|
|
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
|
|
.btn-primario:hover { background: var(--acento); filter: brightness(1.08); }
|
|
.btn-peligro { color: var(--negativo); }
|
|
.btn-enlace { border: 0; background: none; color: var(--acento); padding: 2px 4px; cursor: pointer; }
|
|
.btn-enlace:hover { text-decoration: underline; }
|
|
.btn-enlace.btn-peligro { color: var(--negativo); }
|
|
/* El asa para cambiar de sitio una fila arrastrándola (con el dedo o con el ratón) */
|
|
.asa-orden { border: 0; background: none; color: var(--texto-suave, #888); font-size: 18px; line-height: 1; padding: 6px 8px;
|
|
cursor: grab; touch-action: none; user-select: none; border-radius: 6px; }
|
|
.asa-orden:hover, .asa-orden:focus-visible { background: rgba(127, 127, 127, .15); }
|
|
.celda-asa { width: 1%; padding-right: 0; }
|
|
tr.arrastrando { background: rgba(127, 127, 127, .15); }
|
|
tr.arrastrando .asa-orden { cursor: grabbing; }
|
|
.btn-icono { border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--texto-2); }
|
|
.btn-icono:hover { background: var(--superficie-2); color: var(--texto); }
|
|
.girando { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giro .8s linear infinite; }
|
|
@keyframes giro { to { transform: rotate(360deg); } }
|
|
|
|
.btn-tema { font-size: 16px; line-height: 1; padding: 7px 10px; min-width: 38px; justify-content: center; }
|
|
.menu { position: relative; }
|
|
.menu-lista {
|
|
position: absolute; right: 0; top: calc(100% + 4px); min-width: 210px; z-index: 20;
|
|
background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 4px;
|
|
/* En un portátil la lista no cabe entera: se desplaza dentro, con su barra */
|
|
max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
|
|
scrollbar-color: var(--texto-3) transparent;
|
|
}
|
|
.menu-lista button {
|
|
display: block; width: 100%; text-align: left; border: 0; background: none;
|
|
padding: 8px 10px; border-radius: 6px; cursor: pointer;
|
|
}
|
|
.menu-lista button:hover { background: var(--superficie-2); }
|
|
/* «▾ Más opciones»: pegado al borde de abajo de la lista mientras quede algo por ver */
|
|
.menu-sigue {
|
|
display: none; position: sticky; bottom: -4px; margin: 0 -4px -4px; padding: 14px 10px 6px;
|
|
text-align: center; font-size: 12.5px; font-weight: 600; color: var(--acento); cursor: pointer;
|
|
background: linear-gradient(to bottom, transparent, var(--superficie) 45%);
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
.menu-lista.hay-mas .menu-sigue { display: block; }
|
|
|
|
/* ── Contenido ── */
|
|
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
|
|
.rejilla { display: grid; gap: 16px; }
|
|
.rejilla-kpi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
|
|
.rejilla-2 { grid-template-columns: 2fr 1fr; }
|
|
@media (max-width: 860px) { .rejilla-2 { grid-template-columns: 1fr; } }
|
|
.tarjeta {
|
|
background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
|
|
box-shadow: var(--sombra); padding: 16px; min-width: 0;
|
|
}
|
|
.tarjeta h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
|
|
.tarjeta h2 .suave { font-weight: 400; font-size: 13px; }
|
|
.seccion { margin-top: 16px; }
|
|
.kpi .etiqueta { color: var(--texto-2); font-size: 13px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
|
|
.kpi .etiqueta .btn-ayuda { flex: none; margin-left: 0; }
|
|
.kpi .valor { font-size: 22px; font-weight: 650; margin-top: 2px; white-space: normal; overflow-wrap: break-word; }
|
|
.kpi .detalle { font-size: 13px; margin-top: 2px; }
|
|
|
|
/* ── Avisos ── */
|
|
.avisos { display: flex; flex-direction: column; gap: 8px; }
|
|
.aviso {
|
|
display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
|
|
background: var(--aviso-suave); color: var(--texto); font-size: 14px;
|
|
}
|
|
.aviso::before { content: "●"; color: var(--aviso); font-size: 10px; }
|
|
.aviso span { flex: 1; }
|
|
.bienvenida { background: var(--acento-suave); }
|
|
.bienvenida::before { color: var(--acento); }
|
|
|
|
/* ── Tablas ── */
|
|
.tabla-marco { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
|
|
th { font-size: 12px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
|
|
td.d, th.d { text-align: right; }
|
|
tbody tr.clicable { cursor: pointer; }
|
|
tbody tr.clicable:hover { background: var(--superficie-2); }
|
|
tr:last-child td { border-bottom: 0; }
|
|
.nombre-activo { display: flex; align-items: center; gap: 8px; min-width: 180px; }
|
|
.punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
|
|
.etiqueta-tipo { font-size: 12px; color: var(--texto-3); }
|
|
.insignia {
|
|
display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 9px;
|
|
background: var(--superficie-2); color: var(--texto-2); margin-left: 4px; vertical-align: middle;
|
|
}
|
|
.insignia.aviso-i { background: var(--aviso-suave); color: var(--aviso); }
|
|
.insignia.info-i { background: var(--acento-suave); color: var(--acento); }
|
|
.barra-peso { height: 6px; background: var(--superficie-2); border-radius: 3px; min-width: 60px; }
|
|
.barra-peso div { height: 100%; border-radius: 3px; }
|
|
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
|
|
.filtros select, .filtros input { padding: 6px 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
|
|
.vacio { text-align: center; color: var(--texto-3); padding: 32px 8px; }
|
|
|
|
/* ── Gráficos ── */
|
|
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
|
|
.grafico text { fill: var(--texto-3); font-size: 11px; }
|
|
@media (max-width: 600px) { .grafico text { font-size: 20px; } }
|
|
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); margin-top: 8px; }
|
|
.leyenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
|
|
.reparto { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
|
.reparto svg { width: 150px; height: 150px; flex: none; }
|
|
.reparto ul { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 150px; }
|
|
.reparto li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
|
|
.reparto li span:nth-child(2) { flex: 1; }
|
|
.tooltip {
|
|
position: fixed; pointer-events: none; z-index: 50; background: var(--texto); color: var(--fondo);
|
|
padding: 6px 9px; border-radius: 6px; font-size: 12px; line-height: 1.4; white-space: nowrap;
|
|
}
|
|
|
|
/* ── Modales ── */
|
|
.velo {
|
|
position: fixed; inset: 0; background: rgba(10, 14, 20, .45); z-index: 30;
|
|
display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow-y: auto;
|
|
}
|
|
.modal {
|
|
background: var(--superficie); border-radius: 12px; width: 100%; max-width: 560px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,.3);
|
|
}
|
|
.modal.ancho { max-width: 880px; }
|
|
.modal-cab { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--borde); gap: 8px; }
|
|
.modal-cab h3 { margin: 0; font-size: 17px; flex: 1; }
|
|
.modal-cuerpo { padding: 16px 18px; }
|
|
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--borde); flex-wrap: wrap; }
|
|
.modal-pie .izq { margin-right: auto; }
|
|
|
|
/* ── Formularios ── */
|
|
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.campos .completo { grid-column: 1 / -1; }
|
|
@media (max-width: 520px) { .campos { grid-template-columns: 1fr; } }
|
|
label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-2); }
|
|
label.campo input, label.campo select, label.campo textarea {
|
|
padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto);
|
|
}
|
|
label.campo input:focus, label.campo select:focus, .buscador input:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
|
|
.ayuda { font-size: 12px; color: var(--texto-3); }
|
|
.segmentado { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.segmentado button {
|
|
border: 1px solid var(--borde); background: var(--superficie); border-radius: 18px; padding: 5px 12px; cursor: pointer; font-size: 14px;
|
|
}
|
|
.segmentado button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
|
|
.error-form { background: var(--negativo-suave); color: var(--negativo); padding: 8px 10px; border-radius: 8px; font-size: 14px; margin-bottom: 12px; }
|
|
.nota-form { background: var(--superficie-2); padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--texto-2); }
|
|
.buscador input { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-size: 16px; }
|
|
.resultados { margin-top: 10px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
|
|
.resultado {
|
|
text-align: left; border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px;
|
|
padding: 8px 10px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
|
|
}
|
|
.resultado:hover, .resultado[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); }
|
|
.resultado small { color: var(--texto-3); }
|
|
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-bottom: 16px; }
|
|
.ficha div small { display: block; color: var(--texto-2); font-size: 12px; }
|
|
.ficha div b { font-size: 17px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }
|
|
.ficha div b small { display: block; font-size: 13px; font-weight: 400; }
|
|
.acciones-ficha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
|
|
|
|
/* ── Avisos flotantes ── */
|
|
.toasts { position: fixed; bottom: 16px; right: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 60; pointer-events: none; }
|
|
.toast {
|
|
background: var(--texto); color: var(--fondo); padding: 10px 14px; border-radius: 8px; max-width: 420px;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: auto; font-size: 14px;
|
|
}
|
|
.toast.error { background: var(--negativo); color: #fff; }
|
|
|
|
/* ── Asistente ── */
|
|
.caja-rapida { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
|
|
.caja-rapida input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 4px; font-size: 16px; }
|
|
.caja-rapida input:focus { outline: none; }
|
|
.caja-rapida:focus-within { border-color: var(--acento); }
|
|
.chat { display: flex; flex-direction: column; gap: 12px; }
|
|
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 58vh; overflow-y: auto; padding: 2px; }
|
|
.burbuja { padding: 10px 12px; border-radius: 12px; max-width: 92%; }
|
|
.burbuja p { margin: 0 0 8px; }
|
|
.burbuja.usuario { align-self: flex-end; background: var(--acento); color: var(--sobre-acento); border-bottom-right-radius: 4px; }
|
|
.burbuja.asistente { align-self: flex-start; background: var(--superficie-2); border-bottom-left-radius: 4px; display: flex; flex-direction: column; gap: 8px; }
|
|
.chat-entrada { display: flex; gap: 8px; align-items: flex-end; }
|
|
.chat-entrada textarea { flex: 1; resize: vertical; min-height: 44px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); font-size: 15px; }
|
|
.chat-entrada textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.chip { border: 1px solid var(--borde); background: var(--superficie); border-radius: 16px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
|
|
.chip:hover { border-color: var(--acento); color: var(--acento); }
|
|
.propuesta { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--positivo); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
|
|
.propuesta.incompleta { border-left-color: var(--aviso); }
|
|
.propuesta-frase { font-size: 12px; color: var(--texto-3); }
|
|
.propuesta-texto { font-weight: 600; }
|
|
.propuesta-avisos { margin: 0; padding-left: 18px; font-size: 13px; color: var(--texto-2); }
|
|
.propuesta-faltan { font-size: 13px; color: var(--aviso); }
|
|
.propuesta-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
|
|
.propuesta-hecha { font-size: 14px; color: var(--positivo); font-weight: 600; }
|
|
.propuesta-nuevos { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
|
|
.chip-nuevo { text-align: left; }
|
|
details summary { cursor: pointer; margin-bottom: 6px; }
|
|
.zona-suelta { border: 2px dashed var(--borde); border-radius: 10px; padding: 24px; text-align: center; color: var(--texto-2); display: flex; flex-direction: column; gap: 12px; align-items: center; }
|
|
.zona-suelta.soltando { border-color: var(--acento); background: var(--acento-suave); }
|
|
|
|
/* Títulos de sección dentro de una ventana (Bitcoin desde mi nodo) */
|
|
.modal-cuerpo h4 { margin: 18px 0 6px; font-size: 15px; }
|
|
.modal-cuerpo h4 .titulillo { font-weight: 400; font-size: 13px; }
|
|
|
|
/* Selección de operaciones */
|
|
th.casilla, td.casilla { width: 28px; padding-right: 0; }
|
|
tr.marcada td { background: var(--acento-suave); }
|
|
.barra-seleccion { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
|
|
padding: 8px 12px; margin-bottom: 10px; background: var(--acento-suave); border: 1px solid var(--acento); border-radius: 8px; }
|
|
.barra-seleccion strong { margin-right: 4px; }
|
|
|
|
/* Justificantes de una operación */
|
|
.justificantes { border-top: 1px solid var(--borde); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
|
|
.etiqueta-seccion { font-weight: 600; }
|
|
.lista-adjuntos { list-style: none; margin: 0; padding: 0; width: 100%; }
|
|
.lista-adjuntos li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 0; }
|
|
.nombre-adjunto { overflow-wrap: anywhere; }
|
|
.txid { overflow-wrap: anywhere; font-size: 13px; }
|
|
.txid code { font-size: 12px; }
|
|
|
|
/* Traza de una moneda: el camino hacia atrás, sangrado */
|
|
.arbol-traza, .arbol-traza ul { list-style: none; margin: 0; padding-left: 18px; }
|
|
.arbol-traza { padding-left: 0; }
|
|
.arbol-traza ul { border-left: 2px solid var(--borde); margin-left: 6px; }
|
|
.arbol-traza li { padding: 3px 0; }
|
|
|
|
/* ── Bienvenida, primeros pasos y cartera de ejemplo ── */
|
|
.bienvenida-caja { max-width: 760px; margin: 24px auto 0; }
|
|
.bienvenida-tarjeta { padding: 28px; }
|
|
.bienvenida-tarjeta h1 { margin: 0 0 8px; font-size: 1.6rem; }
|
|
.bienvenida-intro { color: var(--texto-2); margin: 0 0 20px; font-size: 1.02rem; line-height: 1.5; }
|
|
.pasos { display: grid; gap: 10px; }
|
|
.paso { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto-2); }
|
|
.paso.actual { border-color: var(--acento); background: var(--acento-suave); color: var(--texto); }
|
|
.paso.hecho { background: var(--superficie-2); }
|
|
.paso-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
|
|
font-weight: 700; background: var(--superficie-2); color: var(--texto-2); }
|
|
.paso.actual .paso-num { background: var(--acento); color: var(--sobre-acento); }
|
|
.paso.hecho .paso-num { background: var(--positivo-suave); color: var(--positivo); }
|
|
.paso-cuerpo { min-width: 0; }
|
|
.paso-cuerpo .btn { white-space: normal; text-align: left; }
|
|
@media (max-width: 520px) { .bienvenida-tarjeta { padding: 18px; } .bienvenida-caja { margin-top: 8px; } }
|
|
.paso-cuerpo h3 { margin: 3px 0 4px; font-size: 1rem; color: var(--texto); }
|
|
.paso-cuerpo p { margin: 0; line-height: 1.45; }
|
|
.paso-cuerpo .btn { margin-top: 12px; }
|
|
.bienvenida-ejemplo { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
|
|
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde); }
|
|
.aviso-ejemplo { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
|
|
margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radio); background: var(--acento-suave);
|
|
border: 1px solid var(--acento); }
|
|
.aviso-ejemplo span { flex: 1; min-width: 220px; }
|
|
|
|
/* ── La explicación de cada cifra ── */
|
|
.btn-ayuda { margin-left: 6px; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--borde);
|
|
background: var(--superficie-2); color: var(--texto-2); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
|
|
vertical-align: middle; }
|
|
.btn-ayuda:hover, .btn-ayuda[aria-expanded="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
|
|
.kpi-ayuda { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); font-size: 13px; line-height: 1.45; color: var(--texto-2); }
|
|
.avisos + .avisos { margin-top: 8px; }
|
|
.avisos + .btn-enlace, .avisos.oculto + .btn-enlace { margin-top: 10px; }
|
|
|
|
/* ── Apuntar una operación: primero «¿qué ha pasado?» ── */
|
|
.campos.sin-tipo > :not(.siempre) { display: none; }
|
|
.que-paso .etiqueta-seccion { margin-bottom: 8px; }
|
|
.opciones-paso { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; }
|
|
.opcion-paso { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 13px; cursor: pointer;
|
|
border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; }
|
|
.opcion-paso:hover, .opcion-paso:focus-visible { border-color: var(--acento); background: var(--acento-suave); }
|
|
.opcion-paso span { font-size: 13px; color: var(--texto-2); line-height: 1.35; }
|
|
.que-paso details { margin-top: 10px; }
|
|
.que-paso details summary { color: var(--acento); }
|
|
.que-paso details .opciones-paso { margin-top: 8px; }
|
|
.paso-elegido { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--acento-suave); }
|
|
|
|
/* ── Identidad y móvil ── */
|
|
.nunca { display: none !important; }
|
|
.logo { flex: none; border-radius: 8px; display: block; }
|
|
.marca { line-height: 1.2; min-width: 0; }
|
|
.marca small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.solo-movil { display: none !important; }
|
|
.btn-icono { min-width: 34px; min-height: 34px; font-size: 16px; }
|
|
.pestanas { scrollbar-width: none; }
|
|
.pestanas::-webkit-scrollbar { display: none; }
|
|
@media (max-width: 640px) {
|
|
.no-movil { display: none !important; }
|
|
.solo-movil { display: block !important; }
|
|
.cabecera-fila { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
|
|
.logo { width: 30px; height: 30px; }
|
|
/* Las cifras del resumen, de dos en dos en vez de una debajo de otra */
|
|
.rejilla-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
|
.rejilla-kpi .kpi-principal { grid-column: 1 / -1; }
|
|
.kpi .valor { font-size: 19px; }
|
|
.kpi-principal .valor { font-size: 26px; }
|
|
#contenido { padding-left: 12px; padding-right: 12px; }
|
|
.btn-icono { min-width: 40px; min-height: 40px; }
|
|
}
|
|
|
|
/* ── Fiscal en dos niveles: lo esencial arriba, el detalle plegado ── */
|
|
.en-pocas-palabras { margin: 4px 0 16px; }
|
|
.en-pocas-palabras h3 { margin: 0 0 6px; font-size: 1rem; }
|
|
.en-pocas-palabras ul { margin: 0 0 8px; padding-left: 20px; line-height: 1.6; font-size: 1.02rem; }
|
|
.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; margin: 0; }
|
|
.plegable > summary::-webkit-details-marker { display: none; }
|
|
.plegable > summary::before { content: "▸"; color: var(--texto-3); flex: none; width: 14px; }
|
|
.plegable[open] > summary::before { content: "▾"; }
|
|
.plegable > summary h2 { margin: 0; flex: 1; }
|
|
.plegable[open] > summary { margin-bottom: 14px; }
|
|
.plegable > summary:hover h2 { color: var(--acento); }
|
|
|
|
/* ── Menú por grupos y bitcoin en la bienvenida ── */
|
|
.menu-titulo { padding: 8px 14px 2px; margin-top: 4px; border-top: 1px solid var(--borde); font-size: 11px;
|
|
text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
|
|
.menu-titulo:empty { padding: 0; }
|
|
.bienvenida-bitcoin { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px;
|
|
border-radius: var(--radio); background: var(--superficie-2); }
|
|
.bienvenida-bitcoin img { flex: none; border-radius: 7px; }
|
|
.bienvenida-bitcoin .suave { line-height: 1.45; margin-top: 2px; }
|
|
|
|
/* ── Entrar con contraseña (Caudal en un servidor) ── */
|
|
.solo-servidor { display: none !important; }
|
|
.en-servidor .solo-servidor { display: block !important; }
|
|
.sin-sesion .cabecera { display: none; }
|
|
.puerta { max-width: 420px; margin: 8vh auto 0; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
|
|
.puerta h1 { margin: 0; font-size: 1.5rem; }
|
|
.puerta p { margin: 0; line-height: 1.5; }
|
|
.puerta-logo { border-radius: 14px; }
|
|
.puerta input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px;
|
|
background: var(--superficie); font-size: 16px; }
|
|
.puerta .btn { padding: 10px 14px; }
|
|
.bienvenida-restaurar { margin: 18px 0 0; }
|
|
|
|
/* ── Qué tal es la contraseña que se está escribiendo ── */
|
|
.medida-clave { font-size: 12px; margin-top: 4px; min-height: 16px; color: var(--texto-3); }
|
|
.medida-clave.corta { color: var(--negativo); }
|
|
.medida-clave.vale { color: var(--aviso); }
|
|
.medida-clave.buena { color: var(--positivo); }
|
|
.puerta .campo input[type="password"] { width: 100%; }
|
|
.campo > div > input[type="password"] { width: 100%; }
|
|
|
|
/* ── La clave de recuperación y el cifrado ── */
|
|
.recuperacion { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
|
|
.recuperacion p { margin: 0; line-height: 1.5; }
|
|
.clave-recuperacion { font: 600 17px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em;
|
|
padding: 12px 14px; border-radius: 8px; background: var(--superficie-2); border: 1px dashed var(--borde);
|
|
user-select: all; overflow-wrap: anywhere; width: 100%; }
|
|
.recuperacion-hecho { display: flex; gap: 8px; align-items: center; }
|
|
.acciones-cifrado { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
|
|
.puerta input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px;
|
|
background: var(--superficie); font: 15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
.aviso-grave { background: var(--negativo-suave); border: 1px solid var(--negativo); }
|
|
.aviso-grave::before { color: var(--negativo); }
|
|
|
|
/* ── Alta de inversión guiada ── */
|
|
.mas-opciones { margin-top: 4px; }
|
|
.mas-opciones > summary { color: var(--acento); cursor: pointer; }
|
|
.mas-opciones > .campos { margin-top: 10px; }
|
|
.buscador + .campos { margin-top: 12px; }
|
|
.que-paso + .buscador { margin-top: 12px; }
|
|
|
|
/* ── Móvil: lo esencial de cada tabla sin tener que desplazarla de lado ── */
|
|
.tarjeta h2 { flex-wrap: wrap; }
|
|
@media (max-width: 640px) {
|
|
.aviso-ejemplo { padding: 8px 12px; }
|
|
.aviso-ejemplo span { min-width: 0; }
|
|
/* Inversiones: nombre, valor y ganancia; el resto está en la ficha al pulsar */
|
|
.tabla-inversiones th:nth-child(2), .tabla-inversiones td:nth-child(2),
|
|
.tabla-inversiones th:nth-child(3), .tabla-inversiones td:nth-child(3),
|
|
.tabla-inversiones th:nth-child(5), .tabla-inversiones td:nth-child(5),
|
|
.tabla-inversiones th:nth-child(n+7), .tabla-inversiones td:nth-child(n+7) { display: none; }
|
|
/* Operaciones (con casilla e inversión): fecha, inversión, qué e importe; cantidad, precio y notas, al editar */
|
|
.tabla-operaciones.con-casilla.con-inversion th:nth-child(5), .tabla-operaciones.con-casilla.con-inversion td:nth-child(5),
|
|
.tabla-operaciones.con-casilla.con-inversion th:nth-child(6), .tabla-operaciones.con-casilla.con-inversion td:nth-child(6) { display: none; }
|
|
.tabla-operaciones:not(.con-casilla):not(.con-inversion) th:nth-child(3), .tabla-operaciones:not(.con-casilla):not(.con-inversion) td:nth-child(3),
|
|
.tabla-operaciones:not(.con-casilla):not(.con-inversion) th:nth-child(4), .tabla-operaciones:not(.con-casilla):not(.con-inversion) td:nth-child(4) { display: none; }
|
|
.tabla-operaciones td, .tabla-operaciones th, .tabla-inversiones td, .tabla-inversiones th { padding-left: 6px; padding-right: 6px; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
/* En el móvil no se marca en bloque: la casilla deja su sitio al importe */
|
|
.tabla-operaciones.con-casilla th:nth-child(1), .tabla-operaciones.con-casilla td:nth-child(1) { display: none; }
|
|
.tabla-operaciones, .tabla-inversiones { font-size: 13.5px; }
|
|
.tabla-operaciones td, .tabla-operaciones th, .tabla-inversiones td, .tabla-inversiones th { padding-left: 4px; padding-right: 4px; }
|
|
.tabla-operaciones .btn-icono { min-width: 30px; min-height: 34px; padding: 2px; }
|
|
.tarjeta { padding: 12px; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.tabla-inversiones td:first-child { max-width: 36vw; overflow-wrap: anywhere; }
|
|
.tabla-operaciones td:nth-child(3) { max-width: 24vw; overflow-wrap: anywhere; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.tabla-inversiones td:first-child, .tabla-inversiones td:first-child * { white-space: normal; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.nombre-activo { min-width: 0; }
|
|
}
|
|
|
|
/* ── Asistente por pasos (conectar bitcoin) ── */
|
|
.pasos-asistente { display: flex; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
|
|
.pasos-asistente li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 20px;
|
|
background: var(--superficie-2); color: var(--texto-3); font-size: 14px; }
|
|
.pasos-asistente li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
|
|
font-size: 13px; background: var(--superficie); }
|
|
.pasos-asistente li.actual { background: var(--acento-suave); color: var(--texto); font-weight: 600; }
|
|
.pasos-asistente li.actual span { background: var(--acento); color: var(--sobre-acento); }
|
|
.pasos-asistente li.hecho span { background: var(--positivo-suave); color: var(--positivo); }
|
|
|
|
/* ── Opciones excluyentes con explicación ── */
|
|
.opcion-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-top: 8px; cursor: pointer;
|
|
border: 1px solid var(--borde); border-radius: var(--radio); }
|
|
.opcion-radio:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
|
|
.opcion-radio input { margin-top: 3px; }
|
|
.opcion-radio span span { display: block; font-size: 13px; line-height: 1.4; }
|
|
.ficha + .kpi-ayuda { margin: 4px 0 14px; }
|
|
|
|
/* ── Acerca de: direcciones para apoyar el proyecto ── */
|
|
.acerca a:not(.btn) { color: var(--acento); }
|
|
.acerca a.btn { text-decoration: none; color: var(--texto); }
|
|
.apoyo { display: grid; gap: 4px; padding: 12px; margin-top: 10px; border: 1px solid var(--borde); border-radius: var(--radio); }
|
|
.apoyo .suave { font-size: 13px; }
|
|
.apoyo code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
|
|
.acerca .redes a { overflow-wrap: anywhere; }
|
|
.acerca .huella { display: block; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
|
|
|
|
/* ── Móvil: las pestañas abajo, al alcance del pulgar, y «Cuéntame» siempre a mano ── */
|
|
.pestana-mas, .boton-cuentame { display: none; }
|
|
.fila-mes { display: none; }
|
|
@media (max-width: 640px) {
|
|
body { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
|
|
.pestanas {
|
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; max-width: none; overflow: visible; gap: 0;
|
|
padding: 0 4px env(safe-area-inset-bottom); background: var(--superficie); border-top: 1px solid var(--borde);
|
|
}
|
|
.pestana, .pestana-mas {
|
|
display: block; flex: 1 1 auto; min-width: 0; position: relative; padding: 13px 2px 12px; font-size: 12.5px;
|
|
border: 0; border-top: 2px solid transparent; background: none; color: var(--texto-2); cursor: pointer;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.pestana[aria-selected="true"], .pestana-mas[aria-selected="true"], .pestana-mas[aria-expanded="true"] {
|
|
color: var(--acento); border-top-color: var(--acento); font-weight: 600;
|
|
}
|
|
/* Cerradas y Automáticas se abren desde «Más», que en el móvil reúne también el menú */
|
|
.pestana[data-vista="cerradas"], .pestana[data-vista="automaticas"] { display: none; }
|
|
.pestana .contador { position: absolute; top: 3px; right: 2px; margin: 0; font-size: 11px; }
|
|
#btn-menu { display: none; }
|
|
.menu { position: static; }
|
|
.menu-lista {
|
|
position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(56px + env(safe-area-inset-bottom));
|
|
max-height: 72vh; overflow-y: auto; z-index: 13; scrollbar-width: thin; scrollbar-color: var(--borde) transparent;
|
|
}
|
|
.menu-lista button { padding: 11px 12px; }
|
|
.boton-cuentame {
|
|
display: grid; place-items: center; position: fixed; right: 14px; bottom: calc(64px + env(safe-area-inset-bottom));
|
|
z-index: 11; width: 54px; height: 54px; border: 0; border-radius: 50%; font-size: 23px; cursor: pointer;
|
|
background: var(--acento); color: var(--sobre-acento); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
|
|
}
|
|
/* Con una ventana abierta, el botón no debe asomar por encima ni por debajo */
|
|
body:has(.velo) .boton-cuentame { display: none; }
|
|
.toasts { bottom: calc(128px + env(safe-area-inset-bottom)); }
|
|
/* Con el menú abajo, la fecha y el estado caben enteros en dos líneas */
|
|
.marca small { white-space: normal; font-size: 11px; line-height: 1.3; }
|
|
|
|
/* Resumen: tres cifras a la vista y el resto tras «Ver más cifras» */
|
|
.cifras:first-child, .no-movil + .cifras { margin-top: 0; }
|
|
.rejilla-kpi:not(.todas) > .kpi-extra { display: none; }
|
|
.rejilla-kpi.todas > .kpi-sola { grid-column: 1 / -1; }
|
|
.ver-cifras { margin-top: 8px; padding: 8px 4px; }
|
|
/* Tablas del resumen: lo esencial; el resto está en la ficha al pulsar */
|
|
.tabla-resumen th:nth-child(n+4), .tabla-resumen td:nth-child(n+4),
|
|
.tabla-cuentas th:nth-child(4), .tabla-cuentas td:nth-child(4),
|
|
.tabla-deudas th:nth-child(n+4), .tabla-deudas td:nth-child(n+4) { display: none; }
|
|
.tabla-resumen, .tabla-cuentas, .tabla-deudas { font-size: 13.5px; }
|
|
.tabla-resumen td, .tabla-resumen th, .tabla-cuentas td, .tabla-cuentas th, .tabla-deudas td, .tabla-deudas th { padding-left: 4px; padding-right: 4px; }
|
|
.tabla-resumen td:first-child { max-width: 40vw; overflow-wrap: anywhere; }
|
|
|
|
/* Operaciones: filtros plegados, un rótulo por mes y el tipo debajo del nombre */
|
|
.filtros-plegados { margin-bottom: 10px; }
|
|
.filtros-plegados > summary { list-style: none; display: inline-flex; margin: 0; }
|
|
.filtros-plegados > summary::-webkit-details-marker { display: none; }
|
|
.filtros-plegados > summary::after { content: "▾"; color: var(--texto-3); }
|
|
.filtros-plegados[open] > summary::after { content: "▴"; }
|
|
.filtros-plegados .filtros { margin: 10px 0 0; }
|
|
.filtros-plegados .filtros select { flex: 1 1 100%; min-width: 0; padding: 9px 8px; }
|
|
.filtros-plegados .filtros label { flex: 1 1 100%; padding: 4px 0; }
|
|
.tabla-operaciones.con-casilla.con-inversion th:nth-child(4), .tabla-operaciones.con-casilla.con-inversion td:nth-child(4) { display: none; }
|
|
.tabla-operaciones td:nth-child(3) { max-width: none; }
|
|
.tabla-operaciones.con-inversion .fila-mes { display: table-row; }
|
|
.tabla-operaciones .fila-mes td {
|
|
display: table-cell !important; padding: 14px 4px 5px; border-bottom: 1px solid var(--borde);
|
|
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-2);
|
|
}
|
|
.tabla-operaciones .etiqueta-tipo .insignia { margin-left: 4px; }
|
|
.ver-mas-movs { display: flex; justify-content: center; width: 100%; margin-top: 12px; padding: 11px; }
|
|
|
|
/* Lo pagado frente al mercado: cada operación, una ficha con sus datos rotulados */
|
|
.marco-primas { max-height: none !important; overflow: visible !important; }
|
|
.tabla-primas, .tabla-primas tbody { display: block; }
|
|
.tabla-primas thead { display: none; }
|
|
.tabla-primas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
|
|
.tabla-primas tr:last-child { border-bottom: 0; }
|
|
.tabla-primas td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
|
|
.tabla-primas td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 12px; font-weight: 400; color: var(--texto-2); }
|
|
.tabla-primas td:nth-child(1) { font-weight: 600; }
|
|
.tabla-primas td:nth-child(2) { text-align: right; }
|
|
.tabla-primas td:nth-child(7), .tabla-primas td[colspan] { grid-column: 1 / -1; }
|
|
.tabla-primas td:nth-child(7), .tabla-primas td:nth-child(7) > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
|
|
.tabla-primas td input[type="text"] { width: 100% !important; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
|
|
|
|
/* Un aviso con desplegable: el texto arriba y los controles debajo, sin salirse */
|
|
.aviso-apilado { flex-wrap: wrap; }
|
|
.aviso-apilado > span { flex: 1 1 calc(100% - 30px); }
|
|
.aviso-apilado > select { flex: 1 1 100%; min-width: 0; max-width: calc(100% - 20px); margin-left: 20px; padding: 8px;
|
|
border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
|
|
.aviso-apilado > .btn-enlace { margin-left: 16px; }
|
|
}
|
|
|
|
/* ── Programa de escritorio: dónde se guardan los datos ── */
|
|
.bienvenida-carpeta { margin-top: 16px; padding: 14px; border-radius: var(--radio); background: var(--superficie-2); }
|
|
.bienvenida-carpeta .opcion-radio { background: var(--superficie); }
|
|
.ruta-datos { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
|
|
|
|
/* ── Primer uso: preguntas, lista de primeros pasos, pantallas vacías y recorrido ── */
|
|
.preguntas-iniciales { display: grid; gap: 18px; margin: 4px 0 8px; }
|
|
.preguntas-iniciales h2 { margin: 0; font-size: 1.1rem; }
|
|
.pregunta { display: grid; gap: 6px; }
|
|
.pregunta select { max-width: 340px; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
|
|
.pregunta select:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
|
|
.chips-casillas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
|
|
.chip-casilla { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--borde);
|
|
border-radius: 999px; cursor: pointer; background: var(--superficie); line-height: 1.2; }
|
|
.chip-casilla:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
|
|
.chip-casilla input { margin: 0; accent-color: var(--acento); }
|
|
.preguntas-botones, .paso-botones, .aviso-ejemplo-botones, .recorrido-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
|
.paso-botones { margin-top: 12px; }
|
|
.paso-cuerpo .paso-botones .btn { margin-top: 0; }
|
|
.progreso { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin: -4px 0 14px; }
|
|
.progreso > div { height: 100%; background: var(--positivo); border-radius: inherit; transition: width .3s; }
|
|
.pantalla-vacia { max-width: 640px; margin: 24px auto; text-align: left; }
|
|
.pantalla-vacia p { color: var(--texto-2); line-height: 1.5; margin: 0 0 16px; }
|
|
.resaltado { outline: 3px solid var(--acento) !important; outline-offset: 3px; border-radius: var(--radio); }
|
|
.recorrido { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
|
|
width: min(440px, calc(100% - 32px)); z-index: 25; background: var(--superficie); color: var(--texto);
|
|
border: 1px solid var(--acento); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(10, 14, 20, .25);
|
|
padding: 14px 16px; display: grid; gap: 6px; }
|
|
.recorrido p { margin: 0 0 6px; line-height: 1.45; color: var(--texto-2); }
|
|
.recorrido-cabeza { display: flex; justify-content: space-between; align-items: center; }
|
|
.recorrido-botones { justify-content: flex-end; }
|
|
@media (max-width: 640px) {
|
|
/* abajo están las pestañas y el botón de Cuéntame, que el recorrido señala: la nota va arriba */
|
|
.recorrido { bottom: auto; top: calc(8px + env(safe-area-inset-top, 0px)); }
|
|
}
|
|
|
|
/* ── Inversiones en el móvil: tarjetas en vez de tabla ── */
|
|
.lista-movil { display: grid; }
|
|
.fila-movil { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 2px;
|
|
border: 0; border-bottom: 1px solid var(--borde); background: none; text-align: left; cursor: pointer; }
|
|
.fila-movil:last-child { border-bottom: 0; }
|
|
.fila-movil .nombre-activo { min-width: 0; flex: 1; overflow-wrap: break-word; }
|
|
.fila-movil-cifras { display: grid; justify-items: end; gap: 2px; flex: none; font-size: 13.5px; }
|
|
.fila-movil-cifras b { font-size: 15px; font-weight: 600; }
|
|
|
|
/* ── La ficha de una inversión ── */
|
|
.ficha-grande .ficha { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin-bottom: 4px; }
|
|
.ficha-grande .ficha div b { font-size: 26px; font-weight: 650; letter-spacing: -.01em; }
|
|
.ficha-grande .ficha div b small { font-size: 14px; font-weight: 500; }
|
|
.ficha-origen { margin: 0 0 14px; }
|
|
.ficha-grafica:not(:empty) { margin: 4px 0 16px; }
|
|
.si-vendo { padding: 12px 14px; margin: 0 0 16px; border-radius: var(--radio); background: var(--superficie-2); border-left: 3px solid var(--acento); }
|
|
.si-vendo p { margin: 0; line-height: 1.5; }
|
|
.si-vendo p + p { margin-top: 4px; font-size: 13px; }
|
|
.datos-ficha { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
|
|
.datos-ficha dt { color: var(--texto-2); }
|
|
.datos-ficha dd { margin: 0; overflow-wrap: break-word; }
|
|
@media (max-width: 520px) { .datos-ficha { grid-template-columns: 1fr; gap: 2px; } .datos-ficha dd { margin-bottom: 8px; } }
|
|
@media (max-width: 520px) {
|
|
/* en el móvil, el valor a lo ancho y la ganancia y la rentabilidad debajo, en dos columnas */
|
|
.ficha-grande .ficha { grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.ficha-grande .ficha > div:first-child { grid-column: 1 / -1; }
|
|
.ficha-grande .ficha div b { font-size: 21px; }
|
|
.ficha-grande .ficha > div:first-child b { font-size: 28px; }
|
|
}
|
|
|
|
/* ── Resumen: patrimonio neto, periodos y lo que viene ── */
|
|
.patrimonio { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
|
|
.patrimonio .etiqueta { color: var(--texto-2); font-size: 14px; display: flex; align-items: center; gap: 6px; }
|
|
.patrimonio-valor { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 4px; }
|
|
.patrimonio-cambio { display: grid; justify-items: end; gap: 2px; }
|
|
.patrimonio-cambio b { font-size: 20px; }
|
|
.patrimonio .kpi-ayuda { flex-basis: 100%; }
|
|
.periodos { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border: 1px solid var(--borde); border-radius: 8px; }
|
|
.periodo { border: 0; background: none; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; color: var(--texto-2); cursor: pointer; }
|
|
.periodo[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
|
|
.lista-viene { display: grid; }
|
|
.fila-viene { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 2px; border: 0;
|
|
border-bottom: 1px solid var(--borde); background: none; text-align: left; cursor: pointer; color: var(--texto); }
|
|
.fila-viene:last-child { border-bottom: 0; }
|
|
.fecha-viene { color: var(--texto-2); font-size: 13px; }
|
|
.texto-viene { min-width: 0; overflow-wrap: break-word; }
|
|
@media (max-width: 640px) {
|
|
.patrimonio { align-items: flex-start; }
|
|
.patrimonio-valor { font-size: 34px; }
|
|
.patrimonio-cambio { justify-items: start; }
|
|
}
|
|
/* Tres cifras a la vista y el resto tras «Ver más cifras», también en pantalla grande */
|
|
.rejilla-kpi:not(.todas) > .kpi-extra { display: none; }
|
|
.ver-cifras { margin-top: 8px; padding: 6px 2px; }
|
|
.toast { display: flex; align-items: center; gap: 14px; }
|
|
.toast-accion { pointer-events: auto; border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline;
|
|
text-underline-offset: 3px; cursor: pointer; padding: 2px 0; white-space: nowrap; }
|
|
|
|
/* ── Operaciones: meses también en pantalla grande, notas bajo el tipo, filas más juntas ── */
|
|
.tabla-operaciones.con-inversion .fila-mes { display: table-row; }
|
|
.tabla-operaciones .fila-mes td { padding: 16px 8px 6px; border-bottom: 1px solid var(--borde); font-size: 12px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: .03em; color: var(--texto-2); }
|
|
.tabla-operaciones td { padding-top: 8px; padding-bottom: 8px; }
|
|
.nota-mov { color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }
|
|
.buscar-movs { padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); min-width: 180px; }
|
|
@media (max-width: 640px) { .buscar-movs { min-width: 0; width: 100%; } }
|
|
/* ── Enlazar con un código: el QR y los datos para teclear ── */
|
|
.codigo-enlace { margin: 12px 0 16px; }
|
|
.codigo-enlace:has(.qr) { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
|
|
.codigo-enlace-qr { flex: none; width: min(100%, 220px); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
|
|
.qr { display: block; width: 100%; height: auto; }
|
|
.codigo-enlace-datos { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
|
|
.codigo-enlace-datos code { font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
|
|
.codigo-enlace-datos .codigo-grande { font-size: 22px; font-weight: 600; letter-spacing: .06em; }
|
|
.codigo-enlace-datos p { margin: 0; }
|
|
|
|
/* ── Vivienda protegida: las piezas con sus metros ── */
|
|
.piezas-vpo { display: flex; flex-direction: column; gap: 6px; }
|
|
.fila-pieza { display: grid; grid-template-columns: 2fr 1fr 2fr 80px auto; gap: 6px; align-items: center; }
|
|
.fila-pieza.cabecera { font-size: 12px; color: var(--texto-2); }
|
|
.fila-pieza input, .fila-pieza select { width: 100%; min-width: 0; }
|
|
.pieza-pct { display: flex; align-items: center; gap: 4px; }
|
|
@media (max-width: 640px) {
|
|
.fila-pieza { grid-template-columns: 1fr 1fr; }
|
|
.fila-pieza.cabecera { display: none; }
|
|
.fila-pieza { padding-bottom: 6px; border-bottom: 1px solid var(--borde); }
|
|
}
|
|
|
|
/* ── Dentro de la aplicación de Android ── */
|
|
.en-android [data-accion="salir"], .en-android [data-accion="sincronizar"] { display: none !important; }
|