: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; }