/* Mi Día a Futuro: estilos básicos, mobile-first. Todo el diseño sale de las variables de :root. */

:root {
    /* Colores: carbón + rojo de marca sobre fondo claro cálido */
    --color-oscuro: #17171c;
    --color-oscuro-2: #2a2a32;
    --color-sobre-oscuro: #ffffff;
    --color-sobre-oscuro-suave: #a9a6b0;
    --color-fondo: #f6f3f1;
    --color-superficie: #ffffff;
    --color-texto: #1a1a1f;
    --color-texto-suave: #6b6770;
    --color-borde: #e8e2de;
    --color-borde-campo: #d9d1cc;
    --color-primario: #e63946;
    --color-primario-hover: #cf2c39;
    --color-primario-tenue: #fdecee;
    --color-icono-hero: #ff5a67; /* trazo rojo claro de los iconos sobre fondo oscuro */
    --color-primario-texto: #ffffff;
    --color-enlace: #c2202e;
    --color-peligro: #a4161a;
    --color-exito: #17784d;
    --color-aviso: #9a6700;
    --color-aviso-texto: #8a5a00; /* ámbar legible (>= 4,5:1) sobre --color-aviso-tenue */
    --color-aviso-tenue: #fff4dc;
    --color-info: #1c5fa8;

    /* Espaciados */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.5rem;
    --espacio-6: 2rem;

    /* Radios y sombras */
    --radio: 1rem;
    --radio-chico: 0.75rem;
    --radio-campo: 0.875rem;
    --radio-grande: 1.625rem;
    --radio-hero: 2rem;
    --radio-tarjeta: 1.5rem;
    --sombra: none;
    --sombra-flotante: 0 6px 18px rgba(23, 23, 28, 0.28);
    --sombra-tarjeta: 0 10px 30px rgba(23, 23, 28, 0.10);

    /* Tipografía */
    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --texto-base: 1rem;
    --texto-chico: 0.875rem;
    --texto-titulo: 1.25rem;

    /* Medidas de layout */
    --alto-cabecera: 3.5rem;
    --alto-nav: 4rem;
    --margen-nav: 0.75rem;
    --ancho-max: 40rem;
    --alto-toque: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: var(--texto-base);
    line-height: 1.45;
    color: var(--color-texto);
    background: var(--color-fondo);
}

a { color: var(--color-enlace); }

:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }

/* Estructura general: toda página abre con un hero oscuro (propio, o la cabecera compacta por defecto del layout) */
.hero {
    /* el hero trae su propia cabecera: deja sitio a la zona segura y a las tarjetas que lo solapan */
    padding: calc(var(--espacio-4) + env(safe-area-inset-top, 0px)) var(--espacio-4) 5.25rem;
    background: var(--color-oscuro);
    color: var(--color-sobre-oscuro);
    border-radius: 0 0 var(--radio-hero) var(--radio-hero);
    /* el semáforo se ve sobre oscuro con tonos más claros */
    --color-semaforo-verde: #3ddc97;
    --color-semaforo-amarillo: #f5b942;
    --color-semaforo-rojo: #ff6b76;
}

.hero .texto-suave { color: var(--color-sobre-oscuro-suave); }
.hero-etiqueta { margin: var(--espacio-5) 0 0; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-sobre-oscuro-suave); text-align: center; }
.hero-contenido { max-width: var(--ancho-max); margin: 0 auto; }
.hero-fila { display: flex; align-items: center; gap: var(--espacio-3); }
.hero-marca { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 0.2rem; background: var(--color-primario); }
.hero-textos { display: flex; flex-direction: column; min-width: 0; }
.hero-app { font-size: 0.75rem; color: var(--color-sobre-oscuro-suave); }
.hero-titulo { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.hero-chip-fila { display: flex; justify-content: center; margin: var(--espacio-3) 0 0; }
.hero-chip { display: inline-flex; align-items: center; gap: var(--espacio-2); max-width: 100%; padding: 0.4375rem 0.875rem; border-radius: 999px; background: var(--color-oscuro-2); font-size: var(--texto-chico); font-weight: 600; text-align: left; }
.hero-chip::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.hero-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2); margin-top: var(--espacio-5); }
.hero-ficha { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--espacio-3); border-radius: var(--radio); background: var(--color-oscuro-2); min-width: 0; }
.hero-ficha-etiqueta { font-size: 0.75rem; color: var(--color-sobre-oscuro-suave); }
.hero-ficha-valor { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero-dia { display: flex; align-items: center; gap: var(--espacio-3); margin-top: var(--espacio-4); font-size: 0.75rem; color: var(--color-sobre-oscuro-suave); }
.hero-dia .barra-fina { flex: 1; }
.hero-enlace { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--espacio-1); color: var(--color-sobre-oscuro); font-weight: 600; text-decoration: none; }
.hero-enlace:hover { text-decoration: underline; }

.contenido {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: var(--espacio-4);
    /* espacio para la navegación flotante (que ya incluye el botón "+") */
    padding-bottom: calc(var(--alto-nav) + var(--margen-nav) + var(--espacio-5) + env(safe-area-inset-bottom, 0px));
}

/* Con hero: el contenido sube y las tarjetas solapan el hero */
.contenido-con-hero { margin-top: -3.75rem; padding-top: 0; position: relative; }

/* Navegación inferior: píldora oscura flotante */
.nav-inferior {
    position: fixed;
    left: 50%;
    bottom: calc(var(--margen-nav) + env(safe-area-inset-bottom, 0));
    z-index: 20;
    transform: translateX(-50%);
    width: calc(100% - var(--margen-nav) * 2);
    max-width: calc(var(--ancho-max) - var(--margen-nav) * 2);
    height: var(--alto-nav);
    display: flex;
    align-items: center;
    padding: 0 var(--espacio-1);
    background: var(--color-oscuro);
    border-radius: calc(var(--alto-nav) / 2);
    box-shadow: var(--sombra-flotante);
}

.nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 2.75rem;
    height: 3.25rem;
    padding: var(--espacio-1) 0;
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: var(--color-sobre-oscuro-suave);
    border-radius: 1.625rem;
}

@media (max-width: 23.5rem) { .nav-item { font-size: 0.5625rem; } }

.nav-icono { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nav-item-activo {
    color: var(--color-sobre-oscuro);
    font-weight: 600;
    background: var(--color-oscuro-2);
}

.nav-item-activo .nav-icono { stroke: #ff5a67; }
.nav-item-deshabilitado { opacity: 0.45; }


/* Tarjeta: blanca, sin borde, radio 24 */
.tarjeta {
    background: var(--color-superficie);
    border: 0;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    padding: 1.25rem;
    margin-bottom: var(--espacio-3);
}

.tarjeta-titulo {
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-chico);
    font-weight: 700;
    color: var(--color-texto-suave);
}

/* Alertas y flash: bloque suave con tinte y trazo del color del estado */
.alerta {
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio);
    border: 1px solid;
    margin-bottom: var(--espacio-3);
    background: var(--color-superficie);
    font-size: var(--texto-chico);
}

.alerta-exito { color: var(--color-exito); border-color: var(--color-exito); background: var(--color-tinte-ingreso); }
.alerta-error { color: var(--color-peligro); border-color: var(--color-peligro); background: var(--color-primario-tenue); }
.alerta-aviso { color: var(--color-aviso-texto); border-color: var(--color-aviso); background: var(--color-aviso-tenue); }
.alerta-info { color: var(--color-info); border-color: var(--color-info); background: var(--color-tinte-info); }

/* Formularios: campos de 48px, radio 14, etiqueta clara */
.campo { margin-bottom: var(--espacio-4); }

.campo-etiqueta {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-texto-suave);
}

.campo-input {
    width: 100%;
    min-height: var(--alto-toque);
    padding: var(--espacio-2) var(--espacio-4);
    font: inherit;
    color: inherit;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-campo);
}

.campo-input:focus-visible {
    border-color: var(--color-primario);
    outline: 2px solid var(--color-primario);
    outline-offset: 0;
}

.campo-con-error .campo-input { border-color: var(--color-peligro); border-width: 1.5px; background: var(--color-primario-tenue); }

.campo-error {
    margin: 0.375rem 0 0;
    font-size: var(--texto-chico);
    font-weight: 600;
    color: var(--color-peligro);
}

.campo-check {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.campo-check input, .barra-progreso { accent-color: var(--color-primario); }

/* Botones: el rojo es la acción principal; el carbón, lo secundario */
.boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--alto-toque);
    padding: var(--espacio-2) var(--espacio-4);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--radio-campo);
    cursor: pointer;
}

/* Primario: rojo de marca; el hover/pulsado usa el rojo oscuro (contraste 4,5:1 con texto blanco) */
.boton-primario { background: var(--color-primario-hover); color: var(--color-primario-texto); }
.boton-primario:hover { background: var(--color-peligro); }
.boton-secundario { background: var(--color-superficie); color: var(--color-texto); border-color: var(--color-borde-campo); }
.boton-secundario:hover { border-color: var(--color-oscuro); }
.boton-peligro { background: var(--color-peligro); color: var(--color-primario-texto); }
.boton-peligro:hover { background: #8a1115; }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }

/* Lista vacía: tarjeta blanca suave con el botón centrado */
.lista-vacia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-5) var(--espacio-4);
    background: var(--color-superficie);
    border-radius: var(--radio-tarjeta);
    text-align: center;
    color: var(--color-texto-suave);
}
.lista-vacia p { margin: 0; }
.lista-vacia .boton { width: auto; min-width: 12rem; }

/* Login: parte superior carbón con la marca y tarjeta blanca de formulario */
.pagina-auth { display: flex; min-height: 100vh; background: var(--color-oscuro); }

.auth-contenedor {
    width: 100%;
    max-width: 26rem;
    margin: auto;
    padding: var(--espacio-5) var(--espacio-4);
}

.auth-marca { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-3); margin-bottom: var(--espacio-5); color: var(--color-sobre-oscuro); text-align: center; }
.auth-marca-logo { width: 1.25rem; height: 1.25rem; border-radius: 0.4rem; background: var(--color-primario); }
.auth-marca-nombre { margin: 0; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.auth-tarjeta { padding: var(--espacio-5); border: 0; border-radius: var(--radio-hero); }
.auth-titulo { margin: 0 0 var(--espacio-1); font-size: 1.25rem; font-weight: 700; }

.auth-subtitulo {
    margin: 0 0 var(--espacio-5);
    color: var(--color-texto-suave);
}
.auth-tarjeta .boton { min-height: 3.5rem; font-size: 1.0625rem; border-radius: 1.125rem; }

/* ---- Fase 1: cuentas, movimientos y registro rápido ---- */
:root {
    --color-positivo: var(--color-exito);
    --color-negativo: var(--color-peligro);
}

.texto-suave { color: var(--color-texto-suave); }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-2); margin-bottom: var(--espacio-2); }
.form-secundario { margin-top: var(--espacio-3); }
.boton + .boton { margin-top: var(--espacio-2); }

.texto-destacado { margin: 0 0 var(--espacio-2); font-size: 1.15rem; font-weight: 600; }

/* Botón flotante "+" */
.fab-menu { position: relative; flex: none; margin: 0 var(--espacio-1); }
.fab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-primario-texto);
    background: var(--color-primario);
    border-radius: 50%;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.fab::-webkit-details-marker { display: none; }
.fab-menu[open] > .fab { transform: rotate(45deg); }
.fab-icono { width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Menú rápido del "+": panel flotante encima de la barra inferior */
.fab-panel {
    position: absolute;
    bottom: calc(100% + var(--espacio-3));
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    width: min(17rem, calc(100vw - var(--margen-nav) * 4));
    padding: var(--espacio-2);
    background: var(--color-superficie);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-flotante);
}
.fab-opcion {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 2.75rem;
    padding: 0 var(--espacio-3);
    border-radius: var(--radio);
    color: var(--color-texto);
    font-weight: 600;
    text-decoration: none;
}
.fab-opcion:hover { background: var(--color-fondo); color: var(--color-texto); }
.fab-opcion-principal { color: var(--color-enlace); }
.fab-opcion-icono { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 0.625rem; background: var(--color-fondo); }
.fab-opcion-icono svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Registro rápido */
/* Pestañas: control segmentado carbón con el segmento activo en blanco (igual que .hero-segmentos) */
.pestanas { display: flex; gap: 0.375rem; padding: var(--espacio-1); margin-bottom: var(--espacio-4); background: var(--color-oscuro); border-radius: 1.375rem; }

.pestana {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alto-segmento);
    padding: 0 var(--espacio-3);
    font-size: 0.8125rem;
    text-align: center;
    text-decoration: none;
    color: var(--color-sobre-oscuro-suave);
    border-radius: 1.125rem;
}

.pestana:hover { color: var(--color-sobre-oscuro); }
.pestana:focus-visible { outline-color: var(--color-icono-hero); }
.pestana-activa, .pestana-activa:hover { color: var(--color-oscuro); background: var(--color-superficie); font-weight: 600; }

.campo-monto .campo-input { min-height: 4rem; font-size: 2rem; font-weight: 700; text-align: center; }

.categorias { border: 0; padding: 0; margin: 0 0 var(--espacio-4); }
.categorias-botones { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espacio-2); }
.categoria-boton { position: relative; }
.categoria-boton input { position: absolute; opacity: 0; inset: 0; }

.categoria-boton span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alto-toque);
    padding: var(--espacio-2);
    text-align: center;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-chico);
}

.categoria-boton input:checked + span { color: var(--color-peligro); background: var(--color-primario-tenue); border: 1.5px solid var(--color-primario); font-weight: 600; }
.categoria-boton input:focus-visible + span { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.confirmacion-intocable { padding: var(--espacio-3); border: 1px solid var(--color-aviso); border-radius: var(--radio-chico); color: var(--color-aviso); }

/* Lista de movimientos */
.filtros { margin-bottom: var(--espacio-4); }
.dia-titulo { margin: var(--espacio-4) 0 var(--espacio-1); font-size: var(--texto-chico); text-transform: capitalize; color: var(--color-texto-suave); }
.lista-movimientos { margin: 0; padding: var(--espacio-1) var(--espacio-4); list-style: none; background: var(--color-superficie); border: 0; border-radius: var(--radio-tarjeta); }
.enlace-editar { font-size: var(--texto-chico); }

/* Estados (obligaciones, créditos, metas) */
.estado { display: inline-block; margin-left: var(--espacio-2); padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.3; background: var(--color-linea-suave); border-radius: 999px; }
.estado-atrasada { color: var(--color-peligro); background: var(--color-primario-tenue); }
.estado-por_vencer { color: var(--color-aviso-texto); background: var(--color-aviso-tenue); }
.estado-pagada { color: var(--color-exito); background: var(--color-tinte-ingreso); }
.estado-pendiente { color: var(--color-texto-suave); }

/* ---- Fase 3B: créditos ---- */

/* Pestañas que se desplazan en horizontal dentro de su contenedor (no desbordan la página) */
.pestanas-desplazables { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pestanas-desplazables { scrollbar-width: none; }
.pestanas-desplazables::-webkit-scrollbar { display: none; }
.pestanas-desplazables .pestana { flex: 0 0 auto; white-space: nowrap; padding: 0 var(--espacio-4); }

/* Tablas anchas: el scroll horizontal vive dentro del contenedor */
.tabla-contenedor { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--espacio-4); background: var(--color-superficie); border: 0; border-radius: var(--radio-tarjeta); }
.tabla-contenedor:focus-visible { outline-offset: -2px; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-chico); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla th, .tabla td { padding: 0.75rem var(--espacio-3); text-align: right; border-bottom: 1px solid var(--color-linea-suave); }
.tabla th:first-child, .tabla td:first-child { padding-left: var(--espacio-4); text-align: left; }
.tabla th:last-child, .tabla td:last-child { padding-right: var(--espacio-4); }
.tabla thead th { background: var(--color-fondo); color: var(--color-texto-suave); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tabla tfoot td { font-weight: 700; border-bottom: 0; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.celda-faltante { color: var(--color-peligro); font-weight: 600; }
.celda-sobrante { color: var(--color-aviso); font-weight: 600; }

/* Datos clave/valor (resumen, desglose de la papeleta) */
.datos { margin: 0; }
.datos-fila { display: flex; justify-content: space-between; gap: var(--espacio-3); padding: 0.625rem 0; border-bottom: 1px solid var(--color-linea-suave); }
.datos-fila:last-child { border-bottom: 0; }
.datos-fila dt { font-size: var(--texto-chico); color: var(--color-texto-suave); }
.datos-fila dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.datos-fila-total dt, .datos-fila-total dd { color: var(--color-texto); font-weight: 700; }

.barra-progreso { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 0.5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--color-fondo); accent-color: var(--color-primario); }
.barra-progreso::-webkit-progress-bar { background: var(--color-fondo); border-radius: 999px; }
.barra-progreso::-webkit-progress-value { background: var(--color-primario); border-radius: 999px; }
.barra-progreso::-moz-progress-bar { background: var(--color-primario); border-radius: 999px; }

/* Lista de créditos */
.lista-creditos { margin: 0 0 var(--espacio-4); padding: 0; list-style: none; }
/* Filas-tarjeta (crédito, trabajo): blancas, sin borde, con franja de estado a la izquierda (--franja) */
.credito { --franja: var(--color-oscuro); padding: var(--espacio-4); margin-bottom: var(--espacio-2); background: var(--color-superficie); border: 0; border-radius: var(--radio-tarjeta); box-shadow: inset 0.25rem 0 0 var(--franja); }
.credito-cancelado { --franja: var(--color-exito); }
.credito-archivado { opacity: 0.65; --franja: var(--color-borde-campo); }
.credito-enlace { display: block; min-height: var(--tamano-toque); color: inherit; text-decoration: none; }
.credito-enlace:focus-visible { outline-offset: 0.25rem; border-radius: var(--radio); }
.credito-titulo { display: flex; justify-content: space-between; gap: var(--espacio-3); font-weight: 600; }
.credito-detalle { font-size: var(--texto-chico); color: var(--color-texto-suave); }
.estado-credito-activo { color: var(--color-texto); }
.estado-credito-cancelado { color: var(--color-exito); }
.estado-credito-archivado { color: var(--color-texto-suave); }


/* Gráficas */
.grafica { position: relative; height: 18rem; }
.grafica canvas { max-width: 100%; }
.campos-en-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-3); }
.accion-peligro { margin-top: var(--espacio-4); }

/* ---- Trabajos y rendimiento ---- */
.trabajo { --franja: var(--color-exito); padding: var(--espacio-4); margin-bottom: var(--espacio-2); background: var(--color-superficie); border: 0; border-radius: var(--radio-tarjeta); box-shadow: inset 0.25rem 0 0 var(--franja); }
.trabajo-pendiente { --franja: var(--color-peligro); }
.trabajo-en_curso { --franja: var(--color-aviso); }
.reloj { font-variant-numeric: tabular-nums; font-weight: 700; }
.reloj-grande { margin: 0 0 var(--espacio-2); font-size: 2.5rem; text-align: center; }
.detalles-extra { margin-bottom: var(--espacio-4); }
.pocos-datos { padding: 0 var(--espacio-1); color: var(--color-aviso); border: 1px solid currentColor; border-radius: var(--radio-chico); }

/* Dashboard (Fase 6) */
:root {
    --color-semaforo-verde: var(--color-exito);
    --color-semaforo-amarillo: var(--color-aviso);
    --color-semaforo-rojo: var(--color-peligro);
}
.medidor-caja { position: relative; width: min(16.25rem, 100%); margin: var(--espacio-2) auto 0; aspect-ratio: 260 / 150; }
.medidor { display: block; width: 100%; height: auto; }
.medidor-pista, .medidor-arco { fill: none; stroke-width: 18; stroke-linecap: round; }
.medidor-pista { stroke: var(--color-borde); }
.hero .medidor-pista { stroke: var(--color-oscuro-2); }
.hero .medidor-marca { stroke: var(--color-sobre-oscuro); }
.medidor-arco { stroke: var(--color-texto-suave); }
.medidor-verde .medidor-arco { stroke: var(--color-semaforo-verde); }
.medidor-amarillo .medidor-arco { stroke: var(--color-semaforo-amarillo); }
.medidor-rojo .medidor-arco { stroke: var(--color-semaforo-rojo); }
.medidor-marca { stroke: var(--color-texto); stroke-width: 3; stroke-linecap: round; }
.medidor-centro { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.medidor-cifra { font-size: 3.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.medidor-unidad { font-size: 1.5rem; color: var(--color-sobre-oscuro-suave); }
.medidor-leyenda { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--color-sobre-oscuro-suave); }
.mensaje-verde { color: var(--color-semaforo-verde); }
.mensaje-amarillo { color: var(--color-semaforo-amarillo); }
.mensaje-rojo { color: var(--color-semaforo-rojo); }
.total-negativo { color: var(--color-peligro); }
.aviso-negativo { margin: 0 0 var(--espacio-2); color: var(--color-peligro); font-weight: 600; }
.desglose { margin-top: var(--espacio-2); }
.desglose summary, .detalles-extra summary { display: flex; align-items: center; gap: var(--espacio-2); min-height: var(--tamano-toque); padding: var(--espacio-2) 0; font-weight: 600; font-size: var(--texto-chico); color: var(--color-enlace); cursor: pointer; list-style: none; }
.desglose summary::-webkit-details-marker, .detalles-extra summary::-webkit-details-marker { display: none; }
.desglose summary::before, .detalles-extra summary::before { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.desglose[open] > summary::before, .detalles-extra[open] > summary::before { transform: rotate(45deg); }
.datos-fila dd a, .datos-fila dt a { color: inherit; text-decoration-color: var(--color-borde-campo); text-underline-offset: 0.2em; }
.nota-suave { margin: var(--espacio-2) 0 0; font-size: var(--texto-chico); color: var(--color-texto-suave); }

/* ---- Inicio rediseñado: tarjetas blancas sobre el hero ---- */
:root { --color-semaforo-rojo-claro: #ff6b76; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mensaje-sin_meta { color: var(--color-sobre-oscuro-suave); }
.hero .medidor-sin_meta .medidor-arco { stroke: var(--color-sobre-oscuro-suave); }

progress.barra-fina, progress.barra-limite, progress.barra-meta { appearance: none; -webkit-appearance: none; display: block; width: 100%; border: 0; overflow: hidden; background: var(--color-fondo); }
progress.barra-fina::-webkit-progress-bar, progress.barra-limite::-webkit-progress-bar, progress.barra-meta::-webkit-progress-bar { background: var(--color-fondo); border-radius: 999px; }
progress.barra-fina { height: 0.25rem; border-radius: 999px; background: var(--color-oscuro-2); }
progress.barra-fina::-webkit-progress-bar { background: var(--color-oscuro-2); }
progress.barra-fina::-webkit-progress-value { background: var(--color-sobre-oscuro-suave); border-radius: 999px; }
progress.barra-fina::-moz-progress-bar { background: var(--color-sobre-oscuro-suave); border-radius: 999px; }
progress.barra-limite { height: 0.625rem; border-radius: 999px; margin-top: var(--espacio-3); }
progress.barra-limite::-webkit-progress-value { background: var(--color-oscuro); border-radius: 999px; }
progress.barra-limite::-moz-progress-bar { background: var(--color-oscuro); border-radius: 999px; }
progress.barra-limite-excedido::-webkit-progress-value { background: var(--color-peligro); }
progress.barra-limite-excedido::-moz-progress-bar { background: var(--color-peligro); }
progress.barra-meta { height: 0.5rem; border-radius: 999px; }
progress.barra-meta::-webkit-progress-value { background: var(--color-primario); border-radius: 999px; }
progress.barra-meta::-moz-progress-bar { background: var(--color-primario); border-radius: 999px; }

.tarjeta-inicio { padding: 1.25rem; margin-bottom: var(--espacio-3); border: 0; border-radius: var(--radio-tarjeta); }
.tarjeta-elevada { box-shadow: var(--sombra-tarjeta); }
.tarjeta-inicio > .tarjeta-titulo { margin-bottom: var(--espacio-3); }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); }
.tarjeta-cabecera .tarjeta-titulo { margin: 0; }
.tarjeta-enlace { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.tarjeta-nota { font-size: 0.75rem; color: var(--color-texto-suave); }
.tarjeta-inicio .desglose { margin-top: 0; }

.importe-grande { margin: 0 0 var(--espacio-3); font-size: 2.375rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.importe-medio { margin: 0; font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.importe-medio a { color: inherit; text-decoration: none; }

/* Barra segmentada del dinero libre */
:root {
    --color-seg-libre: var(--color-primario);
    --color-seg-intocable: var(--color-oscuro);
    --color-seg-obligaciones: #8a8590;
    --color-seg-metas: #d9d1cc;
}
.seg-libre { --seg: var(--color-seg-libre); }
.seg-intocable { --seg: var(--color-seg-intocable); }
.seg-obligaciones { --seg: var(--color-seg-obligaciones); }
.seg-metas { --seg: var(--color-seg-metas); }
.barra-segmentos { display: block; width: 100%; height: 0.75rem; overflow: hidden; border-radius: 0.375rem; background: var(--color-fondo); }
rect.seg { fill: var(--seg); stroke: var(--color-superficie); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.leyenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3) var(--espacio-4); margin: var(--espacio-4) 0 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.leyenda li { display: flex; align-items: center; gap: var(--espacio-2); min-width: 0; }
.leyenda-punto { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; background: var(--seg); }
.leyenda-texto { flex: 1; min-width: 0; color: var(--color-texto-suave); }
.leyenda-valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.pie-total { display: flex; justify-content: space-between; gap: var(--espacio-3); margin: var(--espacio-4) 0 0; padding-top: var(--espacio-3); border-top: 1px solid var(--color-borde); font-size: 0.8125rem; color: var(--color-texto-suave); }
.pie-total a { color: inherit; }
.pie-valor { font-weight: 600; color: var(--color-texto); font-variant-numeric: tabular-nums; }

/* Límite de hoy */
.limite-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espacio-1) var(--espacio-3); margin-top: var(--espacio-1); }
.limite-detalle { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }

/* Hoy y este mes */
.resumen-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); }
.resumen-ficha { display: flex; flex-direction: column; gap: var(--espacio-2); padding: 0.875rem; border-radius: var(--radio); background: var(--color-fondo); min-width: 0; }
.resumen-etiqueta { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texto-suave); }
.resumen-fila { display: flex; justify-content: space-between; gap: var(--espacio-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.resumen-fila > span:first-child { color: var(--color-texto-suave); }
.resumen-fila a { color: inherit; font-weight: 600; text-decoration: none; text-align: right; }
.resumen-fila .resumen-ingreso { color: var(--color-exito); }
.resumen-neto { padding-top: var(--espacio-2); border-top: 1px solid var(--color-borde); font-size: 0.875rem; }
.resumen-neto > span:first-child { color: var(--color-texto); font-weight: 600; }

/* Vencimientos */
.lista-venc { margin: var(--espacio-2) 0 0; padding: 0; list-style: none; }
.venc { display: flex; align-items: center; gap: var(--espacio-3); padding: 0.625rem 0; border-bottom: 1px solid var(--color-borde); }
.venc:last-child { border-bottom: 0; }
.venc-fecha { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2.875rem; height: 3.125rem; border-radius: 0.875rem; background: var(--color-fondo); color: var(--color-texto); }
.venc-dia { font-size: 1.0625rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.venc-mes { font-size: 0.6875rem; font-weight: 600; }
.venc-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.venc-nombre { font-weight: 600; overflow-wrap: anywhere; }
.venc-estado { font-size: 0.75rem; color: var(--color-texto-suave); }
.venc-lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--espacio-1); }
.venc-monto { font-weight: 600; font-variant-numeric: tabular-nums; }
.venc .boton { width: auto; min-height: 2.75rem; padding: 0 var(--espacio-4); font-size: var(--texto-chico); }
.venc-atrasada .venc-fecha { background: var(--color-primario-tenue); color: var(--color-peligro); }
.venc-atrasada .venc-estado { color: var(--color-peligro); font-weight: 600; }
.venc-pronto .venc-fecha { background: var(--color-aviso-tenue); color: var(--color-aviso-texto); }
.venc-pronto .venc-estado { color: var(--color-aviso-texto); font-weight: 600; }

/* Por cobrar y patrimonio */
.duo-enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3); margin-bottom: var(--espacio-3); }
.ficha-enlace { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; min-height: 2.75rem; padding: 1.125rem; border-radius: var(--radio-tarjeta); background: var(--color-superficie); color: var(--color-texto); text-decoration: none; }
.ficha-titulo { font-size: var(--texto-chico); font-weight: 600; color: var(--color-texto-suave); }
.ficha-importe { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ficha-nota { font-size: 0.75rem; color: var(--color-texto-suave); }
.ficha-oscura { background: var(--color-oscuro); color: var(--color-sobre-oscuro); }
.ficha-oscura .ficha-titulo, .ficha-oscura .ficha-nota { color: var(--color-sobre-oscuro-suave); }
.ficha-oscura .ficha-negativa { color: var(--color-semaforo-rojo-claro); }
.ficha-enlace:focus-visible { outline-offset: 3px; }

/* Créditos */
.credito-nota { margin: var(--espacio-1) 0 var(--espacio-3); font-size: 0.8125rem; }
.credito-proxima { display: flex; align-items: center; gap: var(--espacio-3); padding: 0.75rem 0.875rem; border-radius: var(--radio); background: var(--color-fondo); }
.credito-icono { flex: none; width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.credito-proxima-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.credito-proxima-etiqueta { font-size: 0.75rem; color: var(--color-texto-suave); }
.credito-proxima-nombre { font-size: var(--texto-chico); font-weight: 600; overflow-wrap: anywhere; }
.credito-proxima-monto { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Trabajos en curso y metas dentro de las tarjetas del inicio */
.lista-inicio { margin: var(--espacio-3) 0 0; }
.tarjeta-inicio .trabajo { border-radius: var(--radio); background: var(--color-fondo); }
.tarjeta-inicio .trabajo:last-child { margin-bottom: 0; }
.lista-metas { display: flex; flex-direction: column; gap: var(--espacio-4); margin: var(--espacio-3) 0 0; padding: 0; list-style: none; }
.meta-inicio-enlace { display: flex; flex-direction: column; gap: 0.375rem; min-height: 2.75rem; color: inherit; text-decoration: none; }
.meta-inicio-cabeza { display: flex; justify-content: space-between; gap: var(--espacio-3); font-size: var(--texto-chico); }
.meta-inicio-nombre { font-weight: 600; overflow-wrap: anywhere; }
.meta-inicio-pct { color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.meta-inicio-detalle { font-size: 0.75rem; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }

/* ---- Movimientos rediseñado: cabecera compacta, chips y lista por día ---- */
:root {
    --color-tinte-ingreso: #e3f4ec;
    --color-tinte-info: #e8f0fa;
    --color-linea-suave: #f1ece9;
    --radio-hero-compacto: 1.75rem;
    --tamano-toque: 2.75rem;
}
.hero-compacto { padding-bottom: var(--espacio-5); border-radius: 0 0 var(--radio-hero-compacto) var(--radio-hero-compacto); }
.hero-compacto + .contenido-con-hero { margin-top: 0; padding-top: var(--espacio-3); }
.hero-mes { display: flex; align-items: center; justify-content: center; gap: var(--espacio-2); margin-top: var(--espacio-2); }
.hero-mes-nombre { min-width: 8.5rem; text-align: center; text-transform: capitalize; font-size: var(--texto-chico); }
.hero-mes-flecha { display: inline-flex; align-items: center; justify-content: center; width: var(--tamano-toque); height: var(--tamano-toque); border-radius: 0.875rem; background: var(--color-oscuro-2); color: var(--color-sobre-oscuro); }
.hero-mes-flecha[aria-disabled="true"] { opacity: 0.35; }
.hero-mes-flecha svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); margin-top: var(--espacio-3); }
.hero-dos .hero-ficha { border-radius: 1.125rem; padding: 0.875rem; }
.hero-dos .hero-ficha-valor { font-size: 1.25rem; font-weight: 700; }
.hero-valor-entra { color: var(--color-semaforo-verde); }
.hero-valor-sale { color: var(--color-semaforo-rojo); }

.chips { display: flex; gap: var(--espacio-2); overflow-x: auto; padding: var(--espacio-1) 0 var(--espacio-2); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: var(--tamano-toque); padding: 0 var(--espacio-4); border: 1px solid var(--color-borde-campo); border-radius: 999px; background: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: var(--texto-chico); text-decoration: none; cursor: pointer; }
.chip-activo { border-color: var(--color-oscuro); background: var(--color-oscuro); color: var(--color-sobre-oscuro); font-weight: 600; }
.filtros-panel { margin-bottom: var(--espacio-3); }
.filtros-panel > summary { display: inline-flex; list-style: none; }
.filtros-panel > summary::-webkit-details-marker { display: none; }
.filtros-panel .filtros { margin: var(--espacio-3) 0 0; padding: var(--espacio-4); background: var(--color-superficie); border-radius: var(--radio-tarjeta); }

.dia-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-3); padding: 0 var(--espacio-1); margin: var(--espacio-4) 0 var(--espacio-2); }
.dia-cabecera .dia-titulo { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--color-texto); }
.dia-neto { font-size: 0.8125rem; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.lista-mov { padding: var(--espacio-1) var(--espacio-4); border: 0; border-radius: var(--radio-tarjeta); }
.mov-fila { position: relative; display: flex; align-items: center; gap: var(--espacio-3); min-height: 4.5rem; padding: var(--espacio-3) 0; border-bottom: 1px solid var(--color-linea-suave); }
.mov-fila:last-child { border-bottom: 0; }
.mov-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tamano-toque); height: var(--tamano-toque); border-radius: 0.875rem; background: var(--color-fondo); color: var(--color-texto); }
.mov-icono svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mov-icono-ingreso { background: var(--color-tinte-ingreso); color: var(--color-exito); }
.mov-icono-obligacion, .mov-icono-ajuste { background: var(--color-primario-tenue); color: var(--color-peligro); }
.mov-icono-transferencia { background: var(--color-tinte-info); color: var(--color-info); }
.mov-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mov-titulo { font-weight: 600; overflow-wrap: anywhere; color: var(--color-texto); text-decoration: none; }
.mov-enlace::after { content: ""; position: absolute; inset: 0; }
.mov-enlace:focus-visible { outline: none; }
.mov-enlace:focus-visible::after { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: var(--radio-chico); }
.mov-detalle { font-size: 0.75rem; color: var(--color-texto-suave); overflow-wrap: anywhere; }
.mov-monto { flex: none; max-width: 45%; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mov-monto-positivo { color: var(--color-exito); }
.mov-monto-negativo { color: var(--color-peligro); }

/* Más: accesos grandes en el hero, listas agrupadas y cierre de sesión */
.mas-destacados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); margin-top: var(--espacio-4); }
.mas-ficha { display: flex; flex-direction: column; justify-content: space-between; min-height: 5.75rem; padding: 0.875rem; border-radius: var(--radio-tarjeta); background: var(--color-oscuro-2); color: var(--color-sobre-oscuro); text-decoration: none; }
.mas-ficha-icono { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--color-icono-hero); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mas-ficha-nombre { font-size: 0.9375rem; font-weight: 600; }
.mas-ficha-deshabilitada { color: var(--color-sobre-oscuro-suave); }
.mas-grupo { margin-bottom: var(--espacio-4); }
.mas-grupo-titulo { margin: 0 0 var(--espacio-2); padding: 0 var(--espacio-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-suave); }
.mas-lista { margin: 0; padding: var(--espacio-1) var(--espacio-4); list-style: none; background: var(--color-superficie); border-radius: var(--radio-tarjeta); }
.mas-lista li + li { border-top: 1px solid var(--color-borde); }
.mas-fila { display: flex; align-items: center; gap: var(--espacio-3); min-height: 4rem; color: var(--color-texto); text-decoration: none; }
.mas-fila-icono { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radio-chico); background: var(--color-fondo); }
.mas-icono { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mas-fila-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mas-fila-nombre { font-weight: 600; }
.mas-fila-desc { font-size: 0.8125rem; color: var(--color-texto-suave); }
.mas-flecha { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--color-texto-suave); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mas-fila-deshabilitada { color: var(--color-texto-suave); }
.mas-salir { display: flex; align-items: center; justify-content: center; gap: var(--espacio-2); width: 100%; min-height: 3.25rem; border: 1px solid var(--color-borde-campo); border-radius: var(--radio-tarjeta); background: var(--color-superficie); color: var(--color-peligro); font: inherit; font-weight: 600; cursor: pointer; }
.mas-version { margin: var(--espacio-4) 0 0; text-align: center; font-size: 0.75rem; color: var(--color-texto-suave); }

/* ---- Metas y Trabajos rediseñados ---- */
:root {
    --color-aviso-sobre-oscuro: #f5b942; /* ámbar legible sobre fichas oscuras */
    --alto-segmento: 2.75rem;
}
.hero-fila-separada { justify-content: space-between; gap: var(--espacio-3); }
.hero-acciones { display: flex; align-items: center; gap: var(--espacio-2); }
.hero-pildora { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--tamano-toque); padding: 0 var(--espacio-4); border-radius: 999px; background: var(--color-primario); color: var(--color-primario-texto); font-size: var(--texto-chico); font-weight: 600; text-decoration: none; }
.hero-pildora:hover { background: var(--color-primario-hover); color: var(--color-primario-texto); }
.hero-pildora svg, .hero-icono-enlace svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-icono-enlace { display: inline-flex; align-items: center; justify-content: center; width: var(--tamano-toque); height: var(--tamano-toque); border-radius: 0.875rem; background: var(--color-oscuro-2); color: var(--color-sobre-oscuro); }
.hero-icono-enlace svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.8; }
.hero-valor-aviso { color: var(--color-aviso-sobre-oscuro); }
.hero-ficha-ancha { margin-top: var(--espacio-4); padding: var(--espacio-4); border-radius: 1.125rem; }
.hero-ficha-ancha .hero-ficha-valor { font-size: 1.625rem; font-weight: 700; }

/* Metas: tarjetas con anillo de progreso y filas compactas */
.metas-tarjetas { display: flex; flex-direction: column; gap: var(--espacio-3); }
.meta-tarjeta { display: flex; align-items: center; gap: var(--espacio-4); min-height: 5.5rem; padding: var(--espacio-4); border-radius: var(--radio-tarjeta); background: var(--color-superficie); color: var(--color-texto); text-decoration: none; }
.meta-anillo { position: relative; flex: none; width: 4rem; height: 4rem; }
.meta-anillo svg { display: block; width: 100%; height: 100%; }
.meta-anillo-pista { stroke: var(--color-linea-suave); }
.meta-anillo-arco { stroke: var(--color-primario); }
.meta-anillo-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--texto-chico); font-weight: 700; font-variant-numeric: tabular-nums; }
.meta-tarjeta-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.meta-tarjeta-nombre { font-weight: 700; overflow-wrap: anywhere; }
.meta-tarjeta-monto { font-size: var(--texto-chico); font-variant-numeric: tabular-nums; }
.meta-tarjeta-de, .meta-tarjeta-fecha { color: var(--color-texto-suave); }
.meta-tarjeta-fecha { font-size: 0.75rem; }
.meta-tarjeta-vencida { color: var(--color-peligro); font-weight: 600; }
.meta-fila { display: flex; flex-direction: column; justify-content: center; gap: 0.375rem; min-height: 4rem; padding: var(--espacio-3) 0; color: var(--color-texto); text-decoration: none; }
.meta-fila-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); }
.meta-fila-nombre { font-weight: 600; overflow-wrap: anywhere; }
.meta-chip { flex: none; padding: 0.1875rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--color-linea-suave); color: var(--color-texto); }
.meta-chip-pausada { background: var(--color-aviso-tenue); color: var(--color-aviso-texto); }
.meta-chip-cumplida { background: var(--color-tinte-ingreso); color: var(--color-exito); }
.meta-fila-barra { appearance: none; -webkit-appearance: none; width: 100%; height: 0.375rem; border: 0; border-radius: 0.1875rem; background: var(--color-linea-suave); overflow: hidden; accent-color: var(--color-texto-suave); }
.meta-fila-barra::-webkit-progress-bar { background: var(--color-linea-suave); }
.meta-fila-barra::-webkit-progress-value { background: var(--color-texto-suave); }
.meta-fila-barra::-moz-progress-bar { background: var(--color-texto-suave); }
.meta-fila-barra-cumplida { accent-color: var(--color-exito); }
.meta-fila-barra-cumplida::-webkit-progress-value { background: var(--color-exito); }
.meta-fila-barra-cumplida::-moz-progress-bar { background: var(--color-exito); }
.meta-fila-monto { font-size: 0.75rem; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }

/* Trabajos: en curso en el hero, segmentos de rango y lista con bloque de fecha */
.hero-encurso { display: flex; align-items: center; gap: var(--espacio-3); margin-top: var(--espacio-4); padding: var(--espacio-4); border-radius: 1.25rem; background: var(--color-oscuro-2); color: var(--color-sobre-oscuro); text-decoration: none; }
.hero-encurso + .hero-encurso { margin-top: var(--espacio-2); }
.hero-punto { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.hero-punto-marcha { background: var(--color-semaforo-verde); box-shadow: 0 0 0 0.3125rem rgba(61, 220, 151, 0.18); }
.hero-punto-pausa { background: var(--color-sobre-oscuro-suave); box-shadow: 0 0 0 0.3125rem rgba(169, 166, 176, 0.18); }
.hero-encurso-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.hero-encurso-estado { font-size: 0.75rem; color: var(--color-sobre-oscuro-suave); }
.hero-encurso-titulo { font-weight: 600; overflow-wrap: anywhere; }
.hero-encurso .reloj { flex: none; font-size: 1.375rem; }
.hero-segmentos { display: flex; gap: 0.375rem; margin-top: var(--espacio-4); padding: var(--espacio-1); border-radius: 1.375rem; background: var(--color-oscuro-2); }
.hero-segmento { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--alto-segmento); padding: 0 var(--espacio-1); border-radius: 1.125rem; color: var(--color-sobre-oscuro-suave); font-size: 0.8125rem; text-align: center; text-decoration: none; }
.hero-segmento-activo { background: var(--color-superficie); color: var(--color-oscuro); font-weight: 600; }
.hero-compacto .hero-fichas { margin-top: var(--espacio-3); }
.hero-compacto .hero-fichas .hero-ficha { border-radius: 1rem; }
.hero-compacto .hero-fichas .hero-ficha-valor { font-size: 1rem; font-weight: 700; }
.hero-resumen { margin: var(--espacio-3) 0 0; font-size: 0.75rem; color: var(--color-sobre-oscuro-suave); }

.filtros-barra { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espacio-2); margin-bottom: var(--espacio-3); }
.filtros-barra .filtros-panel { margin-bottom: 0; }
.filtros-barra .filtros-panel[open] { flex: 1 1 100%; }
.filtros-barra .filtros-panel[open] ~ .chip { order: -1; }
.chip-icono { width: 1rem; height: 1rem; margin-right: 0.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.trabajo-item-enlace { display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-3) 0; color: var(--color-texto); text-decoration: none; }
.trabajo-fecha { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--tamano-toque); height: var(--tamano-toque); border-radius: 0.875rem; background: var(--color-fondo); }
.trabajo-fecha-dia { font-size: 0.9375rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.trabajo-fecha-mes { font-size: 0.6875rem; font-weight: 600; color: var(--color-texto-suave); }
.trabajo-item-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.trabajo-item-titulo { font-weight: 600; overflow-wrap: anywhere; }
.trabajo-item-detalle { font-size: 0.75rem; color: var(--color-texto-suave); overflow-wrap: anywhere; }
.trabajo-chip-cobrar { align-self: flex-start; margin-top: 0.125rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--color-aviso-tenue); color: var(--color-aviso-texto); font-size: 0.75rem; font-weight: 700; }
.trabajo-item-cifras { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; max-width: 40%; text-align: right; font-variant-numeric: tabular-nums; }
.trabajo-item-precio { font-weight: 700; overflow-wrap: anywhere; }
.trabajo-item-hora { font-size: 0.75rem; font-weight: 600; color: var(--color-exito); }
.trabajo-item-neta { font-size: 0.75rem; color: var(--color-texto-suave); }

/* ---- Registrar rediseñado: hero con monto grande, categorías en rejilla y barra de guardar fija ---- */
:root {
    --alto-barra-guardar: 3.5rem;
    --color-fondo-transparente: rgba(246, 243, 241, 0);
    --radio-tarjeta-form: 1.375rem;
}
.contenido-sin-nav { padding-bottom: calc(var(--alto-barra-guardar) + var(--espacio-6) + var(--espacio-4) + env(safe-area-inset-bottom, 0px)); }
.hero-segmento-ancho { flex: 1.3; }
.registro-relleno { flex: none; width: var(--tamano-toque); height: var(--tamano-toque); }
.hero-compacto .hero-fila-separada .hero-titulo { text-align: center; }

.registro-monto { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; margin-top: var(--espacio-5); }
.registro-monto-etiqueta { font-size: 0.8125rem; color: var(--color-sobre-oscuro-suave); }
.registro-monto-fila { display: flex; align-items: baseline; justify-content: center; gap: var(--espacio-2); max-width: 100%; }
.registro-monto-prefijo { flex: none; font-size: 1.625rem; font-weight: 600; color: var(--color-sobre-oscuro-suave); }
.registro-monto-input {
    flex: 0 1 13rem;
    min-width: 0;
    padding: 0;
    font: inherit;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-sobre-oscuro);
    background: transparent;
    border: 0;
    border-radius: var(--radio-chico);
    text-align: left;
}
.registro-monto-input::placeholder { color: var(--color-sobre-oscuro-suave); opacity: 1; }
.registro-monto-input:focus-visible { outline: 2px solid var(--color-icono-hero); outline-offset: 4px; }
.registro-monto-ingreso .registro-monto-input { color: var(--color-semaforo-verde); }
.registro-monto-raya { width: 4rem; height: 0.1875rem; margin-top: 0.125rem; border-radius: 0.125rem; background: var(--color-primario); }
.registro-monto-con-error .registro-monto-raya { background: var(--color-semaforo-rojo-claro); }
.registro-monto-error { margin: 0; font-size: var(--texto-chico); color: var(--color-semaforo-rojo-claro); text-align: center; }

.registro-tarjeta { margin: 0 0 var(--espacio-3); padding: 1.125rem; border: 0; border-radius: var(--radio-tarjeta-form); background: var(--color-superficie); min-width: 0; }
.registro-tarjeta .campo:last-child { margin-bottom: 0; }
.registro-flecha { display: flex; justify-content: center; margin-bottom: var(--espacio-3); }
.registro-flecha-circulo { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-fondo); }
.registro-flecha-circulo svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--color-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.registro-leyenda { float: left; width: 100%; margin-bottom: var(--espacio-3); padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-texto-suave); }
.registro-categorias-rejilla { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2); }
.registro-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 4rem;
    padding: var(--espacio-2) 0.375rem;
    border: 2px solid transparent;
    border-radius: 1rem;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.registro-cat input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; }
.registro-cat-nombre { overflow-wrap: anywhere; }
.registro-cat-ambito { font-size: 0.6875rem; font-weight: 500; color: var(--color-texto-suave); }
.registro-cat input:checked + .registro-cat-nombre { color: var(--color-peligro); font-weight: 700; }
.registro-cat:has(input:checked) { background: var(--color-primario-tenue); border-color: var(--color-primario); color: var(--color-peligro); }
.registro-cat:has(input:focus-visible) { outline: 2px solid var(--color-primario); outline-offset: 2px; }
/* "+ Nueva": tarjeta punteada y campo del nombre que solo aparece cuando la opción está marcada */
.registro-cat-nueva { border-style: dashed; border-color: var(--color-borde-campo); color: var(--color-texto-suave); }
.registro-cat-nueva-campo { display: none; margin-top: var(--espacio-3); }
/* Categorías fuera de la rejilla principal, plegadas */
.registro-cat-mas { margin-top: var(--espacio-3); }
.registro-cat-mas > summary { cursor: pointer; padding: var(--espacio-2) 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-texto-suave); }
.registro-cat-mas > .registro-categorias-rejilla { margin-top: var(--espacio-2); }
.registro-categorias:has(input[value="nueva"]:checked) .registro-cat-nueva-campo { display: block; }
.registro-cat-nueva-fila { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.registro-cat-nueva-fila .campo-input { flex: 1 1 10rem; min-width: 0; min-height: var(--tamano-toque); }
.registro-cat-nueva-fila .registro-cat-ambito-select { flex: 0 0 auto; width: auto; }

/* Configuración: índice de secciones, alta rápida de categorías y filas desplegables */
.seccion-titulo[id] { scroll-margin-top: var(--espacio-4); }
.indice-secciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin: var(--espacio-4) 0 0; }
.indice-enlace { display: inline-flex; align-items: center; min-height: var(--tamano-toque); padding: 0 var(--espacio-3); border-radius: 999px; background: var(--color-superficie); color: var(--color-texto); font-size: var(--texto-chico); font-weight: 600; text-decoration: none; }
.indice-enlace:hover { color: var(--color-enlace); }
.catalogo-alta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2); margin-bottom: var(--espacio-3); }
.catalogo-alta-nombre { flex: 1 1 12rem; min-width: 0; min-height: var(--tamano-toque); }
.catalogo-alta-ambito { flex: 0 0 auto; width: auto; min-height: var(--tamano-toque); }
.catalogo-alta-boton { flex: 0 0 auto; min-height: var(--tamano-toque); }
.catalogo-detalle > summary { list-style: none; cursor: pointer; }
.catalogo-detalle > summary::-webkit-details-marker { display: none; }
.catalogo-fila { min-height: var(--tamano-toque); }
.catalogo-flecha { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--color-texto-suave); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.catalogo-detalle[open] > summary .catalogo-flecha { transform: rotate(90deg); }
.catalogo-editar { padding: 0 0 var(--espacio-2); }
/* Variantes dentro de su tipo: sangría para que se vea que cuelgan del tipo */
.catalogo-lista-hija { margin: 0 0 var(--espacio-2) var(--espacio-3); }
.catalogo-hija > summary { min-height: var(--tamano-toque); }

.registro-filas { padding-top: var(--espacio-1); padding-bottom: var(--espacio-1); }
.registro-item { border-bottom: 1px solid var(--color-linea-suave); }
.registro-item:last-child { border-bottom: 0; }
.registro-fila { display: flex; align-items: center; gap: var(--espacio-3); min-height: 3.75rem; }
.registro-fila-icono { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--color-texto-suave); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.registro-fila-etiqueta { flex: none; width: 4.5rem; font-size: var(--texto-chico); color: var(--color-texto-suave); }
.registro-fila-control { flex: 1; min-width: 0; min-height: var(--tamano-toque); padding: 0; font: inherit; font-weight: 600; color: var(--color-texto); background: transparent; border: 0; text-align: right; text-align-last: right; }
input.registro-fila-control { font-weight: 500; }
.registro-fila-control::placeholder { color: var(--color-texto-suave); opacity: 1; }
.registro-fila-error { margin: 0 0 var(--espacio-2); text-align: right; }

.registro-fecha { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.375rem; }
.registro-fecha-chips { display: flex; gap: 0.375rem; }
.registro-fecha-chips[hidden], .registro-fecha-input[hidden] { display: none; }
.registro-fecha-input { flex: 0 1 auto; }
.chip-fecha { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tamano-toque); min-height: var(--tamano-toque); padding: 0 var(--espacio-3); font: inherit; font-size: 0.8125rem; color: var(--color-texto); background: var(--color-superficie); border: 1px solid var(--color-borde-campo); border-radius: 999px; cursor: pointer; }
.chip-fecha-activo { font-weight: 600; color: var(--color-sobre-oscuro); background: var(--color-oscuro); border-color: var(--color-oscuro); }
.chip-fecha svg { width: 1rem; height: 1rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.confirmacion-intocable[hidden] { display: none; }
.boton-peligro-suave { background: var(--color-superficie); color: var(--color-peligro); border-color: var(--color-peligro); }

/* Barra de guardar fija al pie (componentes/barra_guardar.php, con la sección sin_nav) */
.barra-guardar {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 20;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--ancho-max);
    padding: var(--espacio-4) var(--espacio-4) calc(var(--espacio-4) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(var(--color-fondo-transparente), var(--color-fondo) 35%);
    pointer-events: none;
}
.barra-guardar-boton { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--alto-barra-guardar); padding: 0 var(--espacio-4); font: inherit; font-size: 1rem; font-weight: 700; color: var(--color-primario-texto); background: var(--color-primario-hover); border: 0; border-radius: 1.125rem; cursor: pointer; }
.barra-guardar-boton:hover { background: var(--color-peligro); }
.barra-guardar-boton:disabled { opacity: 0.5; cursor: not-allowed; }
.barra-guardar-boton:focus-visible { outline-offset: 3px; }

/* ---- Cabecera por defecto (layout) y piezas compartidas de hero ---- */
.hero-pagina { padding-bottom: var(--espacio-4); }
.hero-fila-titulo { flex: 1; min-width: 0; }
.hero-titulo-pagina { min-width: 0; overflow: hidden; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-pagina .hero-acciones { flex: none; }

/* ---- Cuentas, tipos de cambio y obligaciones rediseñados (Fase 2): listas blancas con filas genéricas ---- */
.hero-importe { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.hero-fichas-auto { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.hero-compacto .hero-fichas-auto .hero-ficha-valor { font-size: 1.125rem; }
.seccion-titulo { margin: var(--espacio-5) 0 var(--espacio-2); padding: 0 var(--espacio-1); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-suave); }
.nota-centrada { margin: 0 0 var(--espacio-3); padding: 0 var(--espacio-1); text-align: center; }

/* Lista blanca reutilizable: <ul class="lista-blanca"> con <li class="fila-item"><div class="fila"> o <a class="fila fila-enlace"> */
.lista-blanca { margin: 0 0 var(--espacio-3); padding: var(--espacio-1) var(--espacio-4); list-style: none; background: var(--color-superficie); border-radius: var(--radio-tarjeta); }
.fila-item { border-bottom: 1px solid var(--color-linea-suave); }
.fila-item:last-child { border-bottom: 0; }
.fila-archivada { opacity: 0.65; }
.fila { display: flex; align-items: center; gap: var(--espacio-3); min-height: 4.5rem; padding: var(--espacio-3) 0; color: var(--color-texto); }
.fila-enlace { text-decoration: none; }
.fila-enlace:focus-visible { outline-offset: 2px; border-radius: var(--radio-chico); }
.fila-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tamano-toque); height: var(--tamano-toque); border-radius: 0.875rem; background: var(--color-fondo); color: var(--color-texto); }
.fila-icono svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fila-icono-ahorro_intocable { background: var(--color-aviso-tenue); color: var(--color-aviso-texto); }
.fila-icono-cripto { background: var(--color-tinte-info); color: var(--color-info); }
.fila-icono-banco { background: var(--color-primario-tenue); color: var(--color-peligro); }
.fila-icono-billetera_digital { background: var(--color-tinte-ingreso); color: var(--color-exito); }
.fila-fecha { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--tamano-toque); height: var(--tamano-toque); border-radius: 0.875rem; background: var(--color-fondo); }
.fila-fecha-dia { font-size: 0.9375rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.fila-fecha-mes { font-size: 0.6875rem; font-weight: 600; color: var(--color-texto-suave); }
.fila-info { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.fila-titulo { font-weight: 600; overflow-wrap: anywhere; }
.fila-detalle { font-size: 0.75rem; color: var(--color-texto-suave); overflow-wrap: anywhere; }
.fila-lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; max-width: 45%; text-align: right; }
.fila-monto { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fila-info .meta-fila-barra { margin-top: 0.375rem; }
.fila-acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); padding: 0 0 var(--espacio-3); }
.fila-acciones > form { flex: 1 1 auto; }
.fila-acciones .boton { width: auto; min-width: 100%; min-height: var(--tamano-toque); padding: 0 var(--espacio-3); font-size: var(--texto-chico); }
.fila-acciones > .boton { flex: 1 1 auto; min-width: 0; }

/* Distribución del dinero por cuenta */
.distribucion-item { padding: var(--espacio-3) 0; }
.distribucion-cabeza { display: flex; justify-content: space-between; gap: var(--espacio-3); margin-bottom: 0.375rem; font-size: var(--texto-chico); }
.distribucion-nombre { font-weight: 600; overflow-wrap: anywhere; }
.distribucion-valor { color: var(--color-texto-suave); font-variant-numeric: tabular-nums; text-align: right; }
.lista-distribucion-barras .meta-fila-barra { accent-color: var(--color-primario); }
.lista-distribucion-barras .meta-fila-barra::-webkit-progress-value { background: var(--color-oscuro); }
.lista-distribucion-barras .meta-fila-barra::-moz-progress-bar { background: var(--color-oscuro); }

/* Filas de formulario: etiquetas más anchas y texto de ayuda */
.registro-fila-etiqueta.fila-campo-etiqueta { flex: 0 0 auto; width: 7rem; }
.registro-ayuda { margin: calc(var(--espacio-1) * -1) 0 var(--espacio-2); font-size: 0.75rem; color: var(--color-texto-suave); }

/* Obligaciones: filas con bloque de fecha (reutiliza .venc del inicio dentro de .lista-blanca) */
.lista-blanca .venc { min-height: 4.5rem; padding: var(--espacio-3) 0; border-bottom-color: var(--color-linea-suave); }
.lista-blanca .venc:last-child { border-bottom: 0; }
.venc-titulo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--espacio-2); }
.venc-titulo-fila .estado { margin-left: 0; }
.venc-pagada .venc-fecha { background: var(--color-tinte-ingreso); color: var(--color-exito); }
.venc-lado form { display: flex; }
.venc-lado .enlace-fila { display: inline-flex; align-items: center; min-height: var(--tamano-toque); font-size: var(--texto-chico); }
.mas-lista-pie { margin-top: var(--espacio-4); }
.boton + .lista-blanca, .alerta + .lista-blanca { margin-top: var(--espacio-3); }
.acciones .boton + .boton { margin-top: 0; }

/* ---- Créditos rediseñados (Fase 3): hero con secciones, tarjetas de crédito, cuotas y desglose del pago ---- */
.hero-subtitulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2); margin: var(--espacio-3) 0 0; font-size: var(--texto-chico); color: var(--color-sobre-oscuro-suave); }
.hero-estado { padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--color-oscuro-2); font-size: 0.75rem; font-weight: 700; color: var(--color-sobre-oscuro-suave); }
.hero-estado-activo, .hero-estado-cancelado { color: var(--color-semaforo-verde); }
.hero-segmentos-desplazables { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hero-segmentos-desplazables::-webkit-scrollbar { display: none; }
.hero-segmentos-desplazables .hero-segmento { flex: 0 0 auto; padding: 0 var(--espacio-4); white-space: nowrap; }
.hero-segmento:focus-visible { outline-color: var(--color-icono-hero); }
.hero-ficha-ancha .hero-resumen { margin-top: var(--espacio-2); }

progress.barra-hero { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 0.5rem; margin-top: var(--espacio-3); border: 0; border-radius: 999px; overflow: hidden; background: var(--color-oscuro); }
progress.barra-hero::-webkit-progress-bar { background: var(--color-oscuro); border-radius: 999px; }
progress.barra-hero::-webkit-progress-value { background: var(--color-icono-hero); border-radius: 999px; }
progress.barra-hero::-moz-progress-bar { background: var(--color-icono-hero); border-radius: 999px; }

/* Tarjeta de crédito de la lista */
.credito.credito-archivado { opacity: 1; }
.credito-tarjeta { display: flex; flex-direction: column; gap: 0.375rem; }
.credito-tarjeta-nombre { font-weight: 700; overflow-wrap: anywhere; }
.credito-tarjeta-saldo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--espacio-2); }
.credito-tarjeta-importe { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.credito-tarjeta .credito-proxima { margin-top: var(--espacio-1); }

/* Cuotas calculadas como tarjetas (componentes/tabla_cuotas.php) */
.cuotas-lista { display: flex; flex-direction: column; gap: var(--espacio-2); margin: 0 0 var(--espacio-3); padding: 0; list-style: none; }
.cuota { padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-tarjeta); background: var(--color-superficie); }
.cuota-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-3); margin-bottom: var(--espacio-2); }
.cuota-titulo { font-weight: 700; }
.cuota-fecha { font-size: var(--texto-chico); font-weight: 500; color: var(--color-texto-suave); }
.cuota-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.cuota-celdas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2) var(--espacio-3); margin: 0; }
.cuota-celda { min-width: 0; }
.cuota-celda dt { font-size: 0.75rem; color: var(--color-texto-suave); }
.cuota-celda dd { margin: 0; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cuota-totales { background: var(--color-oscuro); color: var(--color-sobre-oscuro); }
.cuota-totales .cuota-celda dt { color: var(--color-sobre-oscuro-suave); }

/* Desglose del pago: dos bloques y totales destacados */
.datos-subtitulo { margin: 0 0 var(--espacio-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-suave); }
.datos + .datos-subtitulo { margin-top: var(--espacio-4); }
.datos-desglose .datos-fila-total { margin: var(--espacio-1) calc(var(--espacio-3) * -1) 0; padding: var(--espacio-3); border-bottom: 0; border-radius: var(--radio); background: var(--color-fondo); }
.datos-fila.celda-faltante dt, .datos-fila.celda-sobrante dt { color: inherit; font-weight: 600; }
.fila-item > .desglose { margin: 0 0 var(--espacio-1); }

/* Casilla dentro de una tarjeta de filas, cifras en tarjeta y tabla de comparación */
.registro-check { min-height: 3.5rem; margin: 0; padding: var(--espacio-2) 0; font-size: var(--texto-chico); cursor: pointer; }
.registro-check input { flex: none; width: 1.375rem; height: 1.375rem; }
.cifras-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); margin-bottom: var(--espacio-3); }
.cifra { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; padding: 1.125rem; border-radius: var(--radio-tarjeta); background: var(--color-superficie); color: var(--color-texto); }
.tabla-comparacion { white-space: normal; }
.tabla-comparacion th, .tabla-comparacion td { vertical-align: top; }
.tabla-comparacion th + th, .tabla-comparacion td + td { white-space: nowrap; }
.tabla-comparacion tfoot td { background: var(--color-fondo); border-top: 1px solid var(--color-linea-suave); }

/* ---- Deudas, metas y trabajos rediseñados (Fase 4) ---- */
.fila-inicial { font-size: 1.0625rem; font-weight: 700; }
.fila-posicion { font-size: var(--texto-chico); font-weight: 700; font-variant-numeric: tabular-nums; }
.fila-titulo .estado { margin-left: var(--espacio-2); vertical-align: middle; }
.fila-acciones-sueltas { padding: 0; margin-bottom: var(--espacio-2); }
.fila-acciones-sueltas > form + form { margin-top: 0; }
.fila-acciones-sueltas .boton { min-width: 100%; }
select.registro-fila-control { text-overflow: ellipsis; }
.hero-resumen-centrado { text-align: center; }

/* Cifras oscuras (simulador y adelanto de crédito): el fondo y el texto claro ganan a .cifra */
.cifra.ficha-oscura { background: var(--color-oscuro); color: var(--color-sobre-oscuro); }
.cifras-en-tarjeta { margin: var(--espacio-3) 0; }

/* Meta: anillo de progreso dentro del hero */
.hero-ficha.hero-meta { flex-direction: row; align-items: center; gap: var(--espacio-4); }
.hero-meta-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.meta-anillo-hero { width: 5rem; height: 5rem; }
.hero .meta-anillo-pista { stroke: var(--color-oscuro); }
.hero .meta-anillo-arco { stroke: var(--color-icono-hero); }
.hero-estado-pausada { color: var(--color-aviso-sobre-oscuro); }

/* Trabajo en curso: reloj grande y botones de 56px */
.hero-ficha-centrada { align-items: center; text-align: center; }
.hero-reloj { display: block; margin: var(--espacio-1) 0; font-size: 3rem; line-height: 1.1; letter-spacing: -0.01em; }
.acciones-grandes { margin-bottom: var(--espacio-3); }
.acciones-grandes .boton { min-height: 3.5rem; font-size: 1.0625rem; border-radius: 1.125rem; }

/* Formularios de trabajo: grupos de botones y detalles dentro de tarjetas */
.registro-tarjeta .categorias { margin-bottom: 0; }
.registro-tarjeta .categorias + .detalles-extra { margin-top: var(--espacio-2); }
section.registro-tarjeta > .detalles-extra { margin-bottom: 0; }
.detalles-extra.registro-tarjeta { margin-bottom: var(--espacio-3); }
.registro-tarjeta > .detalles-extra .registro-item:last-child { border-bottom: 0; }
.registro-tarjeta > p.texto-suave { margin: var(--espacio-3) 0 0; }
.form-registro > .boton { margin-bottom: var(--espacio-3); }

/* Rendimiento: filtro de fechas y ranking con barras */
.filtros-panel .filtros .registro-filas { margin-bottom: var(--espacio-3); }

/* ---- Resúmenes, configuración y exportar rediseñados (Fase 5) ---- */
.seccion-subtitulo { margin: var(--espacio-4) 0 var(--espacio-2); padding: 0 var(--espacio-1); font-size: var(--texto-chico); font-weight: 700; color: var(--color-texto); }
.hero-mes-periodo { flex: 1; min-width: 0; max-width: 14rem; text-transform: none; }
.fila-total { min-height: 3.5rem; }
.fila-total .fila-titulo, .fila-total .fila-monto { font-weight: 700; }
.tabla-comparacion tbody th { font-weight: 500; }
.tabla-comparacion tbody tr:last-child th, .tabla-comparacion tbody tr:last-child td { font-weight: 700; }
.config-uso { margin: 0 0 var(--espacio-2); }

/* ---- Tipo y variante de trabajo: "+ Nuevo" en línea y variantes por tipo (trabajo_form.js) ---- */
.categoria-boton[hidden], .categoria-nuevo[hidden], .categoria-editor[hidden], .detalles-extra[hidden] { display: none; }
.categoria-nuevo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alto-toque);
    padding: var(--espacio-2);
    font: inherit;
    font-weight: 600;
    color: var(--color-enlace);
    background: transparent;
    border: 1.5px dashed var(--color-borde-campo);
    border-radius: var(--radio-chico);
    cursor: pointer;
}
.categoria-nuevo:hover { background: var(--color-primario-tenue); border-color: var(--color-primario); }
.categoria-nuevo:focus-visible, .categoria-editor-boton:focus-visible, .categoria-editor-input:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.categoria-pendiente span::after { content: "\00a0· nuevo"; font-size: var(--texto-chico); font-weight: 400; }
.categoria-editor { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--espacio-2); }
.categoria-editor-input {
    flex: 1;
    min-width: 0;
    min-height: var(--alto-toque);
    padding: 0 var(--espacio-3);
    font: inherit;
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-chico);
}
.categoria-editor-boton {
    flex: none;
    width: var(--alto-toque);
    min-height: var(--alto-toque);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-chico);
    cursor: pointer;
}
.categoria-editor-ok { color: var(--color-primario-texto); background: var(--color-exito); border-color: var(--color-exito); }
.categoria-aviso { min-height: 1.25rem; margin: var(--espacio-2) 0 0; font-size: var(--texto-chico); color: var(--color-exito); }