/* ============================================================
   FINANZAS · cuentas, crédito, suscripciones, presupuesto y panel
   ============================================================ */

.fin-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.fin-chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--navy);background:var(--ficha);border:1px solid var(--borde);border-radius:var(--r-sm);padding:6px 13px;}
.fin-grupo{margin-top:26px;}
.fin-grupo:first-of-type{margin-top:0;}
.fin-grupo-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;padding-bottom:8px;border-bottom:1.5px solid rgba(13,42,65,0.14);}
.fin-grupo-cab .nm{font-size:var(--t-sm);letter-spacing:0.4px;text-transform:uppercase;color:var(--navy);font-weight:var(--p-max);}
.fin-grupo-cab .tot{margin-left:auto;font-size:var(--t-sm);color:var(--navy);font-weight:var(--p-fuerte);}
.fin-cta{margin-bottom:10px;overflow:hidden;}
.fin-cta > summary{list-style:none;cursor:pointer;}
.fin-cta > summary::-webkit-details-marker{display:none;}
.fin-cab{display:flex;align-items:center;gap:12px;padding:13px 16px;}
.fin-chev{font-size:var(--t-sm);color:rgba(13,42,65,0.35);transition:transform .18s ease;flex:none;}
.fin-cta[open] .fin-chev{transform:rotate(90deg);}
.fin-ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--fondo);color:rgba(13,42,65,0.65);display:flex;align-items:center;justify-content:center;font-size:var(--t-md);flex:none;}
.fin-tit{display:flex;flex-direction:column;flex:1;min-width:0;}
.fin-nm{font-size:var(--t-md);font-weight:var(--p-medio);}
.fin-tag{font-size:var(--t-xs);color:var(--sec);margin-top:1px;}
.fin-der{text-align:right;flex:none;}
.fin-der .cifra{font-size:var(--t-md);font-weight:var(--p-fuerte);}
.fin-der .mini{width:60px;height:5px;border-radius:var(--r-sm);background:rgba(13,42,65,0.09);margin-top:6px;margin-left:auto;position:relative;}
.fin-der .mini .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-sm);background:var(--navy);}
.fin-der .peso{font-size:var(--t-xs);color:var(--sec);margin-top:2px;}
.fin-body{background:var(--fondo);border-top:1px solid var(--lin);}
.fin-mov{display:flex;align-items:center;gap:12px;padding:9px 16px 9px 46px;border-bottom:1px solid rgba(13,42,65,0.05);cursor:pointer;}
.fin-mov:last-of-type{border-bottom:none;}
.fin-mov:hover{background:rgba(13,42,65,0.02);}
.fin-mov-fecha{font-size:var(--t-xs);color:var(--sec);width:46px;flex:none;}
.fin-mov-cpt{flex:1;font-size:var(--t-sm);min-width:0;}
.fin-mov-imp{font-size:var(--t-sm);font-weight:var(--p-fuerte);white-space:nowrap;}
.fin-mov-imp.ingreso{color:var(--verde-hondo);}
.fin-mov-imp.gasto{color:var(--alerta);}
.fin-mov-imp.traspaso{color:var(--sec);}
.fin-ver-todos{display:flex;align-items:center;gap:6px;padding:11px 16px 13px 46px;color:var(--sec);font-size:var(--t-sm);cursor:pointer;}
.fin-ver-todos:hover{color:var(--navy);}
.fin-add-mov{display:flex;align-items:center;gap:8px;padding:11px 16px 13px 46px;color:rgba(13,42,65,0.42);font-size:var(--t-sm);cursor:pointer;}
.fin-add-mov:hover{color:var(--verde);}
.fin-add-cat{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;margin-top:14px;color:var(--navy);font-size:var(--t-sm);font-weight:var(--p-fuerte);cursor:pointer;border:1.5px dashed rgba(13,42,65,0.22);border-radius:var(--r-md);background:transparent;}
.fin-add-cat:hover{color:var(--verde);border-color:var(--verde);background:var(--ficha);}
/* ---- Movimientos: cabecera de cuenta + buscador + filtros ---- */
  .fin-cuenta-cab{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.fin-cuenta-cab .fin-ic{width:38px;height:38px;background:var(--ficha);border:1px solid var(--borde);}
.fin-cuenta-cab .nm{font-size:var(--t-md);font-weight:var(--p-fuerte);}
.fin-cuenta-cab .saldo{margin-left:auto;text-align:right;}
.fin-cuenta-cab .saldo .cifra{font-size:var(--t-lg);font-weight:var(--p-fuerte);}
.fin-cuenta-cab .saldo .lbl{font-size:var(--t-xs);color:var(--sec);}
.fin-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.fin-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--navy);border:1px solid var(--borde);border-radius:var(--r-sm);padding:7px 14px;cursor:pointer;background:var(--ficha);}
.fin-pill.on{background:var(--navy);border-color:var(--navy);color:var(--ficha);font-weight:var(--p-fuerte);}
.fin-mes-cab{display:flex;align-items:baseline;gap:8px;margin:20px 0 10px;padding-bottom:8px;border-bottom:1.5px solid rgba(13,42,65,0.14);}
.fin-mes-cab:first-of-type{margin-top:0;}
.fin-mes-cab .nm{font-size:var(--t-sm);letter-spacing:0.4px;text-transform:uppercase;color:var(--navy);font-weight:var(--p-max);}
.fin-mes-cab .tot{margin-left:auto;font-size:var(--t-sm);color:var(--sec);}
.fin-lista{overflow:hidden;}
.fin-lista .fin-mov{padding:13px 16px;}
.fin-mov-saldo{font-size:var(--t-xs);color:var(--sec);margin-top:2px;}
.fin-mov-saldo.negativo{color:var(--alerta);font-weight:var(--p-fuerte);}
/* Barra de acciones de la lista de movimientos (v7.6).
     Antes el "+" era un .fin-fab: un círculo verde clavado en la esquina
     inferior derecha de la VENTANA. En un móvil el pulgar llega ahí; en el
     monitor de 27" quedaba a medio metro de la lista y casi encima del
     Dock. Ahora todo va arriba, en la línea de los filtros, donde ya
     estás mirando: lupa, impresora y el "+". */
  /* OJO: NO llamar a esto .fin-barra. Ya existe una .fin-barra más abajo
     que es la BARRA DE PROGRESO de Crédito (height:8px, fondo gris). Al
     repetir el nombre ganaba la de abajo y esta barra de acciones se
     pintaba de 8 píxeles de alto, solapándose con la línea del mes. */
  .fin-accbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.fin-acciones{display:flex;align-items:center;gap:6px;}
.fin-icobtn{width:32px;height:32px;border:1px solid var(--borde);background:var(--ficha);
              display:flex;align-items:center;justify-content:center;color:var(--sec);
              font-size:var(--t-md);padding:0;transition:.15s;}
.fin-icobtn:hover{border-color:var(--verde);color:var(--verde);}
.fin-icobtn.nuevo{background:var(--verde);border-color:var(--verde);color:var(--ficha);}
.fin-icobtn.nuevo:hover{background:var(--verde-vivo);border-color:var(--verde-vivo);color:var(--ficha);}
/* La lupa despliega el campo. Cerrado ocupa lo que un icono; abierto,
     260px. Antes había una barra a todo lo ancho robándole una línea a la
     lista para algo que se usa de vez en cuando. */
  .fin-buscar{display:flex;align-items:center;gap:6px;border:1px solid var(--borde);background:var(--ficha);
              border-radius:var(--r-sm);height:32px;padding:0 8px;transition:.18s;}
.fin-buscar i{font-size:var(--t-md);color:var(--sec);cursor:pointer;flex-shrink:0;}
.fin-buscar i:hover{color:var(--verde);}
.fin-buscar input{width:0;border:0;outline:none;font-family:inherit;font-size:var(--t-sm);color:var(--navy);
                    background:none;padding:0;transition:width .18s;}
.fin-buscar #fin-mov-limpiar{display:none;}
.fin-buscar.abierto{border-color:var(--verde);}
.fin-buscar.abierto input{width:230px;}
.fin-buscar.abierto #fin-mov-limpiar{display:block;}
@media (max-width:700px){ .fin-buscar.abierto input{width:130px;} }
.fin-cred-cab-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.fin-cred-warn{font-size:var(--t-xs);font-weight:var(--p-fuerte);letter-spacing:0.2px;text-transform:uppercase;color:var(--alerta);background:var(--rojo-suave);border-radius:var(--r-lg);padding:2px 8px;margin-left:8px;}
.fin-rosario{display:flex;align-items:center;gap:4px;padding-left:44px;flex-wrap:wrap;margin-top:10px;}
.fin-cuota-pt{width:9px;height:9px;border-radius:50%;background:rgba(13,42,65,0.14);flex:none;}
.fin-cuota-pt.pagada{background:var(--navy);}
.fin-cuota-pt.proxima{background:var(--ficha);border:2px solid var(--verde);width:7px;height:7px;}
.fin-cuota-pt.impagada{background:var(--alerta);}
.fin-rosario-lbl{font-size:var(--t-xs);color:var(--sec);margin-left:8px;white-space:nowrap;}
.fin-micro-lista{background:var(--ficha);border-top:1px solid var(--lin);}
.fin-micro-row{display:flex;align-items:center;gap:11px;padding:10px 16px 10px 46px;border-bottom:1px solid rgba(13,42,65,0.05);cursor:pointer;}
.fin-micro-row:hover{background:rgba(13,42,65,0.02);}
.fin-micro-nm{flex:1;font-size:var(--t-sm);min-width:0;}
.fin-micro-rosario{display:flex;gap:3px;flex:none;}
.fin-micro-pt{width:6px;height:6px;border-radius:50%;background:var(--borde);}
.fin-micro-pt.pagada{background:var(--navy);}
.fin-micro-tag{font-size:var(--t-xs);font-weight:var(--p-fuerte);padding:2px 8px;border-radius:var(--r-lg);white-space:nowrap;flex:none;}
.fin-micro-tag.sin{background:var(--verde-suave);color:var(--verde-hondo);}
.fin-micro-tag.con{background:var(--ambar-suave);color:var(--ambar-hondo);}
.fin-micro-der{text-align:right;flex:none;}
/* ---- ficha de un contrato ---- */
  .fin-card{padding:24px 20px;}
.fin-prox-box{display:flex;align-items:center;gap:14px;background:var(--fondo);border-radius:var(--r-md);padding:14px;margin-bottom:16px;}
.fin-fecha-box{width:52px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;}
.fin-fecha-box .mes{font-size:var(--t-xs);color:var(--sec);text-transform:uppercase;font-weight:var(--p-fuerte);}
.fin-fecha-box .dia{font-size:var(--t-lg);font-weight:var(--p-max);line-height:1.1;}
.fin-resumen{display:flex;justify-content:space-between;margin-bottom:8px;}
.fin-resumen .p{text-align:right;}
.fin-resumen .cifra{font-size:var(--t-lg);font-weight:var(--p-max);}
.fin-resumen .lbl{font-size:var(--t-xs);color:var(--sec);margin-top:1px;}
.fin-barra{position:relative;height:8px;border-radius:var(--r-sm);background:var(--lin);margin-bottom:24px;}
.fin-barra .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-sm);background:var(--verde);}
.fin-timeline{position:relative;margin-bottom:8px;}
.fin-paso{display:flex;gap:14px;position:relative;padding-bottom:18px;cursor:pointer;}
.fin-paso:last-child{padding-bottom:0;}
.fin-paso::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:rgba(13,42,65,0.12);}
.fin-paso:last-child::before{display:none;}
.fin-marca{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:var(--t-sm);z-index:1;}
.fin-marca.pagada{background:var(--verde);color:var(--ficha);}
.fin-marca.actual{background:var(--ficha);border:2px solid var(--navy);color:var(--navy);}
.fin-marca.pendiente{background:var(--ficha);border:2px solid var(--borde);}
.fin-marca.impagada{background:var(--alerta);color:var(--ficha);}
.fin-paso-info{flex:1;padding-top:1px;}
.fin-paso-fch{font-size:var(--t-md);font-weight:var(--p-medio);}
.fin-paso-nota{font-size:var(--t-xs);color:var(--sec);margin-top:1px;}
.fin-paso-imp{font-size:var(--t-md);font-weight:var(--p-fuerte);padding-top:1px;}
.fpanel-rot{display:flex;align-items:center;gap:8px;margin:18px 0 12px;}
.fpanel-rot .punto{width:7px;height:7px;border-radius:50%;background:var(--verde);}
.fpanel-rot span{font-size:var(--t-md);font-weight:var(--p-medio);}
/* ---- CABECERA DE MÓDULO (compartida por Panel, Cuentas, Crédito y
     Suscripciones) ------------------------------------------------------
     Una sola cifra protagonista, y es siempre un número que existe ahora
     mismo: un saldo, una deuda, un compromiso. Lo que se ha movido durante
     el periodo va debajo, agrupado y con menos peso. Antes cada módulo se
     inventaba su cabecera, y en el Panel había tres tarjetas iguales
     mezclando flujo y saldo: el ojo intentaba restarlas y no cuadraba,
     porque no se restan.
     NO crear una cabecera nueva por módulo. Se usa esta.                  */
  .pres-rango{font-weight:var(--p-normal);color:var(--sec);}
.fin-tot{margin-top:16px;padding-top:14px;border-top:1px solid var(--lin);}
.fin-tot + .fin-tot{margin-top:12px;}
.fin-tot .rot{font-size:var(--t-xs);color:var(--sec);margin-bottom:8px;}
.fin-tot .fila{display:flex;flex-wrap:wrap;gap:28px;}
.fin-tot .col{display:flex;flex-direction:column;gap:5px;}
.fin-tot .et{white-space:nowrap;}
/* EL TAMAÑO LO PONE EL CONTEXTO, EL COLOR LO PONE EL DATO.
     Antes cada clase de cifra repetía su tamaño y su peso en cada
     contexto: doce reglas para seis clases. Y las tres de Crédito
     (.cr-bien/.cr-medio/.cr-mal) se escribieron aparte SIN tamaño, así
     que heredaban el del contenedor y salían a 16 px al lado de un
     14 px — la misma cifra, "142,30" en Cuotas y "142,30" en Pagado,
     con dos tamaños distintos. Se veía en pantalla y no en el código. */
  .fin-tot .fin-neu, .fin-tot .fin-ini, .fin-tot .fin-ent, .fin-tot .fin-sal,
  .fin-tot .fin-tra, .fin-tot .fin-nada,
  .fin-tot .cr-bien, .fin-tot .cr-medio, .fin-tot .cr-mal{
    font-size:var(--t-md);font-weight:var(--p-medio);}
.fin-tot-saldo{margin-left:auto;align-items:flex-end;}
.fin-tot-saldo .cif{font-size:var(--t-lg);font-weight:var(--p-max);}
.fin-ciclo{display:grid;grid-template-columns:repeat(4,84px);gap:22px;margin-left:auto;padding-right:18px;}
/* En Credito son tres columnas y una es mas ancha: "Compras nuevas" no
     cabe en 84 px sin partirse en dos lineas. */
  #pantalla-fin-credito .fin-ciclo{grid-template-columns:repeat(4,88px);}
/* Quinta columna ("Posterior") solo los dias que hay algo apuntado con
     fecha futura. El hueco se saca del gap, no del ancho de columna, para
     que las cifras sigan alineadas con las del resto de filas. */
  .fin-ciclo.con-post{grid-template-columns:repeat(5,84px);gap:14px;}
/* .fin-der no tenia ancho: lo daba su contenido, y "9,03 € / 40% del
     grupo" no mide lo mismo que "0,00 € / —". Como la tira del ciclo se
     apoya en el (margin-left:auto), cada fila colocaba sus columnas en una
     x distinta. Con cuatro etiquetas repetidas por fila no se notaba; con
     una cabecera unica se notaria a la primera. Se ancla el ancho, que
     ademas alinea las filas entre si, que es lo que deberian haber estado
     desde el principio. */
  #pantalla-fin-cuentas .fin-der,
  #pantalla-fin-credito .fin-der{width:104px;}
/* Cabecera de columnas del grupo, una sola vez en vez de una por fila.
     Reproduce la fila entera (mismo .fin-cab, mismo .fin-ciclo, mismo
     .fin-der vacio de ancho fijo) para que el navegador calcule la misma
     posicion en vez de fiarlo a un calc() con numeros a mano. El borde
     transparente compensa el 1px de .fin-cta. */
  .fin-ciclo-cab{border:1px solid transparent;}
.fin-ciclo-cab .fin-cab{padding-top:0;padding-bottom:6px;}
.fin-ciclo-cab .fin-ciclo .col{gap:0;}
@media (max-width:1220px){ .fin-ciclo-cab{display:none;} }
/* ---- PRESUPUESTO v13: navegación, cabecera de cuatro y hoja anual ---- */
  .pres-nav{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.pres-conm{display:inline-flex;border:1px solid var(--borde);border-radius:var(--r-sm);overflow:hidden;background:var(--ficha);}
.pres-conm span{padding:6px 17px;font-size:var(--t-sm);font-weight:var(--p-fuerte);color:var(--sec);cursor:pointer;}
.pres-conm span.on{background:var(--navy);color:var(--ficha);}
.pres-mesnav{display:flex;align-items:center;gap:12px;}
.pres-flecha{width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--borde);background:var(--ficha);
    display:inline-flex;align-items:center;justify-content:center;color:var(--sec);cursor:pointer;user-select:none;}
.pres-flecha:hover{background:var(--gris-4);color:var(--navy);}
.pres-mesnom{font-size:var(--t-md);font-weight:var(--p-fuerte);}
.pres-anios{display:flex;gap:5px;margin-left:auto;}
.pres-anio{padding:5px 13px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:var(--p-fuerte);
    border:1px solid var(--borde);background:var(--ficha);color:var(--sec);cursor:pointer;}
.pres-anio.on{background:var(--navy);color:var(--ficha);border-color:var(--navy);}
/* Borde discontinuo = año cerrado. Se ve de un vistazo cuáles son
     histórico y cuáles se pueden tocar, sin tener que entrar. */
  .pres-anio.cerrado{border-style:dashed;}
.pres-cerrado{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--sec);
    border:1px dashed var(--borde);border-radius:var(--r-sm);padding:4px 10px;cursor:pointer;}
.pres-cerrado:hover{background:var(--gris-4);}
/* Se llama pres-resumen y NO pres-cab: ese nombre ya estaba cogido mas
     abajo por la cabecera de cada fila de categoria, que es display:flex.
     Al coincidir, la de abajo ganaba por orden y ponia la rejilla de cuatro
     cifras y la barra de ritmo UNA AL LADO DE OTRA, solapadas. Se vio en
     pantalla: el texto del ritmo salia por detras de la pastilla oscura. */
  /* Etiqueta de categoría que se rellena sola. En gris y con borde fino,
     no en color: no es una alerta ni un logro, es una nota de dónde sale
     el número. Va en la propia fila para que no haya que descubrirlo
     pinchando y llevándose un mensaje de error. */
  .pres-cfg{width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--borde);
    background:var(--ficha);display:inline-flex;align-items:center;justify-content:center;
    color:var(--sec);cursor:pointer;flex:none;}
.pres-cfg:hover{background:var(--gris-4);color:var(--navy);}
/* Preaviso de cierre de mes. Ámbar y no rojo: es un recordatorio, no
     una alerta. El rojo está reservado a lo que va mal de verdad, y que
     el mes se acabe no va mal, pasa todos los meses. */
  .pres-preaviso{display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:14px;
    background:var(--ambar-suave);border-left:3px solid var(--ambar);border-radius:var(--r-sm);
    font-size:var(--t-sm);line-height:1.45;}
.pres-preaviso .ic{color:var(--ambar-hondo);flex:none;font-size:var(--t-lg);}
.pres-preaviso .tx{flex:1;color:var(--ambar-hondo);}
.pres-preaviso .tx b{font-weight:var(--p-fuerte);}
.pres-preaviso .acc{flex:none;cursor:pointer;font-weight:var(--p-fuerte);color:var(--ambar-hondo);
    border:1px solid var(--ambar);border-radius:var(--r-sm);padding:6px 12px;white-space:nowrap;}
.pres-preaviso .acc:hover{background:var(--ambar);color:var(--ficha);}
@media (max-width:760px){
    .pres-preaviso{flex-wrap:wrap;}
    .pres-preaviso .acc{width:100%;text-align:center;}
  }
.pres-resumen{padding:18px 22px 16px;margin-bottom:16px;}
.pres-cuatro{display:grid;grid-template-columns:repeat(4,1fr);}
.pres-cuatro .cel{padding:0 22px;border-left:1px solid var(--lin);}
.pres-cuatro .cel:first-child{padding-left:0;border-left:none;}
.pres-cuatro .et{font-size:var(--t-xs);color:var(--sec);text-transform:uppercase;letter-spacing:.3px;
    font-weight:var(--p-fuerte);display:block;margin-bottom:7px;}
/* Presupuesto NO usa .cabmod y es a proposito: no tiene UNA cifra
     grande, tiene CUATRO en fila (presupuesto, gastado, neto y hucha).
     Meterla en el molde de una cifra sola la estropearia. Lo que si
     comparte es la escala: la etiqueta en mayusculas pequeñas igual que
     .cabmod-et, y la cifra un escalon por debajo de las de una sola
     cifra —t-xl frente a t-2xl— porque son cuatro y no caben a 34 px.
     Es la misma familia en otro tamaño, no otra familia. */
  .pres-cuatro .n{font-size:var(--t-xl);font-weight:var(--p-max);letter-spacing:-.5px;line-height:1;}
.pres-cuatro .pie2{font-size:var(--t-xs);color:var(--sec);margin-top:6px;}
.pres-cuatro .v-pos{color:var(--verde);}
.pres-cuatro .v-neg{color:var(--rojo-vivo);}
/* La hucha en oscuro: es lo único de la cabecera que NO es de este mes.
     El contraste dice "esto es otra cosa" sin tener que explicarlo.
     SIN márgenes negativos: sacarla del padding de la tarjeta con
     margin:-18px -22px -16px 0 la extendía por debajo y se comía la línea
     del ritmo. Va dentro de la rejilla, como una pastilla. */
  .pres-cuatro .cel.destaca{background:var(--navy);border-radius:var(--r-md);
    padding:14px 18px;border-left:none;margin-left:10px;}
.pres-cuatro .cel.destaca .et{color:rgba(255,255,255,.62);}
.pres-cuatro .cel.destaca .n{color:var(--ficha);}
.pres-cuatro .cel.destaca .pie2{color:rgba(255,255,255,.55);}
.pres-cuatro .cel.destaca .v-pos{color:var(--verde-sobre-navy);}
.pres-cuatro .cel.destaca .v-neg{color:var(--rojo-sobre-navy);}
.pres-ritmo{margin-top:16px;padding-top:14px;border-top:1px solid var(--lin);}
.pres-ritmo .pie{font-size:var(--t-xs);color:var(--sec);margin-top:8px;}
.pres-hoja{overflow-x:auto;}
.pres-tabla{border-collapse:collapse;width:100%;font-size:var(--t-sm);font-variant-numeric:tabular-nums;}
.pres-tabla th,.pres-tabla td{padding:0;text-align:right;}
.pres-tabla th.m,.pres-tabla td.c{min-width:78px;}
.pres-tabla th.et,.pres-tabla td.et{text-align:left;min-width:180px;padding-left:14px;}
.pres-tabla th.an,.pres-tabla td.an{min-width:90px;padding-right:14px;border-left:1px solid var(--borde);}
.pres-tabla thead th{font-size:var(--t-xs);font-weight:var(--p-fuerte);color:var(--sec);text-transform:uppercase;letter-spacing:.4px;
    padding:9px 8px;border-bottom:1px solid var(--borde);background:var(--gris-5);}
.pres-tabla thead th.hoy{background:var(--navy);color:var(--ficha);}
.pres-tabla thead th.fut{color:rgba(13,42,65,0.38);}
.pres-tabla td{padding:7px 8px;border-bottom:1px solid var(--lin);}
.pres-tabla td.an{font-weight:var(--p-fuerte);}
.pres-tabla td.hoy{background:rgba(13,42,65,0.045);}
.pres-tabla td.fut{color:rgba(13,42,65,0.42);}
.pres-tabla .real{display:block;font-weight:var(--p-fuerte);line-height:1.3;}
.pres-tabla .est{display:block;font-size:var(--t-xs);color:rgba(13,42,65,0.45);line-height:1.25;}
.pres-tabla .nada{color:rgba(13,42,65,0.25);}
.pres-tabla td.mal .real{color:var(--rojo-vivo);}
.pres-tabla td.bien .real{color:var(--verde);}
.pres-tabla tr.pres-cat:hover td{background:var(--gris-4);}
.pres-tabla tr.pres-part td.et{padding-left:34px;color:var(--sec);font-size:var(--t-xs);}
.pres-tabla tr.pres-part td{color:var(--sec);}
.pres-tabla tr.pres-grupo td{background:var(--gris-5);font-size:var(--t-xs);font-weight:var(--p-max);letter-spacing:.7px;
    text-transform:uppercase;color:var(--sec);padding:7px 14px;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);text-align:left;}
.pres-tabla tr.pres-hucha td{background:var(--azul-suave);font-weight:var(--p-fuerte);padding:9px 8px;border-bottom:1px solid var(--borde);}
.pres-tabla tr.pres-neto td{background:var(--navy);color:var(--ficha);font-weight:var(--p-max);padding:11px 8px;font-size:var(--t-sm);}
.pres-tabla tr.pres-neto td.et{font-size:var(--t-sm);font-weight:var(--p-fuerte);}
.pres-tabla tr.pres-neto .pos{color:var(--verde-sobre-navy);}
.pres-tabla tr.pres-neto .neg{color:var(--rojo-sobre-navy);}
.pres-tabla tr.pres-hucha .pos{color:var(--verde);}
.pres-tabla tr.pres-hucha .neg{color:var(--rojo-vivo);}
.pres-leyenda{display:flex;gap:20px;margin-top:12px;font-size:var(--t-xs);color:var(--sec);flex-wrap:wrap;align-items:center;}
.pres-leyenda .chip{display:inline-flex;align-items:center;gap:6px;}
.pres-leyenda .sw{width:11px;height:11px;border-radius:var(--r-sm);display:inline-block;}
@media (max-width:900px){
    .pres-cuatro{grid-template-columns:repeat(2,1fr);gap:16px 0;}
    .pres-cuatro .cel:nth-child(3){padding-left:0;border-left:none;}
    .pres-cuatro .cel.destaca{margin:0;border-radius:var(--r-md);padding:14px 18px;}
    .pres-anios{margin-left:0;}
  }
/* CRÉDITO · el color lo pone el ESTADO de la fila, no la columna.
     Un filo de 3px a la izquierda: se lee la lista entera de un vistazo
     sin que el color invada las cifras. Y el fondo de la tarjeta no se
     tiñe, que con seis proveedores sería una lista de semáforos. */
  /* Dos familias de clases SEPARADAS a proposito:
       cr-est-*  el estado de la fila (filo izquierdo + nombre)
       cr-bien/medio/mal  la cifra concreta que lleva el color
     Al principio era una sola, puesta en el <details>, y el nombre del
     proveedor salia teñido POR HERENCIA. Quedaba bien, pero por
     casualidad: cualquier texto que se añadiera dentro habria salido
     tambien de color sin que nadie lo hubiera decidido. */
  .cr-fila{border-left:3px solid transparent;}
.cr-fila.cr-est-bien{border-left-color:var(--verde);}
.cr-fila.cr-est-medio{border-left-color:var(--ambar);}
.cr-fila.cr-est-mal{border-left-color:var(--rojo-vivo);}
.cr-fila.cr-est-nada{border-left-color:var(--lin);}
/* El nombre acompaña al filo: con seis proveedores, el filo solo se
     ve en la periferia y el nombre es donde cae la vista. */
  .cr-fila.cr-est-bien  .fin-nm{color:var(--verde-hondo);}
.cr-fila.cr-est-medio .fin-nm{color:var(--ambar-hondo);}
.cr-fila.cr-est-mal   .fin-nm{color:var(--rojo-hondo);}
/* EL COLOR DE CADA CIFRA. Solo color: el tamaño y el peso los pone el
     contexto, arriba. Así una clase nueva no puede volver a crecer sola. */
  .fin-neu{color:var(--navy);}
.fin-ini{color:var(--sec);}
.fin-ent{color:var(--verde);}
.fin-sal{color:var(--rojo-vivo);}
.fin-tra{color:var(--azul-vivo);}
/* La raya del dato que no existe. Estaba en --gris-3, un gris casi
     blanco que sobre fondo blanco es invisible: parecía que faltaba el
     dato en vez de decir que no lo hay. */
  .fin-nada{color:var(--gris-4);}
.cr-bien{color:var(--verde);}
.cr-medio{color:var(--ambar-hondo);}
.cr-mal{color:var(--rojo-vivo);}
.fin-aviso-venc{display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 12px;background:var(--rojo-suave);border-left:2px solid var(--rojo-vivo);border-radius:var(--r-sm);font-size:var(--t-sm);}
.fin-aviso-venc i{color:var(--rojo-vivo);flex:none;}
.fin-ciclo .col{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.fin-ciclo .et{white-space:nowrap;}
.fin-ciclo .fin-ent, .fin-ciclo .fin-sal, .fin-ciclo .fin-tra, .fin-ciclo .fin-neu,
  .fin-ciclo .fin-ini, .fin-ciclo .fin-nada,
  .fin-ciclo .cr-bien, .fin-ciclo .cr-medio, .fin-ciclo .cr-mal{
    font-size:var(--t-sm);font-weight:var(--p-medio);}
@media (max-width:1220px){ .fin-ciclo{display:none;} }
/* El tamaño, el peso y el color viven ahora en estilo.css, en el
     componente .cabmod. Aquí solo queda lo específico de Finanzas. */
  .fin-cab-modulo .seg{border-top:1px solid var(--lin);margin-top:14px;padding-top:12px;font-size:var(--t-sm);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.fin-cab-modulo .seg i{font-style:normal;color:var(--sec);font-size:var(--t-xs);}
.fin-cab-modulo .seg .pt{color:var(--borde);}
.fin-cab-modulo .seg .cif{font-weight:var(--p-fuerte);}
.fin-cab-modulo .seg .ing{color:var(--verde-hondo);font-weight:var(--p-fuerte);}
.fin-cab-modulo .seg .gas{color:var(--alerta);font-weight:var(--p-fuerte);}
.fpanel-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.25rem;}
.fpanel-mod{padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
.fpanel-mod:hover{border:1.5px solid var(--verde);box-shadow:0 0 0 4px rgba(16,167,116,0.1);transform:translateY(-2px);}
.fpanel-mod .ic{font-size:var(--t-lg);color:var(--navy);transition:color .15s;}
.fpanel-mod:hover .ic{color:var(--verde);}
.fpanel-mod .nm{font-size:var(--t-md);font-weight:var(--p-medio);margin-top:12px;}
.fpanel-mod .dato{font-size:var(--t-sm);margin-top:3px;color:var(--sec);}
.fpanel-mod .dato.alert{color:var(--verde);}
.fpanel-box{padding:16px;}
.fpanel-box h5{margin:0 0 12px;font-size:var(--t-sm);letter-spacing:0.5px;color:rgba(13,42,65,0.85);text-transform:uppercase;font-weight:var(--p-fuerte);display:flex;align-items:center;gap:6px;}
.fpanel-pago{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--lin);cursor:pointer;}
.fpanel-pago:last-child{border-bottom:none;}
.fpanel-pago .izq{display:flex;align-items:center;gap:10px;}
.fpanel-pago .dot{width:8px;height:8px;border-radius:50%;background:var(--verde);}
.fpanel-pago .imp{font-weight:var(--p-medio);}
.fpanel-pago .fch{font-size:var(--t-xs);color:var(--sec);}
@media(max-width:640px){.fpanel-mods{grid-template-columns:1fr 1fr;}}
.sus-tabs{display:flex;gap:4px;border-bottom:1px solid var(--borde);margin-bottom:18px;}
.sus-tab{padding:10px 16px;font-size:var(--t-sm);color:var(--sec);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.sus-tab:hover{color:var(--navy);}
.sus-tab.on{color:var(--navy);font-weight:var(--p-fuerte);border-bottom-color:var(--navy);}
.sus-ficha .imp .mes{font-size:var(--t-xs);font-weight:var(--p-medio);color:var(--sec);margin-left:1px;}
.sus-ficha .pagado{font-size:var(--t-xs);color:var(--sec);margin-top:4px;}
.sus-aviso{display:flex;align-items:center;gap:12px;border-left:3px solid var(--ambar, var(--ambar));padding:12px 15px;margin-bottom:20px;}
.sus-aviso .ic{color:var(--ambar);font-size:var(--t-lg);flex:none;}
.sus-aviso .tx{flex:1;font-size:var(--t-sm);}
.sus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px;}
.sus-ficha{padding:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
.sus-ficha:hover{border:1.5px solid var(--verde);box-shadow:0 0 0 4px rgba(16,167,116,0.1);transform:translateY(-2px);}
.sus-ficha .fh{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.sus-ficha .nm{font-size:var(--t-md);font-weight:var(--p-fuerte);line-height:1.2;}
.sus-ficha .imp{font-size:var(--t-md);font-weight:var(--p-max);white-space:nowrap;}
.sus-ficha .tipo{font-size:var(--t-xs);letter-spacing:0.3px;text-transform:uppercase;color:var(--sec);margin-top:8px;}
.sus-ficha .cobro{font-size:var(--t-xs);color:var(--sec);margin-top:6px;display:flex;align-items:center;gap:6px;}
.sus-ficha .cobro .est{width:7px;height:7px;border-radius:50%;flex:none;}
.sus-est-ok{background:var(--verde);}
.sus-est-pronto{background:var(--ambar);}
.sus-est-alarma{background:var(--alerta);}
.sus-ficha .cobro.pronto{color:var(--ambar);font-weight:var(--p-fuerte);}
.sus-ficha .cobro.alarma{color:var(--alerta);font-weight:var(--p-fuerte);}
.sus-buscar{display:flex;align-items:center;gap:10px;padding:11px 15px;margin-top:10px;}
.sus-buscar i{font-size:var(--t-md);color:rgba(13,42,65,0.5);}
.sus-buscar input{border:none;outline:none;font-family:inherit;font-size:var(--t-sm);color:var(--navy);width:100%;background:transparent;}
@media(max-width:860px){.sus-grid{grid-template-columns:repeat(2,1fr);}}
/* ---- ficha de una suscripcion (resumen/editar, como Contactos) ---- */
  .sus-wrap{max-width:480px;margin:0 auto;}
.sus-cab-sub{display:flex;align-items:center;justify-content:center;gap:6px;}
.sus-switch{display:flex;background:var(--fondo);border-radius:var(--r-md);padding:3px;margin-bottom:20px;}
.sus-switch button{flex:1;border:none;background:transparent;font-family:inherit;font-size:var(--t-sm);color:var(--sec);padding:8px;border-radius:var(--r-sm);cursor:pointer;}
.sus-switch button.on{background:var(--ficha);color:var(--navy);font-weight:var(--p-fuerte);box-shadow:0 1px 2px var(--lin);}
.sus-cara{display:none;}
.sus-cara.on{display:block;}
.sus-dato{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--lin);font-size:var(--t-sm);}
.sus-dato:first-child{padding-top:0;}
.sus-dato .k{color:var(--sec);}
.sus-dato .v{font-weight:var(--p-medio);}
.sus-dato .v.imp{font-size:var(--t-md);font-weight:var(--p-max);}
.sus-hist-tit{font-size:var(--t-xs);letter-spacing:0.5px;text-transform:uppercase;color:rgba(13,42,65,0.85);font-weight:var(--p-fuerte);margin:22px 0 4px;display:flex;align-items:baseline;justify-content:space-between;}
.sus-hist-tit .tot{font-size:var(--t-xs);color:var(--sec);font-weight:var(--p-medio);text-transform:none;letter-spacing:0;}
.pres-hero{margin-bottom:30px;}
.pres-plan-box{background:var(--navy);color:var(--ficha);border-radius:var(--r-md);padding:18px 20px;margin-bottom:22px;}
.pres-plan-box .eyebrow{font-size:var(--t-sm);color:rgba(255,255,255,0.65);margin-bottom:6px;}
.pres-plan-box .cifra{font-size:var(--t-xl);font-weight:var(--p-max);letter-spacing:-0.5px;line-height:1;}
.pres-plan-box .cifra span{font-size:var(--t-sm);font-weight:var(--p-medio);color:rgba(255,255,255,0.75);margin-left:8px;}
.pres-plan-box .pie{font-size:var(--t-xs);color:rgba(255,255,255,0.55);margin-top:8px;}
.pres-ingresos-resumen{background:var(--verde-suave);border:1px solid rgba(16,167,116,0.25);border-radius:var(--r-md);padding:16px 18px;margin-bottom:26px;}
.pres-ingresos-resumen .eyebrow{font-size:var(--t-sm);color:var(--sec);margin-bottom:4px;}
.pres-ingresos-resumen .pie{font-size:var(--t-xs);color:var(--sec);margin-top:4px;}
.pres-hero .eyebrow{font-size:var(--t-sm);color:var(--sec);margin-bottom:6px;}
.pres-hero .cifra{font-size:var(--t-2xl);font-weight:var(--p-fuerte);letter-spacing:-0.5px;line-height:1;}
.pres-hero .cifra span{font-size:var(--t-md);font-weight:var(--p-medio);color:var(--sec);margin-left:8px;}
.pres-barra-total{position:relative;height:6px;border-radius:var(--r-sm);background:var(--lin);margin:16px 0 8px;}
.pres-barra-total .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-sm);background:var(--navy);}
.pres-barra-total .ritmo{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:var(--r-sm);background:rgba(13,42,65,0.32);}
.pres-hero .pie{font-size:var(--t-xs);color:var(--sec);}
.pres-grupo{margin-top:30px;}
.pres-grupo:first-of-type{margin-top:0;}
.pres-grupo-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;padding-bottom:8px;border-bottom:1.5px solid rgba(13,42,65,0.14);}
.pres-grupo-cab i{font-size:var(--t-sm);color:var(--navy);}
.pres-grupo-cab .nm{font-size:var(--t-sm);letter-spacing:0.4px;text-transform:uppercase;color:var(--navy);font-weight:var(--p-max);}
.pres-grupo-cab .tot{margin-left:auto;font-size:var(--t-sm);color:var(--sec);}
.pres-grupo-cab .tot b{color:var(--navy);font-weight:var(--p-fuerte);}
.pres-cat{margin-bottom:10px;overflow:hidden;}
.pres-cat > summary{list-style:none;cursor:pointer;}
.pres-cat > summary::-webkit-details-marker{display:none;}
.pres-cab{display:flex;align-items:center;gap:12px;padding:13px 16px;}
.pres-cab .cat-nm{font-size:var(--t-md);font-weight:var(--p-medio);}
.pres-cab .cat-sub{font-size:var(--t-xs);color:var(--sec);margin-left:6px;}
.pres-cab .cat-warn{font-size:var(--t-xs);font-weight:var(--p-fuerte);letter-spacing:0.2px;text-transform:uppercase;color:var(--alerta);background:var(--rojo-suave);border-radius:var(--r-lg);padding:2px 8px;margin-left:6px;}
.pres-cat-der{margin-left:auto;text-align:right;}
.pres-cat-der .cifra{font-size:var(--t-sm);}
.pres-cat-der .cifra b{font-weight:var(--p-fuerte);}
.pres-cat-der .cifra .sobre{color:var(--alerta);}
.pres-cat-der .mini{width:66px;height:5px;border-radius:var(--r-sm);background:rgba(13,42,65,0.09);margin-top:6px;margin-left:auto;position:relative;}
.pres-cat-der .mini .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-sm);background:var(--navy);}
.pres-cat-der .mini .fill.sobre{background:var(--alerta);}
.pres-body{background:var(--fondo);border-top:1px solid var(--lin);}
.pres-sub{display:flex;align-items:center;gap:11px;padding:10px 16px 10px 46px;border-bottom:1px solid rgba(13,42,65,0.05);cursor:pointer;}
.pres-sub:last-of-type{border-bottom:none;}
.pres-sub:hover{background:rgba(13,42,65,0.03);}
.pres-sub-nm{flex:1;font-size:var(--t-sm);}
.pres-sub-der{text-align:right;}
.pres-sub-der .cifra{font-size:var(--t-sm);color:var(--sec);}
.pres-sub-der .cifra b{font-weight:var(--p-fuerte);color:var(--navy);}
.pres-sub-der .cifra b.sobre{color:var(--alerta);}
.pres-sub-der .mini{width:56px;height:4px;border-radius:var(--r-sm);background:rgba(13,42,65,0.1);margin-top:5px;margin-left:auto;position:relative;}
.pres-sub-der .mini .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-sm);background:rgba(13,42,65,0.5);}
.pres-sub-der .mini .fill.sobre{background:var(--alerta);}
.pres-vacio{padding:14px 16px 16px 46px;cursor:pointer;}
.pres-vacio:hover{background:rgba(13,42,65,0.02);}
.pres-vacio .txt{font-size:var(--t-sm);color:var(--sec);margin-bottom:8px;}
.pres-add-sub{display:flex;align-items:center;gap:8px;padding:11px 16px 13px 46px;color:rgba(13,42,65,0.42);font-size:var(--t-sm);cursor:pointer;}
.pres-add-sub:hover{color:var(--verde);}

/* ============================================================
   CRÉDITO · LIQUIDADOS APARTE (v17.2)
   Pestañas Activos/Liquidados y el histórico agrupado por
   financiera. Sin un solo hexadecimal: todo desde los tokens.
   ============================================================ */
.fin-cred-tabs{margin-bottom:14px;}
.fin-cargando{padding:36px;text-align:center;color:var(--sec);font-size:var(--t-sm);}

/* Verde y no navy en el icono de la cabecera: aquí el verde no es
   "acción", es "esto ya está hecho", que es su otro significado
   legítimo en la aplicación. */
.cabmod-ic--ok{background:var(--verde-claro);color:var(--verde-hondo);}

.fin-liq-anios{margin-left:auto;display:flex;gap:5px;align-self:flex-start;}
.fin-liq-anio{font-family:inherit;font-size:var(--t-xs);color:var(--sec);
  background:var(--fondo);border:none;border-radius:var(--r-lg);padding:5px 12px;cursor:pointer;}
.fin-liq-anio:hover{color:var(--navy);}
.fin-liq-anio.on{background:var(--navy);color:var(--ficha);}

/* Tarjeta de financiera liquidada: la MISMA que en Activos (.fin-cta),
   con el filete verde en vez del semáforo de deuda. Aquí el verde no es
   "acción", es "esto ya está hecho", que es su otro significado legítimo
   en la aplicación. */
.cr-liq{border-left:3px solid var(--verde);}

/* ============================================================
   CLASES PARA LO QUE ESTABA EN LÍNEA (v18.01)
   ------------------------------------------------------------
   Los patrones que se repetían como style= dentro del JavaScript de
   Crédito. Los DINÁMICOS —el color del proyecto, la altura de un
   evento— se quedan en línea a propósito: dependen del dato y no
   pueden vivir en una hoja.
   ============================================================ */
.fin-t-xs-sec{font-size:var(--t-xs);color:var(--sec);}
.fin-t-sm-sec{font-size:var(--t-sm);color:var(--sec);}
.fin-t-sm-fuerte{font-size:var(--t-sm);font-weight:var(--p-fuerte);}
.fin-chev-fila{font-size:var(--t-sm);color:var(--navy-suave);flex:none;}
.fin-ref{font-family:monospace;font-size:var(--t-sm);color:var(--sec);}

/* El "Añadir partida" cuando va dentro del bloque .pres-vacio, que ya
   del bloque .pres-vacio, que ya trae su propio relleno. (Antes esto era
   un style="padding:0" en línea.) */
.pres-add-sub--pegado{padding:0;}

/* Traer cuotas de Crédito y Suscripciones (18.05). Se distingue de
   "Nueva categoría" con el filete verde: no crea nada tuyo, trae lo que
   ya está en otra parte de la aplicación. */
.pres-recalc{border-left:3px solid var(--verde);color:var(--verde-hondo);margin-top:8px;}
.pres-recalc i{color:var(--verde);}