/* DEV-1137 — Estilos del Dashboard V1.
   Sin CDN, sin fuentes remotas y sin JavaScript: el panel es interno y debe cargar entero desde el
   propio servicio. Claro y oscuro según la preferencia del sistema.

   DEV-1209 — identidad Nexus. El azul turquesa de la marca entra como color de acción y de estado
   activo, sobre fondo blanco y con espaciado más generoso. Dos matices, y la diferencia importa:

     --acento           turquesa OSCURO. Es el que lleva TEXTO encima o va sobre blanco: pasa AA
                        (5,9:1 sobre blanco), así que sirve para enlaces y para botones con texto
                        claro. El turquesa brillante de la web pública no llega a ese contraste y
                        usarlo para texto habría sido bonito y poco legible.
     --acento-brillante turquesa de MARCA, sin texto encima: rellenos de barra, series del gráfico,
                        detalles. Ahí el contraste que importa es contra el fondo, no de lectura.

   El azul NUNCA comunica riesgo: para eso están el ámbar (atención) y el gris (sin dato). El verde
   se reserva a lo confirmado. */

:root {
  --fondo: #f7f9fa;
  --superficie: #ffffff;
  --borde: #e3e8ec;
  --borde-fuerte: #cfd8de;
  --texto: #12181d;
  --texto-suave: #58656f;
  --acento: #0b6e78;
  --acento-brillante: #0e9aa7;
  --acento-suave: #e8f6f8;
  --ok: #1b7f4d;
  --ok-suave: #e9f6ef;
  --aviso-fondo: #fdf7e6;
  --aviso-borde: #e6d3a3;
  --aviso-texto: #6b5314;
  --radio: 10px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(18, 24, 29, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12161a;
    --superficie: #1a1f25;
    --borde: #2b323a;
    --borde-fuerte: #3a434d;
    --texto: #e8ecef;
    --texto-suave: #9aa6b1;
    --acento: #5bc8d4;
    --acento-brillante: #3fb6c4;
    --acento-suave: #14313a;
    --ok: #5ac48c;
    --ok-suave: #14261d;
    --aviso-fondo: #2a2415;
    --aviso-borde: #4d4227;
    --aviso-texto: #e0cd96;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── cabecera ─────────────────────────────────────────────────────────────── */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.5rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.marca { font-size: 1.05rem; }
.marca-nombre { font-weight: 650; letter-spacing: .01em; }
.marca-sep { color: var(--texto-suave); margin: 0 .35rem; }
.marca-seccion { color: var(--texto-suave); }

.estado-version {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--aviso-texto);
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: 999px;
  padding: .2rem .7rem;
}

/* ── navegación ───────────────────────────────────────────────────────────── */
.navegacion {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: 0 1.5rem;
}

.navegacion ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .8rem 0;
  border-bottom: 2px solid transparent;
}

.nav-item--pendiente { color: var(--texto-suave); cursor: default; }
.nav-item-nombre { font-weight: 550; }
.nav-item-fase {
  font-size: .72rem;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 0 .3rem;
}

/* ── contenido ────────────────────────────────────────────────────────────── */
.contenido { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.bloque { margin-bottom: 2rem; }
.bloque h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.bloque h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.entradilla { color: var(--texto-suave); margin: 0; max-width: 46rem; }

.aviso {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
}
.aviso h2 { font-size: .95rem; margin: 0 0 .4rem; color: var(--aviso-texto); }
.aviso p { margin: 0; color: var(--texto); }

.lista-secciones { list-style: none; margin: 0; padding: 0; }
.lista-secciones li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .9rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: .5rem;
}
.seccion-nombre { font-weight: 550; }
.seccion-estado { font-size: .8rem; color: var(--texto-suave); }

/* ── pie ──────────────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--borde);
  padding: 1rem 1.5rem;
  font-size: .82rem;
  color: var(--texto-suave);
}

/* ── página de acceso ─────────────────────────────────────────────────────── */
.pagina-acceso { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1.5rem; }
.tarjeta-acceso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 2rem;
  max-width: 30rem;
  text-align: center;
}
.tarjeta-acceso h1 { font-size: 1.15rem; margin: .6rem 0 .5rem; }
.tarjeta-acceso p { margin: 0; color: var(--texto-suave); }

/* ── formulario de acceso (DEV-1139) ──────────────────────────────────────── */
.formulario-acceso { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0 .8rem; text-align: left; }
.formulario-acceso label { font-size: .82rem; color: var(--texto-suave); }
.formulario-acceso input {
  font: inherit;
  padding: .6rem .7rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
}
.formulario-acceso input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.formulario-acceso button {
  font: inherit;
  font-weight: 600;
  padding: .6rem .9rem;
  color: #fff;
  background: var(--acento);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.error-acceso {
  color: var(--aviso-texto);
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: 6px;
  padding: .55rem .7rem;
  margin: 0;
  font-size: .88rem;
}
.nota-acceso { font-size: .8rem; }

/* botón de cierre de sesión en la cabecera */
.formulario-salir { margin: 0; }
.formulario-salir button {
  font: inherit;
  font-size: .8rem;
  color: var(--texto-suave);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: .25rem .7rem;
  cursor: pointer;
}
.formulario-salir button:hover { color: var(--texto); }
.acciones-cabecera { display: flex; align-items: center; gap: .75rem; }

/* ── vista de gastos (DEV-1141) ───────────────────────────────────────────── */
a.nav-item { color: var(--acento); text-decoration: none; }
a.nav-item:hover { text-decoration: underline; }
.nav-item--activa { border-bottom-color: var(--acento); font-weight: 650; }

.selector-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.selector-periodo label { font-size: .85rem; color: var(--texto-suave); }
.selector-periodo select, .selector-periodo button {
  font: inherit; font-size: .9rem; padding: .35rem .6rem;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 6px;
}
.selector-periodo button { cursor: pointer; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 8px; padding: 1rem 1.1rem;
}
.tarjeta--total { border-left: 4px solid var(--acento); }
.tarjeta-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); margin: 0 0 .35rem; }
.tarjeta-cifra { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.tarjeta-cifra .moneda { font-size: .95rem; font-weight: 500; color: var(--texto-suave); margin-left: .15rem; }
.tarjeta-detalle { font-size: .82rem; color: var(--texto-suave); margin: .3rem 0 0; }

.tabla-envoltorio { overflow-x: auto; }
table.desglose { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.desglose th, table.desglose td { padding: .5rem .7rem; border-bottom: 1px solid var(--borde); text-align: left; }
table.desglose th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
table.desglose td.num, table.desglose th.num { text-align: right; font-variant-numeric: tabular-nums; }

.lista-calidad { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .88rem; }
.lista-calidad li { padding: .2rem 0; }
.estado-vacio { color: var(--texto-suave); }

/* ── datos con calidad y gráficos (DEV-1142) ──────────────────────────────── */
.cifra-valor { font-variant-numeric: tabular-nums; }
.cifra-ausente {
  font-size: .82rem; font-weight: 500; color: var(--aviso-texto);
  background: var(--aviso-fondo); border: 1px solid var(--aviso-borde);
  border-radius: 999px; padding: .1rem .55rem; display: inline-block; line-height: 1.5;
}
.tarjeta--ausente { border-style: dashed; }
.tarjeta-motivo { font-size: .78rem; color: var(--texto-suave); margin: .45rem 0 0; }

.grafico { list-style: none; margin: .6rem 0 0; padding: 0; }
.grafico-fila { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto; gap: .6rem; align-items: center; padding: .22rem 0; }
.grafico-etiqueta { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-barra { display: block; height: .7rem; background: var(--borde); border-radius: 999px; overflow: hidden; }
.grafico-relleno { display: block; height: 100%; background: var(--acento-brillante); border-radius: 999px; }
.grafico-valor { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--texto-suave); }

.tabla-envoltorio table.desglose td a { color: var(--acento); }

/* ── DEV-1202 · primera columna fija en el cruce Propiedad × categoría ─────────
   En un móvil, la tabla se desplaza a la derecha y la propiedad se iba con ella: quien miraba una
   cifra ya no sabía de qué piso era. La columna se queda quieta y lleva FONDO OPACO propio — sin él
   las cifras se leerían por debajo al pasar. El envoltorio ya tenía scroll horizontal; aquí sólo se
   ancla la primera celda de cada fila y su cabecera. */
.tabla-envoltorio--fija { overflow-x: auto; }
.tabla-envoltorio--fija table.desglose { min-width: max-content; }
.tabla-envoltorio--fija th.col-fija {
  position: sticky; left: 0; z-index: 2;
  background: var(--superficie);
  box-shadow: 1px 0 0 var(--borde);
  text-align: left; white-space: nowrap;
}
/* la cabecera de esa columna se cruza con la fila de cabeceras: tiene que ir por encima de ambas */
.tabla-envoltorio--fija thead th.col-fija { z-index: 3; }
.tabla-envoltorio--fija tbody th.col-fija {
  font-size: .92rem; text-transform: none; letter-spacing: 0; color: var(--texto);
  font-weight: 550;
}
.fila-calidad { font-size: .8rem; color: var(--texto-suave); }
.enlaces-seccion { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.enlaces-seccion a { color: var(--acento); }

/* ── rango de fechas y tablas anchas (DEV-1154) ───────────────────────────── */
.selector-periodo input[type="date"] {
  font: inherit; font-size: .9rem; padding: .3rem .5rem;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 6px;
}
.atajo-mes { font-size: .85rem; color: var(--acento); text-decoration: none; margin-left: .3rem; }
.atajo-mes:hover { text-decoration: underline; }
table.desglose tfoot td { font-weight: 650; border-top: 2px solid var(--borde); border-bottom: 0; }
table.desglose tbody tr:hover { background: var(--fondo); }
.bloque-aparte { border-left: 3px solid var(--aviso-borde); padding-left: .9rem; }
.cruce td.num.cero { color: var(--texto-suave); }

/* ── DEV-1155 · series temporales ──────────────────────────────────────────────────────────────── */
.serie { margin: 0 0 1rem; }
.serie-svg { width: 100%; height: 220px; display: block; background: var(--superficie);
             border: 1px solid var(--borde, #e2e8f0); border-radius: 8px; }
.serie-pie { font-size: .85rem; color: var(--texto-suave, #475569); margin-top: .4rem; }
.tabla--serie { font-size: .9rem; }
.tabla--serie td, .tabla--serie th { text-align: right; }
.tabla--serie th[scope="row"] { text-align: left; white-space: nowrap; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: .4rem 0 1rem;
           font-size: .85rem; }
.leyenda li { display: flex; align-items: center; gap: .35rem; }
.leyenda-color { width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip: rect(0 0 0 0); white-space: nowrap; }

/* ── DEV-1156 · filtros, ruido y ejes ──────────────────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: .5rem; }
.filtro { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.filtro--mes { padding-right: 1rem; border-right: 1px solid var(--borde, #e2e8f0); }
.filtro-activo { margin: .2rem 0 .6rem; font-size: .95rem; }
.filtro-dias { color: var(--texto-suave, #64748b); font-size: .85rem; }
.procedencia { margin: 0 0 1rem; font-size: .9rem; color: var(--texto-suave, #475569);
               background: var(--fondo-suave, #f8fafc); border-left: 3px solid var(--borde, #cbd5e1);
               padding: .5rem .75rem; border-radius: 0 4px 4px 0; }
.cifra-ausente { color: var(--texto-suave, #94a3b8); cursor: help; }
td .cifra-ausente, th .cifra-ausente { font-weight: 400; }
.plegable { margin: .75rem 0; font-size: .9rem; }
.plegable > summary { cursor: pointer; color: var(--acento, #1f4e79); font-weight: 600; }
.plegable > p { margin: .5rem 0; color: var(--texto-suave, #475569); }
.resumen-beneficio { margin: .5rem 0; font-size: .95rem; }
.serie-titulo { font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
.serie-svg { height: auto; }
.leyenda-hueco { color: var(--texto-suave, #94a3b8); font-size: .8rem; }

/* ══ DEV-1209 · identidad Nexus ═══════════════════════════════════════════════════════════════════
   Lo que faltaba no era decoración: los filtros que DEV-1202 introdujo (`.filtro select`,
   `.filtro button`) nunca recibieron estilo, así que eran controles nativos sin altura táctil ni
   foco visible. Aquí se les da forma y, de paso, se unifica todo lo que se pulsa. */

/* Foco visible en TODO lo interactivo. Antes sólo lo tenía el campo del login, y quien navega con
   teclado se quedaba sin saber dónde está. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── filtros de periodo ──────────────────────────────────────────────────── */
.filtros { gap: .9rem 1.25rem; align-items: center; }
.filtro {
  gap: .5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .5rem .75rem;
}
/* el separador vertical sobraba: cada filtro ya es una caja distinta */
.filtro--mes { padding-right: .75rem; border-right: 1px solid var(--borde); }
.filtro label { font-size: .85rem; color: var(--texto-suave); white-space: nowrap; }

.filtro select,
.selector-periodo select {
  font: inherit;
  font-size: .9rem;
  min-height: 2.25rem;                 /* altura táctil suficiente en móvil */
  padding: .35rem .6rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
}

/* acción PRIMARIA: la que aplica el filtro */
.filtro button,
.selector-periodo button,
.formulario-acceso button {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  min-height: 2.25rem;
  padding: .35rem .9rem;
  color: #fff;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
.filtro button:hover,
.selector-periodo button:hover,
.formulario-acceso button:hover { background: var(--texto); border-color: var(--texto); }

/* enlaces SECUNDARIOS: no compiten con la acción principal */
.atajo-mes,
.volver a,
.enlaces-seccion a {
  font-size: .88rem;
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.atajo-mes:hover,
.volver a:hover,
.enlaces-seccion a:hover { border-bottom-color: currentColor; }
.volver { margin: 0 0 .75rem; }

.filtro-activo {
  background: var(--acento-suave);
  border-radius: var(--radio-chico);
  padding: .5rem .75rem;
  margin: .6rem 0 1rem;
}

/* ── cabecera y navegación ───────────────────────────────────────────────── */
.cabecera { padding: 1.1rem 1.75rem; }
.marca { font-size: 1.1rem; }
.marca-nombre { font-weight: 700; letter-spacing: -.01em; }
.marca-seccion { font-weight: 500; }

.navegacion { padding: 0 1.75rem; }
.navegacion ul { gap: 1.5rem; }
.nav-item { padding: .85rem 0; border-bottom-width: 3px; }
a.nav-item:hover { text-decoration: none; border-bottom-color: var(--borde-fuerte); }
.nav-item--activa { border-bottom-color: var(--acento-brillante); color: var(--acento); }

/* En móvil la navegación se desplaza en horizontal en vez de romperse en varias líneas
   desordenadas o quedar fuera de alcance. */
@media (max-width: 40rem) {
  .cabecera, .navegacion { padding-left: 1rem; padding-right: 1rem; }
  .navegacion ul { flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; }
  .nav-item { white-space: nowrap; }
  .contenido { padding: 1.5rem 1rem 2.5rem; }
  .filtros { gap: .6rem; }
  .filtro { width: 100%; justify-content: space-between; }
  .filtro--mes { border-right: 0; padding-right: .75rem; }
}

.formulario-salir button {
  min-height: 2rem;
  border-radius: 999px;
  border-color: var(--borde-fuerte);
}
.formulario-salir button:hover { color: var(--acento); border-color: var(--acento); }

/* ── contenido, tarjetas y avisos ────────────────────────────────────────── */
.contenido { max-width: 68rem; padding: 2.25rem 1.75rem 3.5rem; }
.bloque h1 { font-size: 1.75rem; letter-spacing: -.015em; }
.bloque h2 { font-size: 1.1rem; letter-spacing: -.005em; }

.tarjeta {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.2rem;
}
.tarjeta--total { border-left: 4px solid var(--acento-brillante); }
.tarjeta-cifra { letter-spacing: -.02em; }

.aviso { border-radius: var(--radio); }
.procedencia {
  background: var(--acento-suave);
  border-left-color: var(--acento-brillante);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  padding: .65rem .9rem;
}

/* ── tablas ──────────────────────────────────────────────────────────────── */
.tabla-envoltorio { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden auto; }
.tabla-envoltorio, .tabla-envoltorio--fija { overflow-x: auto; }
table.desglose th {
  background: var(--fondo);
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde-fuerte);
  white-space: nowrap;
}
table.desglose tbody td, table.desglose tbody th { border-bottom: 1px solid var(--borde); }
table.desglose tbody tr:last-child td, table.desglose tbody tr:last-child th { border-bottom: 0; }
table.desglose tbody tr:hover { background: var(--acento-suave); }
table.desglose td a, table.desglose th a { color: var(--acento); }

/* La columna fija necesita fondo OPACO propio, y el suyo cambia al pasar el ratón igual que la fila:
   si no, la celda fija se quedaría con el fondo antiguo y parecería de otra tabla. */
.tabla-envoltorio--fija tbody tr:hover th.col-fija { background: var(--acento-suave); }
.tabla-envoltorio--fija thead th.col-fija { background: var(--fondo); }

/* ── gráficos ────────────────────────────────────────────────────────────── */
.serie-svg { border-radius: var(--radio); }
.serie-titulo { color: var(--texto); }
.plegable > summary { color: var(--acento); }

/* ══ DEV-1210 · gráficas ejecutivas ═══════════════════════════════════════════════════════════════ */
/* La pista representa la CAPACIDAD de la propiedad; el relleno, lo ocupado. */
.grafico-barra--pista { background: var(--borde); border: 1px solid var(--borde-fuerte); height: .85rem; }
.grafico-fila { grid-template-columns: minmax(6rem, 11rem) 1fr minmax(9rem, auto); }

/* ── anillo de composición ──────────────────────────────────────────────── */
.anillo { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin: .5rem 0 1rem; }
.anillo-svg { width: 200px; height: 200px; flex: 0 0 auto; }
.anillo-centro { font: 600 .95rem/1.3 inherit; fill: var(--texto); }
.anillo-centro-nota { font: 400 .72rem/1.3 inherit; fill: var(--texto-suave); }
.anillo-leyenda { list-style: none; margin: 0; padding: 0; font-size: .9rem; min-width: 14rem; }
.anillo-leyenda li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.anillo-color { width: .85rem; height: .85rem; border-radius: 3px; flex: 0 0 auto; }
.anillo-etiqueta { flex: 1 1 auto; }
.anillo-cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.anillo-pct { color: var(--texto-suave); font-size: .85rem; white-space: nowrap; }

/* ── barras con signo (beneficio) ───────────────────────────────────────── */
.barras-signo { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.barras-signo li { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr minmax(8rem, auto);
                   gap: .6rem; align-items: center; padding: .3rem 0; }
.signo-carril { display: grid; grid-template-columns: 1fr 1fr; height: .85rem;
                background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px;
                overflow: hidden; }
.signo-izq, .signo-der { display: block; height: 100%; }
.signo-izq { justify-self: end; background: var(--aviso-texto); border-radius: 999px 0 0 999px; }
.signo-der { justify-self: start; background: var(--acento-brillante); border-radius: 0 999px 999px 0; }
.signo-valor { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.signo-valor--negativo { color: var(--aviso-texto); font-weight: 600; }
.signo-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 40rem) {
  .anillo { gap: 1rem; }
  .anillo-svg { width: 160px; height: 160px; }
  .grafico-fila, .barras-signo li { grid-template-columns: 1fr; gap: .2rem; }
  .signo-valor { text-align: left; }
}

/* ── Cobros (DEV-1218) ──────────────────────────────────────────────────────
   Sin JavaScript: el «modal» es un <details>. Se le da peso visual con sombra y
   fondo propio para que se lea como una capa aparte, no como más texto de la fila. */

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.filtro {
  padding: .35rem .8rem; border-radius: var(--radio); text-decoration: none;
  border: 1px solid var(--borde); color: var(--texto); background: var(--fondo-tarjeta);
}
.filtro:hover { border-color: var(--acento); }
.filtro--activo { background: var(--acento); color: #fff; border-color: var(--acento); }
.filtro:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: 2px; }

.plegable--propiedad > summary { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.propiedad-nombre { font-weight: 600; }
.propiedad-resumen { color: var(--texto-suave); font-size: .9rem; }

.tabla--cobros { width: 100%; }
.tabla--cobros .num { text-align: right; font-variant-numeric: tabular-nums; }

.estado { padding: .15rem .55rem; border-radius: 999px; font-size: .85rem; white-space: nowrap; }
.estado--pagada   { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.estado--pendiente{ background: color-mix(in srgb, var(--acento) 15%, transparent); color: var(--acento); }
.estado--vacia    { background: color-mix(in srgb, var(--texto-suave) 15%, transparent); color: var(--texto-suave); }

.sin-accion { color: var(--texto-suave); font-size: .85rem; }

.boton {
  display: inline-block; padding: .4rem .9rem; border-radius: var(--radio); cursor: pointer;
  border: 1px solid var(--acento); background: var(--acento); color: #fff; font: inherit;
  text-decoration: none;
}
.boton:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: 2px; }
.boton--secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton--registrar { list-style: none; }
.boton--registrar::-webkit-details-marker { display: none; }
.boton--confirmar { background: var(--ok); border-color: var(--ok); font-weight: 600; }

.modal > summary { display: inline-block; }
.modal-cuerpo {
  margin-top: .5rem; padding: .85rem; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--fondo-tarjeta); box-shadow: var(--sombra);
  max-width: 22rem;
}
.modal-identidad { font-weight: 600; margin: 0 0 .25rem; }
.modal-esperado { margin: 0 0 .6rem; color: var(--texto-suave); }

.formulario-cobro { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.formulario-cobro label { flex: 1 0 100%; font-size: .9rem; }
.formulario-cobro input[type="text"] {
  flex: 1 1 8rem; padding: .4rem .6rem; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--fondo); color: var(--texto); font: inherit;
}
.formulario-cobro input:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: 1px; }

.bloque--revision { border: 2px solid var(--ok); border-radius: var(--radio); padding: 1rem; }
.revision { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.revision dt { color: var(--texto-suave); }
.revision dd { margin: 0; }

.aviso {
  padding: .6rem .85rem; border-radius: var(--radio); background: var(--fondo-tarjeta);
  border-left: 4px solid var(--acento); margin: .75rem 0;
}
.aviso--malo { border-left-color: var(--be, #be123c); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Vista móvil de Cobros (DEV-1220) ───────────────────────────────────────
   Sólo presentación. Ni una regla de negocio vive aquí.
   Mobile-first: las tarjetas son de una columna y no hay scroll horizontal en
   ningún ancho. Probado a 320, 390 y 430 px. */

.solo-movil { display: none; }
@media (max-width: 640px) { .solo-movil { display: block; } }

.cambio-vista {
  display: inline-block; padding: .3rem .7rem; font-size: .85rem;
  border: 1px dashed var(--borde); border-radius: var(--radio);
  color: var(--texto-suave); text-decoration: none;
}
.cambio-vista:hover, .cambio-vista:focus-visible { color: var(--acento); border-color: var(--acento); }
.cambio-vista:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: 2px; }

.movil { display: block; }
.movil-cabecera { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
                  justify-content: space-between; }
.movil-cabecera h1 { margin: 0; }
.movil-resumen { color: var(--texto-suave); margin: .5rem 0 .75rem; }

/* DEV-1222 — los filtros YA NO SE QUEDAN A LA VISTA al bajar.
   DEV-1220 los fijó con `position: sticky` pensando que volver arriba para cambiar de filtro era
   el problema. En un teléfono real el problema es el contrario: el bloque de Mes / Desde mes /
   Hasta mes con sus botones es ALTO, y fijo se come una parte permanente de una pantalla que ya es
   pequeña. La decisión de producto fue explícita: no encoger el bloque para poder fijarlo, sino
   quitarle lo fijo.
   Se conserva la separación visual —un borde y su espacio— porque sigue delimitando los filtros del
   contenido; lo que desaparece es el anclaje. Sin `sticky` no hace falta ni `z-index` ni fondo
   opaco: nada pasa ya por debajo. */
.filtros--movil {
  padding: .6rem 0; margin: 0 0 .25rem;
  border-bottom: 1px solid var(--borde);
}
.filtro--tactil { flex: 1 1 0; text-align: center; min-height: 44px; line-height: 2.1; }

.tarjeta-prop {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--fondo-tarjeta); margin-bottom: .6rem; overflow: hidden;
}
/* El área de apertura ocupa toda la tarjeta: en un teléfono, acertar en un triángulo
   de 10 px es pedir demasiado. */
.tarjeta-prop-cab {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem;
  padding: .85rem; cursor: pointer; min-height: 44px; list-style: none;
}
.tarjeta-prop-cab::-webkit-details-marker { display: none; }
.tarjeta-prop-cab:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: -2px; }
.tarjeta-prop-nombre { font-weight: 600; }
.tarjeta-prop-resumen { color: var(--texto-suave); font-size: .9rem; text-align: right; }

.progreso {
  grid-column: 1 / -1; height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--texto-suave) 20%, transparent); margin-top: .35rem;
}
.progreso-relleno { display: block; height: 100%; background: var(--ok); }

.lista-hab { list-style: none; margin: 0; padding: 0 .85rem .85rem; }
.hab { border-top: 1px solid var(--borde); padding: .7rem 0; }
.hab-fila { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.hab-codigo { font-weight: 600; }
.hab-cifras { margin-top: .2rem; font-size: .92rem; }
.hab-etiqueta { color: var(--texto-suave); }
/* Los números no deben "bailar" al cambiar de fila ni al actualizarse. */
.hab .num, .tabla--cobros .num { font-variant-numeric: tabular-nums; min-width: 6.5ch; text-align: right; }
.hab .estado { min-width: 5.5em; text-align: center; }

.boton--ancho { display: block; width: 100%; text-align: center; min-height: 44px; line-height: 2.2; }
/* Separación entre acciones: pulsar «Registrar» queriendo «Cancelar» no puede pasar. */
.hoja-acciones .boton + .boton, .hab .boton + .boton { margin-top: .5rem; }
.hab .hoja-abrir { margin-top: .6rem; }

.hoja {
  border: 1px solid var(--borde); border-left: 4px solid var(--ok);
  border-radius: var(--radio); background: var(--fondo-tarjeta);
  padding: .9rem; margin: .6rem 0; box-shadow: var(--sombra);
}
.hoja--enlinea { margin-top: .5rem; box-shadow: none; }
.hoja h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.hoja-identidad { font-weight: 600; margin: 0 0 .2rem; }
.hoja-esperado { margin: 0 0 .6rem; color: var(--texto-suave); }
.hoja-cifras { margin: 0 0 .8rem; }
.hoja-cifras > div { display: flex; justify-content: space-between; padding: .2rem 0; }
.hoja-cifras dt { color: var(--texto-suave); margin: 0; }
.hoja-cifras dd { margin: 0; font-variant-numeric: tabular-nums; }
.hoja-total { border-top: 1px solid var(--borde); margin-top: .3rem; padding-top: .45rem; font-weight: 600; }
.hoja-acciones { display: block; }
.hoja-acciones label { display: block; margin: .4rem 0 .25rem; font-size: .9rem; }
.hoja-acciones input[type="text"] {
  display: block; width: 100%; padding: .6rem; font-size: 1.05rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--fondo); color: var(--texto); margin-bottom: .55rem;
}
.hoja-acciones input:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: 1px; }

/* Objetivos táctiles medidos en Chrome a 320/390/430 px. La primera medición los pilló
   cortos —«Cerrar sesión» 32 px, el enlace de vista 33, el campo de importe 41— y en un teléfono
   esa diferencia es fallar la pulsación. Se corrigen SOLO en pantalla estrecha y SOLO en la vista
   móvil: la clásica debe conservarse tal cual, también en el teléfono. */
@media (max-width: 640px) {
  .cambio-vista { min-height: 44px; line-height: 2.4; }
  .hoja-acciones input[type="text"] { min-height: 44px; }
  .vista-movil .formulario-salir button, .vista-movil .navegacion a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

@media (max-width: 380px) {
  .tarjeta-prop-resumen { text-align: left; }
  .tarjeta-prop-cab { grid-template-columns: 1fr; }
}

/* ── Vistas móviles del panel (DEV-1221) ───────────────────────────────────
   Extiende a todo el Dashboard el lenguaje que DEV-1220 validó en Cobros.
   Sólo presentación: ni una regla de negocio vive aquí.

   LO QUE SE CORRIGE, medido en Chrome a 320 px: las vistas clásicas no se salen
   de la pantalla, pero meten los datos en carriles que hay que arrastrar de lado
   —129 elementos en Propiedades, 46 en el detalle de propiedad—. Aquí no hay un
   solo carril horizontal: todo baja en una columna. */

.movil { display: block; }
.movil h1 { margin: 0 0 .6rem; font-size: 1.45rem; }
.movil h2 { font-size: 1.05rem; margin: 0 0 .5rem; }

.m-bloque { margin: 0 0 1.25rem; }

/* Una cifra por línea: rótulo a la izquierda, valor a la derecha. Es el sustituto
   de la celda de tabla, y lo que permite leer once columnas sin arrastrar. */
.m-linea {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; padding: .42rem 0; border-bottom: 1px solid var(--borde);
}
.m-linea:last-child { border-bottom: 0; }
.m-linea-et { color: var(--texto-suave); }
/* Los números no deben "bailar" al cambiar de fila. Pero `nowrap` NO vale aquí: medido a 320 px,
   «2 de 4 habitaciones ocupadas» son 218 px y se salía de la pantalla — la ocupación se dice en
   claro a propósito, y eso es una frase, no una cifra. Se deja envolver y se le permite encoger. */
.m-linea-val {
  font-variant-numeric: tabular-nums; text-align: right;
  min-width: 0; overflow-wrap: break-word;
}
.m-linea-det { margin: 0 0 .35rem; font-size: .82rem; color: var(--texto-suave); }
.m-linea--ausente .m-linea-et { opacity: .85; }

.m-resumen {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--fondo-tarjeta); padding: .3rem .85rem;
}

/* Tarjeta desplegable: una fila de tabla convertida en ficha. */
.m-tarjeta {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--fondo-tarjeta); margin-bottom: .6rem; overflow: hidden;
}
/* El área de apertura ocupa la tarjeta entera: acertar en un triángulo de 10 px
   con el pulgar es pedir demasiado. */
.m-tarjeta-cab {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem;
  padding: .85rem; cursor: pointer; min-height: 44px; list-style: none;
  align-items: baseline;
}
.m-tarjeta-cab::-webkit-details-marker { display: none; }
.m-tarjeta-cab:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: -2px; }
.m-tarjeta-tit { font-weight: 600; }
.m-tarjeta-res {
  color: var(--texto-suave); font-size: .9rem; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.m-tarjeta-cuerpo { padding: 0 .85rem .85rem; border-top: 1px solid var(--borde); }
.m-total { margin-top: .4rem; border-top: 2px solid var(--borde); font-weight: 600; }

/* Explicaciones plegadas: en un teléfono estorban abiertas, pero no pueden
   desaparecer — son las que dicen POR QUÉ una cifra no está. */
.m-nota { margin: .75rem 0; border: 1px dashed var(--borde); border-radius: var(--radio); }
.m-nota > summary {
  padding: .7rem .85rem; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; color: var(--texto-suave); font-size: .92rem;
}
.m-nota > summary:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: -2px; }
.m-nota-cuerpo { padding: 0 .85rem .85rem; }
.m-nota-cuerpo p, .m-nota-cuerpo .procedencia { font-size: .88rem; margin: .5rem 0; }
.m-nota-suelta { font-size: .85rem; color: var(--texto-suave); margin: .5rem 0; }

/* Barras: rótulo y valor arriba, carril debajo a todo lo ancho. La clásica las
   pone en tres columnas, y a 320 px el rótulo se estrangula. */
.m-barras { list-style: none; margin: 0; padding: 0; }
.m-barra { padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.m-barra:last-child { border-bottom: 0; }
.m-barra-pie { font-size: .8rem; color: var(--texto-suave); }
.m-carril {
  display: block; height: 8px; border-radius: 999px; overflow: hidden; margin-top: .35rem;
  background: color-mix(in srgb, var(--texto-suave) 20%, transparent);
}
.m-carril-relleno { display: block; height: 100%; background: var(--acento); }
.m-carril--pista { background: color-mix(in srgb, var(--texto-suave) 12%, transparent); }

.m-progreso {
  display: block; grid-column: 1 / -1; height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--texto-suave) 20%, transparent); margin-top: .35rem;
}
.m-progreso-relleno { display: block; height: 100%; background: var(--ok); }

/* La leyenda del anillo es la que ya trae la macro; aquí sólo se le permite envolver. Medido a
   320 px, «8.266,44 € · 15.3 %» en una sola línea junto a la etiqueta empujaba el porcentaje fuera
   de la pantalla. No se duplica la leyenda: duplicarla fue mi primer intento y era peor. */
.vista-movil .anillo-leyenda li { flex-wrap: wrap; row-gap: .1rem; }
.vista-movil .anillo-etiqueta { flex: 1 1 100%; min-width: 0; overflow-wrap: break-word; }
.vista-movil .anillo-cifra { font-size: .9rem; }

/* Los doce meses y las series, en vertical. */
.m-meses, .m-serie, .m-filas { list-style: none; margin: 0; padding: 0; }
.m-mes, .m-serie-mes, .m-fila { padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.m-mes:last-child, .m-serie-mes:last-child, .m-fila:last-child { border-bottom: 0; }
.m-mes-estado { font-size: .82rem; color: var(--texto-suave); }
.m-serie-tit { font-weight: 600; margin: 0 0 .2rem; }
.m-mes-cabecera {
  font-weight: 600; padding: .6rem 0 .2rem; border-bottom: 2px solid var(--borde);
  color: var(--texto-suave);
}
.m-fila-hab { font-weight: 600; color: var(--texto); }
.m-estado {
  font-size: .82rem; padding: .1rem .5rem; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--texto-suave); white-space: nowrap;
}

/* Enlaces de navegación y acción, a lo ancho y con sitio para el pulgar. */
.m-acciones { margin: .6rem 0 0; }
.m-enlace, .m-seccion {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .5rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio);
  text-decoration: none; color: var(--acento); background: var(--fondo);
}
.m-enlace:focus-visible, .m-seccion:focus-visible {
  outline: 2px solid var(--acento-brillante); outline-offset: 2px;
}
.m-secciones { display: grid; gap: .5rem; margin: 1rem 0; }
.m-resumen-beneficio { margin: 1rem 0; font-weight: 600; }

/* Filtros propios de las vistas móviles: uno debajo de otro y a todo lo ancho.
   En fila se estrujan, y un desplegable estrujado se falla al pulsar. */
.m-filtros { display: grid; gap: .6rem; }
.m-filtro { display: grid; gap: .3rem; margin-bottom: .6rem; }
.m-filtro label { font-size: .85rem; color: var(--texto-suave); }
.m-filtro select, .m-filtro button {
  width: 100%; min-height: 44px; padding: .5rem .6rem; font-size: 1rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--fondo); color: var(--texto);
}
.m-filtro button { cursor: pointer; background: var(--superficie); }
.m-filtro select:focus-visible, .m-filtro button:focus-visible {
  outline: 2px solid var(--acento-brillante); outline-offset: 1px;
}

/* El enlace de vuelta al listado: medido a 18 px de alto, que es la mitad de lo que necesita un
   pulgar. Es el control más usado de una página de detalle. */
.movil .volver { margin: 0 0 .5rem; }
.movil .volver a {
  display: inline-flex; align-items: center; min-height: 44px; padding-right: .5rem;
}
.movil .volver a:focus-visible { outline: 2px solid var(--acento-brillante); outline-offset: 2px; }

/* El conmutador de vista, al pie y para todo el panel. */
.cambio-vista-pie { margin: 1.5rem 0 .5rem; text-align: center; }

/* Muy estrecho: rótulo y valor dejan de compartir línea. Antes de esto, un rótulo largo con un
   valor largo se empujaban el uno al otro fuera de la pantalla. */
@media (max-width: 380px) {
  .m-linea { flex-wrap: wrap; }
  .m-linea-val { text-align: left; }
  .m-tarjeta-cab { grid-template-columns: 1fr; }
  .m-tarjeta-res { text-align: left; }
}

/* En la vista móvil los selectores compartidos también se apilan y crecen. */
@media (max-width: 640px) {
  .vista-movil .filtros { display: grid; gap: .6rem; }
  .vista-movil .filtro { display: grid; gap: .3rem; }
  .vista-movil .filtro label { font-size: .85rem; }
  .vista-movil .filtro select,
  .vista-movil .filtro button,
  .vista-movil .selector-periodo select,
  .vista-movil .selector-periodo button {
    width: 100%; min-height: 44px; font-size: 1rem;
  }
  .vista-movil .atajo-mes {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
  }
  /* El SVG de las series baja de alto en un teléfono: a 220 px ocupaba casi
     media pantalla y dejaba los ejes fuera del primer vistazo. */
  .vista-movil .serie-svg { height: auto; max-height: 200px; }
  .vista-movil .anillo-svg { max-width: 100%; height: auto; }
}

/* DEV-1225 — la vista se elige sola por el ancho de pantalla, así que el conmutador tiene que
   decir cuánto dura la elección manual: vive en la dirección, no en una preferencia guardada. */
.cambio-vista-nota {
  display: block; margin-top: .3rem; font-size: .78rem; color: var(--texto-suave);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   DEV-1233 — Operación frente a Informes, y controles que no rompen el tema
   ══════════════════════════════════════════════════════════════════════════════════════════════
   Dos problemas distintos, resueltos en un sitio compartido para no duplicarlos entre clásica y
   móvil:

   1. LOS CONTROLES NATIVOS SALÍAN BLANCOS. El tema oscuro estaba definido en variables, pero
      `select`, `input` y `button` sin estilo los pinta el sistema operativo con su propio blanco.
      En una pantalla oscura eso son tres rectángulos que deslumbran. Se estilan globalmente y se
      declara `color-scheme` para que hasta la flecha del desplegable y el cursor sigan el tema.

   2. OPERACIÓN NO SE DISTINGUÍA DE CONSULTA. Cobros y Gastos pendientes escriben datos; Cartera o
      Tendencias no. En la misma fila indistinguible, se entraba en las primeras con la ligereza de
      lo segundo. La separación es visual y semántica, no de rutas. */

/* ── 1 · controles de formulario, en cualquier tema ──────────────────────────────────────────── */
:root { color-scheme: light dark; }

select, input[type="text"], input[type="search"], input[type="number"], input[type="date"],
input[type="password"], textarea {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  padding: .5rem .6rem;
  font: inherit;
  min-height: 40px;
  max-width: 100%;
}
select { padding-right: 1.9rem; }
select:hover, input:hover, textarea:hover { border-color: var(--acento); }
::placeholder { color: var(--texto-suave); opacity: 1; }

button, .boton {
  background: var(--acento-suave);
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  padding: .5rem .9rem;
  font: inherit;
  font-weight: 600;
  min-height: 40px;
  cursor: pointer;
}
button:hover, .boton:hover { border-color: var(--acento); }

/* ── 2 · navegación en dos áreas ─────────────────────────────────────────────────────────────── */
.navegacion { display: flex; flex-wrap: wrap; gap: 0 2rem; align-items: flex-end; }
.nav-grupo { min-width: 0; }
.nav-grupo-titulo {
  margin: .5rem 0 .1rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* La coletilla explicativa cabe en escritorio y sobra en un teléfono: ahí se retira. */
.nav-grupo-detalle { font-weight: 500; letter-spacing: 0; text-transform: none; }
.nav-grupo ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin: 0; padding: 0; list-style: none; }

/* Operación se lee como herramienta; Informes, como consulta. La diferencia es sobria a propósito:
   un color chillón en el menú acabaría compitiendo con los avisos de las páginas. */
.nav-grupo--operacion .nav-item-nombre { font-weight: 650; }
.nav-grupo--operacion .nav-item--activa { border-bottom-color: var(--acento-brillante); }
.nav-grupo--informes .nav-item { color: var(--texto-suave); }
.nav-grupo--informes .nav-item--activa { color: var(--texto); }
/* Un separador discreto entre las dos áreas, sólo donde hay sitio. */
@media (min-width: 720px) {
  .nav-grupo--informes { border-left: 1px solid var(--borde); padding-left: 2rem; }
}

/* ── 3 · filtros como bloque, no como controles sueltos ──────────────────────────────────────── */
.filtros-bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .9rem 1rem;
  margin: 0 0 1.25rem;
}
.filtros-bloque h2 { margin: 0 0 .6rem; font-size: .95rem; }
.filtros-rapidos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.filtro-chip {
  display: inline-block;
  padding: .4rem .75rem;
  min-height: 40px;
  line-height: 1.5;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: .85rem;
}
.filtro-chip:hover { border-color: var(--acento); color: var(--texto); }
.filtro-chip--activo {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--texto);
  font-weight: 650;
}
.filtros-busqueda { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filtros-busqueda label { font-size: .85rem; color: var(--texto-suave); }
.filtros-busqueda input[type="search"] { flex: 1 1 12rem; min-width: 0; }
.filtro-activo { margin: .6rem 0 0; font-size: .85rem; color: var(--texto-suave); }
.filtro-activo strong { color: var(--texto); }

/* ── 4 · tarjetas operativas ─────────────────────────────────────────────────────────────────── */
.tarjetas-op { display: grid; gap: .75rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .tarjetas-op { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La tarjeta ENTERA es el área pulsable, no un enlace pequeño al final: en un teléfono, acertar en
   un texto de doce píxeles es la diferencia entre usar la herramienta y no usarla. */
.tarjeta-op {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: .85rem 1rem;
  color: inherit;
  text-decoration: none;
  min-height: 44px;
}
.tarjeta-op:hover { border-color: var(--acento); box-shadow: var(--sombra); }
.tarjeta-op-titulo {
  display: block;
  font-weight: 650;
  margin: 0 0 .35rem;
  overflow-wrap: anywhere;      /* un concepto largo se parte; nunca desborda de lado */
}
.tarjeta-op-cifras {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; margin: 0 0 .35rem;
}
.tarjeta-op-importe { font-weight: 650; font-variant-numeric: tabular-nums; }
.tarjeta-op-fecha { color: var(--texto-suave); font-size: .9rem; }
.tarjeta-op-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; }
.tarjeta-op-ir { display: block; margin: .5rem 0 0; color: var(--acento); font-weight: 600; font-size: .9rem; }

.etiqueta {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  font-size: .78rem;
  color: var(--texto-suave);
}
.etiqueta--nuevo { background: var(--acento-suave); border-color: var(--acento); color: var(--texto); }
.etiqueta--aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso-texto); }

/* ── 5 · estados ─────────────────────────────────────────────────────────────────────────────── */
/* Un vacío es una respuesta, no un error: sobrio, sin tarjetas grandes ni iconografía de alarma. */
.estado-sobrio {
  margin: 0;
  padding: .9rem 0;
  color: var(--texto-suave);
  font-size: .95rem;
}
.estado-lectura {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--acento-suave);
  border: 1px solid var(--borde);
  font-size: .8rem;
  color: var(--texto-suave);
}
.bloque--preview { border: 1px solid var(--acento); border-radius: var(--radio); padding: 1rem; }
.bloque--exito { border-left: 3px solid var(--ok); background: var(--ok-suave); }
.acciones-escritura { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .9rem 0 0; }
.acciones-escritura select { flex: 1 1 14rem; min-width: 0; }
/* Confirmar tiene que verse distinto de navegar o filtrar: es lo único que escribe. */
.boton-confirmar {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
  font-weight: 700;
  padding: .6rem 1.2rem;
}
.boton-confirmar:hover { background: var(--acento-brillante); border-color: var(--acento-brillante); }
.boton-cancelar {
  display: inline-block;
  padding: .5rem .9rem;
  min-height: 40px;
  line-height: 1.6;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  text-decoration: none;
}
.boton-cancelar:hover { border-color: var(--borde-fuerte); color: var(--texto); }

/* ── 6 · teléfono ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* MEDIDO: con los dos grupos apilados y el título encima, la barra ocupaba 195 px — el 22 % de una
     pantalla de teléfono, antes de leer una sola cifra. Aquí el título va EN LÍNEA con sus enlaces:
     se conservan los dos rótulos, que es lo que el encargo pide, y la barra baja a menos de la
     mitad. La coletilla explicativa sí sobra: el título ya distingue las dos áreas. */
  .nav-grupo-detalle { display: none; }
  .navegacion { gap: 0; padding: 0 1rem; }
  .nav-grupo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7rem; width: 100%;
    padding: .15rem 0;
  }
  .nav-grupo + .nav-grupo { border-top: 1px solid var(--borde); }
  .nav-grupo-titulo { margin: 0; font-size: .62rem; flex: 0 0 auto; }
  .nav-grupo ul { gap: 0 .75rem; flex: 1 1 auto; }
  .nav-item { padding: .45rem 0; font-size: .92rem; }   /* sigue pasando de 36 px de alto */
  .filtros-bloque { padding: .8rem; }
  .filtro-chip { padding: .45rem .8rem; }
  .tarjeta-op { padding: .8rem .85rem; }
  .acciones-escritura { flex-direction: column; align-items: stretch; }
  .acciones-escritura .boton-confirmar, .acciones-escritura .boton-cancelar { text-align: center; }
}


/* ── DEV-1241 · asignación económica de propiedad ─────────────────────────────────────────────── */
/* Tres piezas y ninguna más: el resto reutiliza el vocabulario que ya usa el detalle de Gastos
   pendientes (`bloque--preview`, `acciones-escritura`, `boton-confirmar`), para que las dos
   pantallas de Operación no se separen con el tiempo. */
.campo-escritura {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .8rem .9rem 1rem; margin: 0 0 .9rem;
}
.campo-escritura legend { padding: 0 .35rem; font-weight: 600; }
.campo-escritura label { display: block; margin: 0 0 .35rem; }
/* La etiqueta documental es CONTEXTO: se ve, pero no compite con la imputación, que es la decisión. */
.etiqueta--suave { opacity: .72; }

/* `aviso-accion` y `lista-preview` se usaban desde DEV-1232 sin ninguna regla: el resultado de una
   escritura se leía como texto suelto. Se les da el mínimo para que se distingan del cuerpo. */
.aviso-accion {
  margin: .9rem 0; padding: .7rem .9rem; border-radius: var(--radio);
  border-left: 3px solid var(--acento); background: var(--acento-suave);
}
.lista-preview { margin: .6rem 0 0; padding-left: 1.2rem; }
.lista-preview li { margin: .3rem 0; }

@media (max-width: 480px) {
  /* A 360 px el desplegable y su botón no caben en fila: se apilan y ocupan el ancho entero, que es
     lo que hace que se puedan pulsar con el pulgar sin ampliar. */
  .campo-escritura .acciones-escritura { flex-direction: column; align-items: stretch; }
  /* Ancho entero y 44 px de alto: es el mínimo con el que un pulgar acierta sin ampliar. Medido
     a 360/390/430 px — antes de fijarlo, el botón se quedaba justo por debajo. */
  .campo-escritura select, .campo-escritura .boton-confirmar,
  .campo-escritura .boton-cancelar {
    width: 100%; text-align: center; min-height: 44px;
  }
}


/* ── DEV-1242 · la bandeja de acciones ─────────────────────────────────────────────────────────── */
/* La tarjeta deja de ser un enlace entero: ahora lleva UN botón por cada acción que falta, y el
   destino de cada uno es distinto. Por eso `tarjeta-op--acciones` quita el comportamiento de enlace
   y deja la caja como contenedor. */
.tarjeta-op--acciones { cursor: default; }
.acciones-tarjeta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 0; }
.accion-chip {
  display: inline-block; padding: .55rem .9rem; min-height: 44px; line-height: 1.7;
  border: 1px solid var(--acento); border-radius: var(--radio);
  color: var(--acento); text-decoration: none; font-weight: 600;
}
.accion-chip:hover, .accion-chip:focus-visible {
  background: var(--acento); color: var(--superficie);
}

@media (max-width: 480px) {
  /* A 360 px dos botones en fila se quedan en texto de ocho píxeles. Uno por línea y a ancho
     completo: es lo que hace que se pulsen con el pulgar sin ampliar. */
  .acciones-tarjeta { flex-direction: column; align-items: stretch; }
  .accion-chip { text-align: center; }
}


/* ── DEV-1243 · la ficha de gestión, en popup ──────────────────────────────────────────────────── */
/* En el teléfono, hoja desde abajo: es donde llega el pulgar y no tapa la lista entera.
   En escritorio, modal centrado. Lo mismo, dos formas, sin una línea de JavaScript para decidirlo. */
.ficha-popup {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 0;
  background: var(--superficie); color: var(--texto);
  max-width: 34rem; width: calc(100% - 2rem); max-height: 88vh; overflow: auto;
  box-shadow: var(--sombra);
}
.ficha-popup::backdrop { background: rgba(0, 0, 0, .45); }
.ficha-form { padding: 1.1rem 1.2rem 1.3rem; }
.ficha-cabecera h2 { margin: 0 0 .2rem; }
.ficha-actual { margin: 0 0 .6rem; }
.ficha-etiqueta { color: var(--texto-suave); margin-right: .4rem; }
.ficha-popup .campo-escritura select { width: 100%; margin-top: .3rem; }
.ficha-popup label { display: inline-block; margin: .15rem 0; }
/* El área pulsable de un radio es diminuta; se agranda su etiqueta entera. */
.ficha-popup .campo-escritura p { margin: .45rem 0; min-height: 30px; }

@media (max-width: 480px) {
  /* Hoja inferior: pegada abajo, ancho completo y esquinas sólo arriba. */
  .ficha-popup {
    width: 100%; max-width: none; margin: 0; max-height: 92vh;
    position: fixed; inset: auto 0 0 0;
    border-radius: var(--radio) var(--radio) 0 0; border-bottom: 0;
  }
  .ficha-form { padding: 1rem .9rem 1.6rem; }
  /* Sitio por debajo para que el teclado virtual no tape el último control. */
  .ficha-popup .acciones-escritura { flex-direction: column; align-items: stretch; }
  .ficha-popup .acciones-escritura .boton-confirmar,
  .ficha-popup .acciones-escritura .boton-cancelar {
    width: 100%; text-align: center; min-height: 44px; line-height: 2.4;
  }
}

/* El botón de buscar se quedaba en 43 px: un píxel por debajo del mínimo con el que un pulgar
   acierta. Medido, no supuesto. */
@media (max-width: 480px) {
  .filtros-busqueda button, .filtros-busqueda .boton-cancelar { min-height: 44px; }
}


/* ── DEV-1245 · opciones directas, de ancho completo ───────────────────────────────────────────── */
/* Se quitaron los radios «Mantener / Cambiar a». Lo que queda tiene que ser grande y evidente: una
   opción por línea, con su explicación debajo y un área pulsable que abarque toda la tarjeta. */
.ficha-cambiar { margin: .8rem 0 .3rem; font-weight: 600; }
.opcion-directa {
  display: block; width: 100%; box-sizing: border-box;
  padding: .6rem .7rem; margin: 0 0 .5rem; min-height: 44px;
  border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer;
}
.opcion-directa:hover { border-color: var(--acento); }
.opcion-directa:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion-directa .opcion-titulo { font-weight: 600; margin-left: .35rem; }
.opcion-directa .tarjeta-detalle { display: block; margin: .15rem 0 0 1.55rem; }


/* ── DEV-1246 · el diálogo único ───────────────────────────────────────────────────────────────── */
/* Su contenido llega después de abrirlo, así que necesita un tamaño mínimo: sin esto, la ventana
   aparece del alto de una línea y da un salto feo al llegar la ficha. */
.ficha-cargando { padding: 2.2rem 1.2rem; text-align: center; color: var(--texto-suave); }
.ficha-popup #ficha-cuerpo { min-height: 6rem; }


/* ── DEV-1247 · un eje ya resuelto no ocupa media ficha ────────────────────────────────────────── */
/* Se dice en una línea y su formulario vive dentro de un desplegable cerrado. `<details>` lo da el
   navegador: ni una línea de JavaScript para abrirlo y cerrarlo. */
.campo-escritura--resuelto { border-style: dashed; }
.cambiar-destino > summary {
  cursor: pointer; padding: .55rem .2rem; min-height: 44px; line-height: 2;
  color: var(--acento); font-weight: 600;
}
.cambiar-destino > summary::marker { color: var(--acento); }
.cambiar-destino[open] > summary { margin-bottom: .3rem; }
/* El error de la ficha se ve arriba del todo, sin tapar lo que la persona había elegido. */
.ficha-form [data-error-ficha] { margin: 0 0 .8rem; border-left-color: var(--aviso-borde); }

/* DEV-1261 · rediseño compacto DEV-1266 — «Resumen del mes» de Cartera.
   La primera versión apilaba tres tarjetas grandes y en el teléfono el tercer indicador quedaba
   fuera de pantalla: dejaba de ser un vistazo. Ahora cobro y ocupación comparten fila INCLUSO a
   360 px —dos columnas fijas, sin `auto-fit`, que era lo que las apilaba— y el beneficio ocupa el
   ancho entero debajo, que es como se lee una cifra única. */
.resumen-mes-rejilla {
  display: grid; gap: .6rem; margin-top: .5rem;
  grid-template-columns: 1fr 1fr;
}
.resumen-tarjeta--ancha { grid-column: 1 / -1; }   /* el beneficio, de lado a lado */

/* En pantallas anchas los tres reparten el espacio y el beneficio deja de ocupar toda la fila:
   así no se vuelve a una tarjeta gigante. */
@media (min-width: 52rem) {
  .resumen-mes-rejilla { grid-template-columns: repeat(3, 1fr); }
  .resumen-tarjeta--ancha { grid-column: auto; }
}

.resumen-tarjeta {
  border: 1px solid var(--borde, #e3e8ec); border-radius: .6rem; padding: .6rem .7rem;
  min-width: 0;                 /* sin esto, una cifra larga estira la columna y desborda */
}
.resumen-tarjeta h3 { margin: 0 0 .35rem; font-size: .95rem; }

/* La dona y su leyenda, en vertical dentro de una tarjeta estrecha; la LEYENDA en horizontal. */
.resumen-dona { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.resumen-dona-svg { width: 100%; max-width: 6.5rem; height: auto; }

/* Leyenda compacta: una línea por sector, no una lista con sangría. Cada entrada lleva su
   etiqueta además del color. */
.resumen-leyenda { list-style: none; margin: 0; padding: 0; width: 100%; font-size: .8rem; }
.resumen-leyenda li {
  display: flex; align-items: baseline; gap: .3rem; justify-content: space-between;
  overflow-wrap: anywhere;
}
.resumen-leyenda .anillo-color { flex: 0 0 auto; align-self: center; }
.resumen-leyenda strong { margin-left: auto; white-space: nowrap; }

.resumen-nota { margin: .1rem 0 0; font-size: .8rem; color: var(--texto-suave, #667); }
.resumen-pie { margin: .35rem 0 0; font-size: .78rem; color: var(--texto-suave, #667); }
.resumen-cifra--grande { margin: .2rem 0 0; font-size: 1.5rem; overflow-wrap: anywhere; }

/* DEV-1268 — «Resultado de caja provisional». Una pérdida se ve como pérdida: color propio y la
   palabra escrita, porque el color solo no basta para quien no lo distingue. Sin celebraciones. */
.resumen-cifra--perdida { color: var(--malo, #a4262c); }
.resumen-etiqueta-perdida {
  font-size: .72rem; font-weight: 600; margin-left: .35rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--malo, #a4262c);
}
/* Desglose de la resta: las dos mitades, verificables de un vistazo y sin desbordar. */
.resumen-desglose { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .82rem; }
.resumen-desglose li {
  display: flex; justify-content: space-between; gap: .5rem; padding: .12rem 0;
  border-bottom: 1px solid var(--borde, #eef1f4);
}
.resumen-desglose li:last-child { border-bottom: 0; }
.resumen-desglose strong { white-space: nowrap; }
.resumen-secundario { border-top: 1px solid var(--borde, #eef1f4); padding-top: .4rem; }