/* Fold · CAPA VISUAL DE COSTE 0 (29/09/2026): semáforo de salud, anillo de «empresa lista», mapa de calor
   de uso, racha e hitos y objetivo del mes. Lo pinta visuales.js; aquí solo el aspecto.
   Movimiento sutil y SOLO con transform/opacity (nada de width, height ni colores animados). El estado
   final es el de reposo: si la animación no corre (prefers-reduced-motion, o el navegador no la hace),
   todo se ve igual, ya lleno. Colores con los tokens de estilos.css y los dos nuevos de aquí. */
:root { --vis-verde: #3DD68C; --vis-rojo: #FF6B5E; --vis-gris: #8F8B83; --vis-vacia: rgba(242, 238, 230, 0.09); }
:root[data-tema="claro"] { --vis-verde: #16804A; --vis-rojo: #C2362C; --vis-gris: #6C6E74; --vis-vacia: #EAE8E1; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) { --vis-verde: #16804A; --vis-rojo: #C2362C; --vis-gris: #6C6E74; --vis-vacia: #EAE8E1; }
}

/* ---------------------------------------------------------------- semáforo (cabecera) */
.vis-semaforo { position: relative; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura); border-radius: 999px; padding: 0 14px 0 11px; height: 36px; min-height: 36px; margin: 0 6px; cursor: pointer; white-space: nowrap; box-shadow: var(--sombra-1); }
.vis-semaforo[hidden] { display: none; }
.vis-semaforo:hover { background: var(--superficie-hover); border-color: var(--costura-fuerte); }
.vis-luz { position: relative; display: inline-block; width: 12px; height: 12px; flex: none; }
.vis-luz.grande { width: 44px; height: 44px; }
.vis-luz i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,.7,.2,1); }
.vis-luz i.verde { background: var(--vis-verde); } .vis-luz i.ambar { background: var(--ambar); } .vis-luz i.rojo { background: var(--vis-rojo); } .vis-luz i.gris { background: transparent; border: 2px solid var(--vis-gris); }
.vis-luz[data-color="verde"] i.verde, .vis-luz[data-color="ambar"] i.ambar, .vis-luz[data-color="rojo"] i.rojo, .vis-luz[data-color="gris"] i.gris { opacity: 1; transform: none; }
/* El halo del rojo: un pulso de opacidad, dos veces y se para (no parpadea para siempre). */
.vis-luz[data-color="rojo"]::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--vis-rojo); opacity: 0; animation: vis-halo 1.4s ease-out 2; }
@keyframes vis-halo { 0% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
.vis-candado-mini { font-size: .8rem; opacity: .8; }

/* ---------------------------------------------------------------- hoja del semáforo */
.vis-salud-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.vis-salud-cab p { margin: 0; }
.vis-salud-frase { font-size: 1.12rem; font-weight: 700; color: var(--papel); }
.vis-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.vis-aviso { position: relative; border: 1px solid var(--costura); border-radius: var(--r-panel); padding: 12px 14px 12px 38px; background: var(--superficie); box-shadow: var(--sombra-1); animation: vis-sube .3s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.vis-aviso::before { content: ''; position: absolute; left: 15px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--vis-gris); box-shadow: 0 0 0 4px var(--grafito-panel); }
.vis-aviso.alta::before { background: var(--vis-rojo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vis-rojo) 18%, transparent); }
.vis-aviso.media::before { background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-tenue); }
.vis-aviso.info::before { background: var(--cobalto-claro); box-shadow: 0 0 0 4px var(--cobalto-tenue); }
.vis-aviso p { margin: 0 0 4px; } .vis-aviso p:last-child { margin-bottom: 0; }
.vis-aviso-titulo { font-weight: 650; color: var(--papel); font-size: .92rem; }
.vis-aviso-texto { font-size: .84rem; color: var(--papel-apagado); }
.vis-aviso-origen { font-size: .74rem; color: var(--papel-tenue); }
.vis-etiqueta { display: inline-block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--papel-tenue); margin-right: 6px; }

/* saldo conocido hoy (dentro de la hoja del semáforo) */
.vis-saldo { margin-top: 18px; padding: 16px; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); display: grid; gap: 6px; animation: vis-sube .35s ease-out both; }
.vis-saldo-cifra { font-size: 1.9rem; font-weight: 760; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.vis-saldo-cifra.negativo, .vis-saldo-importe.negativo { color: var(--vis-rojo); }
.vis-saldo-lista summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: .86rem; color: var(--cobalto-claro); }
.vis-saldo-lista ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.vis-saldo-lista li { font-size: .82rem; color: var(--papel-apagado); border-bottom: 1px solid var(--costura); padding-bottom: 6px; overflow-wrap: anywhere; }
.vis-saldo-importe { font-weight: 700; color: var(--papel); font-feature-settings: 'tnum' 1; }
.vis-aviso-origen { display: block; }

/* ---------------------------------------------------------------- de un vistazo (lateral) */
.vis-vistazo[hidden] { display: none; }
.vis-vistazo[hidden] + .bloque { margin-top: 0; padding-top: 0; border-top: 0; }
.vis-tarjeta { display: grid; gap: 6px; }
.vis-tarjeta + .vis-tarjeta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--costura); }
.vis-tarjeta-titulo { margin: 0; font-size: .8rem; font-weight: 600; color: var(--papel-apagado); }
.vis-fila { display: flex; align-items: center; gap: 14px; }
.vis-cifra { margin: 0; font-size: 1.75rem; font-weight: 780; line-height: 1; letter-spacing: -0.02em; color: var(--papel); font-feature-settings: 'tnum' 1; font-variation-settings: 'wdth' 112; }
.vis-nota { margin: 0; font-size: .78rem; color: var(--papel-tenue); line-height: 1.4; }
.vis-bloqueada { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--papel-apagado); margin: 0; }
.vis-vistazo .bloqueo-plan { margin-top: 12px; }
.vis-vistazo .bloqueo-plan .opciones button { color: var(--papel); border-color: var(--costura-fuerte); }

/* anillo segmentado: cada paso hecho se enciende al aparecer */
.vis-anillo { width: 76px; height: 76px; flex: none; }
.vis-anillo .seg { fill: none; stroke-width: 8; stroke: var(--vis-vacia); }
.vis-anillo .seg.hecho { stroke: var(--cobalto); transform-box: view-box; transform-origin: 50% 50%; animation: vis-seg .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.vis-anillo.completo .seg.hecho { stroke: var(--vis-verde); }
.vis-anillo text { fill: var(--papel); font: 800 15px 'Archivo', system-ui, sans-serif; }
@keyframes vis-seg { from { opacity: 0; transform: rotate(-12deg) scale(.9); } }

/* racha: la tira de los últimos 14 días */
.vis-tira { display: flex; gap: 4px; margin: 4px 0 2px; }
.vis-tira span { width: 12px; height: 12px; border-radius: 3px; background: var(--vis-vacia); animation: vis-sube .3s ease-out both; animation-delay: calc(var(--i, 0) * 25ms); }
.vis-tira span.activo { background: var(--cobalto); }
.vis-tira span.libre { background: transparent; border: 1px dashed var(--costura-fuerte); }
.vis-tira span.hoy { background: transparent; border: 1px solid var(--cobalto-claro); }
.vis-hitos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.vis-hitos li { font-size: .74rem; font-weight: 550; color: var(--papel-tenue); background: var(--grafito-panel); border: 1px solid transparent; border-radius: 999px; padding: 2px 10px; }
.vis-hitos li.si { color: var(--cobalto-claro); background: var(--cobalto-tenue); }

/* objetivo: la barra se llena con transform (scaleX), nunca con width */
.vis-barra { height: 8px; border-radius: 999px; background: var(--vis-vacia); overflow: hidden; }
.vis-barra span { border-radius: inherit; }
.vis-barra span { display: block; height: 100%; width: 100%; background: var(--cobalto); transform-origin: 0 50%; animation: vis-llenar .8s cubic-bezier(.2,.7,.2,1) both; }
.vis-barra span.cumplido { background: var(--vis-verde); }
@keyframes vis-llenar { from { transform: scaleX(0); } }
.vis-objetivo-form { display: grid; gap: 8px; margin-top: 6px; }
.vis-objetivo-form[hidden] { display: none; }
.vis-objetivo-form select, .vis-objetivo-form input { font: inherit; font-size: .9rem; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); height: 44px; padding: 0 10px; width: 100%; }
.vis-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.vis-boton { font: inherit; font-size: .82rem; font-weight: 550; min-height: 44px; padding: 0 14px; background: var(--superficie); color: var(--papel); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; box-shadow: var(--sombra-1); }
.vis-boton:hover { background: var(--superficie-hover); border-color: var(--papel-tenue); }
.vis-boton.primera { background: var(--cobalto); border-color: var(--cobalto); color: #fff; }

/* ---------------------------------------------------------------- mapa de calor (Cuenta › Uso) */
.vis-mapa-caja { margin-top: 18px; }
.vis-mapa-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.vis-mapa-cab select { font: inherit; font-size: .84rem; font-weight: 550; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); height: 40px; padding: 0 10px; max-width: 100%; box-shadow: var(--sombra-1); }
/* 53 semanas no caben legibles en 480 px: la caja se desplaza sola (nunca la página) y arranca en lo reciente. */
.vis-mapa-scroll { overflow-x: auto; margin-top: 10px; }
.vis-mapa { display: block; width: 100%; min-width: 640px; height: auto; }
.vis-mapa .c { fill: var(--vis-vacia); }
.vis-mapa .c.n1 { fill: var(--cobalto); fill-opacity: .3; } .vis-mapa .c.n2 { fill: var(--cobalto); fill-opacity: .52; }
.vis-mapa .c.n3 { fill: var(--cobalto); fill-opacity: .76; } .vis-mapa .c.n4 { fill: var(--cobalto); fill-opacity: 1; }
.vis-mapa .c:hover, .vis-mapa .c.elegida { stroke: var(--papel); stroke-width: 1.5; }
.vis-mapa .col { animation: vis-col .4s ease-out both; animation-delay: calc(var(--i, 0) * 9ms); }
.vis-mapa text { fill: var(--papel-tenue); font: 500 9px 'Archivo', system-ui, sans-serif; }
@keyframes vis-col { from { opacity: 0; transform: translateY(4px); } }
.vis-leyenda { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--papel-tenue); margin-top: 6px; }
.vis-leyenda i { width: 10px; height: 10px; border-radius: 2px; background: var(--vis-vacia); display: inline-block; }
.vis-leyenda i.n1 { background: rgba(51, 88, 255, .3); } .vis-leyenda i.n2 { background: rgba(51, 88, 255, .52); } .vis-leyenda i.n3 { background: rgba(51, 88, 255, .76); } .vis-leyenda i.n4 { background: var(--cobalto); }
.vis-detalle { min-height: 1.4em; margin: 6px 0 0; font-size: .82rem; color: var(--papel-apagado); }

@keyframes vis-sube { from { opacity: 0; transform: translateY(4px); } }

/* En el cajón (solo en móvil): el mismo semáforo como tarjeta pulsable. */
.vis-semaforo-tarjeta { display: none; width: 100%; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 16px; padding: 8px 14px; font: inherit; font-size: .9rem; font-weight: 600; text-align: left; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura); border-radius: var(--r-panel); box-shadow: var(--sombra-1); cursor: pointer; }
/* En móvil la fila de botones de la cabecera ya va justa (un botón más la hacía 8 px más ancha que la
   pantalla): el semáforo pasa al cajón y el botón del cajón lleva un punto con su color. */
@media (max-width: 640px) {
  .vis-semaforo { display: none; }
  .vis-semaforo-tarjeta { display: flex; }
  .panel-boton { position: relative; }
  .panel-boton[data-vis-color]::after { content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--vis-gris); box-shadow: 0 0 0 2px var(--grafito); }
  .panel-boton[data-vis-color="verde"]::after { background: var(--vis-verde); }
  .panel-boton[data-vis-color="ambar"]::after { background: var(--ambar); }
  .panel-boton[data-vis-color="rojo"]::after { background: var(--vis-rojo); }
}

@media (prefers-reduced-motion: reduce) {
  .vis-luz i { transition: none; }
  .vis-luz[data-color="rojo"]::after, .vis-aviso, .vis-saldo, .vis-anillo .seg.hecho, .vis-tira span, .vis-barra span, .vis-mapa .col { animation: none; }
}