/* Etapa 2 de la transformacion (2026-10-25): La Verdad, el momento de la verdad del mes. */

/* Titular: la frase y el numero heroe */
#vista-verdad .verdad-frase{ font-family:var(--font-marca); font-size:20px; color:var(--ink-2); margin-bottom:4px; }
#vista-verdad [data-b="titular"] .cifra-titular{ font-size:clamp(48px, 15vw, 64px); }
#vista-verdad [data-b="titular"] .cifra-titular[data-largo="media"]{ font-size:clamp(42px, 13vw, 56px); }
#vista-verdad [data-b="titular"] .cifra-titular[data-largo="larga"]{ font-size:clamp(36px, 11vw, 48px); }
#vista-verdad .cifra-titular.verdad-neg{ color:var(--neg); }
#vista-verdad .verdad-forma{ font-size:.5em; margin-right:.2em; vertical-align:.18em; }
.verdad-neg{ color:var(--neg); }

/* Escalera vertical (celular). En escritorio manda la cascada horizontal. */
#vista-verdad .recibo{ display:none; }
.esc-lista{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.esc{ padding:10px 0 12px; border-bottom:1px solid var(--line); cursor:pointer; min-height:48px; border-radius:6px; }
.esc:focus-visible{ outline:2px solid var(--marca-ink); outline-offset:2px; }
.esc--activa{ background:var(--marca-tenue); }
.esc__txt{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2); }
.esc__nombre{ font-size:15px; color:var(--ink-2); }
.esc__monto{ font-size:20px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.esc--baja .esc__monto{ font-size:17px; font-weight:500; }
.esc__pista{ position:relative; height:12px; margin-top:6px; background:color-mix(in srgb, var(--ink) 6%, transparent); border-radius:4px; overflow:hidden; }
.esc__barra{ position:absolute; top:0; bottom:0; border-radius:3px; background:var(--neutro-suave); border:1px solid color-mix(in srgb, var(--neutro-suave) 65%, var(--ink)); box-sizing:border-box; }
.esc--ingreso .esc__barra{ background:var(--neutro-fuerte); border-color:color-mix(in srgb, var(--neutro-fuerte) 70%, var(--ink)); }
.esc--costo .esc__barra{ background:var(--neutro-medio); }
.esc--merma .esc__nombre, .esc--merma .esc__monto{ color:var(--neg); }
.esc--merma .esc__barra{ background:var(--neg); background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 3px, transparent 3px 6px); border-color:var(--neg); }
.esc--neto{ border-bottom:0; padding-top:16px; border-top:2px solid var(--ink); margin-top:6px; cursor:pointer; }
.esc--neto .esc__nombre{ font-family:var(--font-marca); font-size:20px; color:var(--ink); }
.esc__neto{ font-family:var(--font-marca); font-size:40px; line-height:1.05; margin:2px 0 4px; color:var(--pos); font-variant-numeric:tabular-nums; }
.esc--neto .esc__barra{ background:var(--pos); border-color:var(--pos); }
.esc--perdida .esc__nombre, .esc--perdida .esc__neto{ color:var(--neg); }
.esc--perdida .esc__barra{ background:var(--neg); border-color:var(--neg); background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 3px, transparent 3px 6px); }
.esc-nota{ margin-top:var(--sp-3); min-height:1.4em; }
@media (min-width:720px){ #vista-verdad .verdad-escalera{ display:none; } #vista-verdad .recibo{ display:none; } }

/* Esferas: quien aporta y quien recibe */
.esfera{ flex-direction:column; align-items:stretch; padding:var(--sp-3) 0; gap:2px; }
.esfera__linea{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }
.esfera__nombre{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:16px; }
.esfera__punto{ width:10px; height:10px; border-radius:3px; flex:none; }
.esfera--C .esfera__punto{ background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 3px,transparent 3px 6px); }
.esfera__neto{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.esfera__rol{ font-size:13px; font-weight:600; color:var(--ink-2); }
.esfera--B .esfera__rol, .esfera--C .esfera__rol{ color:var(--neg); }
.esfera__sub .meta{ font-size:13px; color:var(--ink-3); }
.esfera__antes{ font-size:13px; color:var(--ink-3); margin:2px 0 0; }
.esfera .fila-cruce__nota{ text-align:left; background:none; border:none; padding:8px 0 4px; min-height:36px; font-size:13px; color:var(--ink-3); cursor:pointer; }
.esfera .fila-cruce__completa{ font-size:13px; color:var(--ink-2); margin-top:4px; padding-top:4px; border-top:1px solid var(--line); }

/* Tendencia */
.verdad-tendencia{ margin-top:var(--sp-3); }
.verdad-tendencia svg text{ font-family:var(--font-sis); font-variant-numeric:tabular-nums; }