/* dataviz.css — waterfall (modo recibo + cascada), cinta de tallos, subsidio cruzado.
   Reglas comunes (seccion 5): titulo en forma de pregunta + frase de conclusion; SVG a mano;
   contorno de 1px en toda marca de dato; toque escribe una linea fija, nunca tooltip flotante. */

.pregunta{ font-size:15px; color:var(--ink-2); margin-bottom:var(--sp-4); max-width:56ch; }

/* ===== Waterfall, modo recibo (<720px) ===== */
.recibo{ display:flex; flex-direction:column; }
.recibo__fila{
  display:grid; grid-template-columns: 1fr auto; column-gap:var(--sp-3); row-gap:2px;
  padding:var(--sp-2) 0; align-items:center;
}
.recibo__rotulo{ font-size:14px; color:var(--ink-2); grid-column:1; }
.recibo__monto{ font-size:15px; font-weight:600; grid-column:2; text-align:right; min-width:11ch; }
.recibo__barra-pista{ grid-column:1/-1; height:22px; background:var(--paper-2); border-radius:var(--r-xs); overflow:hidden; margin-top:3px; }
.recibo__barra{ height:100%; border-radius:var(--r-xs); }
.recibo__fila--neto{ border-top:1px solid var(--line-fuerte); margin-top:var(--sp-2); padding-top:var(--sp-3); }
.recibo__fila--neto .recibo__rotulo{ font-weight:700; color:var(--ink); }
.recibo__fila--neto .recibo__monto{ font-size:17px; }
.recibo__nota{ font-size:var(--t-micro); color:var(--ink-3); margin-top:var(--sp-3); min-height:1.4em; }

/* ===== Waterfall clasico (>=720px), dibujado en SVG por js/dataviz/waterfall.js ===== */
.waterfall-svg{ width:100%; height:auto; overflow:visible; }
.waterfall-svg rect{ stroke-width:1px; }
.waterfall-svg .conector{ stroke:var(--line-fuerte); stroke-dasharray:2 2; }
.waterfall-svg text{ font-family:var(--font-sis); font-variant-numeric:tabular-nums; }

/* ===== Cinta de tallos ===== */
.cinta-tallos{ display:flex; }
.cinta-tallos__columna{
  flex:1; min-width:44px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  height:120px; cursor:pointer; padding: 0 2px; border:none; background:none;
}
.cinta-tallos__columna--vencido{ border-right:2px dashed var(--line-fuerte); margin-right:var(--sp-1); padding-right:var(--sp-1); }
/* Columnas gruesas: el tallo ocupa 66% de la columna, asi el hueco entre dos tallos mide la
   mitad del ancho del tallo (gap 50%). Nada de barras delgaditas. */
.cinta-tallos__tallo{
  width:66%; max-width:48px; align-self:center;
  border-radius:var(--r-xs) var(--r-xs) 0 0; border:1.5px solid; box-sizing:border-box;
}
.cinta-tallos__tallo--recortado{ position:relative; }
.cinta-tallos__tallo--recortado::before{
  content:""; position:absolute; left:0; right:0; top:-7px; height:7px;
  background:inherit; clip-path:polygon(0 100%, 50% 0, 100% 100%);
}
.cinta-tallos__numero{ font-size:11px; font-weight:600; margin-top:4px; color:var(--ink-2); }
.cinta-tallos__etiqueta{ font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.cinta-tallos__linea{ margin-top:var(--sp-3); font-size:14px; }
.cinta-tallos__linea .num{ font-weight:600; }

/* ===== Subsidio cruzado: barra de dos tramos ===== */
.subsidio-fila{ margin: var(--sp-4) 0; }
.subsidio-fila__cabecera{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin-bottom:6px; gap:var(--sp-2); }
.subsidio-fila__nombre{ display:flex; align-items:center; gap:7px; font-weight:600; }
.subsidio-fila__punto{ width:10px; height:10px; border-radius:3px; flex:none; }
.subsidio-fila__monto{ font-weight:700; }
.subsidio-fila__pista{ position:relative; height:26px; background:var(--paper-2); border-radius:var(--r-xs); overflow:visible; }
.subsidio-fila__eje-cero{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--line-fuerte); left:38%; }
.subsidio-fila__tramo{ position:absolute; top:0; bottom:0; border-radius:var(--r-xs); }
.subsidio-fila__tramo--aporte{ background:var(--dato-1); }
.subsidio-fila__tramo--carga{ background-color:var(--neutro-suave); }
.subsidio-fila__nota{ font-size:12px; color:var(--ink-3); margin-top:4px; }
.subsidio-fila--c .subsidio-fila__tramo{ background:var(--neg); border-left:3px solid var(--neg); }
.subsidio-leyenda{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-4); font-size:13px; color:var(--ink-2); }
.subsidio-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.subsidio-leyenda .muestra{ width:14px; height:14px; border-radius:3px; flex:none; }
.subsidio-frase{
  font-family:var(--font-marca); font-size:16px; line-height:1.5; margin-top:var(--sp-5);
  padding-top:var(--sp-4); border-top:1px solid var(--line);
}
.subsidio-fija{ font-size:13px; color:var(--ink-3); margin-top:var(--sp-3); }
.subsidio-cinta-txt{ font-size:13px; color:var(--ink-2); margin:var(--sp-2) 0; }
.subsidio-auditoria{ font-size:13px; color:var(--ink-2); margin-top:var(--sp-3); background:var(--paper-2); border-radius:var(--r-sm); padding:var(--sp-3); }

/* ===== Margen por producto ===== */
.margen-fila{ padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.margen-fila:last-child{ border-bottom:none; }
.margen-fila__l1{ display:flex; justify-content:space-between; gap:var(--sp-3); font-size:15px; font-weight:600; }
.margen-fila__l2{ display:flex; justify-content:space-between; gap:var(--sp-3); font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.margen-fila__nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.margen-fila__contribucion{ font-variant-numeric:tabular-nums; flex:none; }
.margen-sin-receta{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px dashed var(--line-fuerte); }
.margen-sin-receta__titulo{ font-size:13px; color:var(--ink-3); margin-bottom:var(--sp-2); }

/* ===== Composicion de producto (barra apilada 100%) ===== */
.composicion-barra{ display:flex; height:28px; border-radius:var(--r-xs); overflow:hidden; background:var(--paper-2); gap:1px; }
.composicion-seg{ min-width:2px; }
.composicion-escalera__fila{ display:flex; justify-content:space-between; font-size:13.5px; padding:5px 0; border-bottom:1px solid var(--line); }
.composicion-escalera__fila:last-child{ border-bottom:none; font-weight:700; }
.composicion-seg--trama{ background-image: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 6px); }
.composicion-punto{ width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:6px; flex:none; }

/* ===== D2: variantes de estado sobre .margen-fila (docs/diseno/precio-y-alerta-margen-v1.md,
   seccion 5). El color acompaña, nunca decide solo: la posicion del termometro + la palabra en
   l2/hecho hacen el resto de la redundancia (regla D2/3.7). ===== */
.margen-fila--perdida{ border-left:3px solid var(--neg); padding-left:var(--sp-3); margin-left:calc(var(--sp-3) * -1); }
.margen-fila--perdida .margen-fila__contribucion{ color:var(--neg); }
.margen-fila--flaco{ border-left:3px solid var(--flaco); padding-left:var(--sp-3); margin-left:calc(var(--sp-3) * -1); }
.margen-fila--flaco .margen-fila__contribucion{ color:var(--flaco-ink); }
.margen-fila__hecho{ font-size:13.5px; color:var(--ink-2); margin-top:2px; }
.margen-fila__accion{ margin-top:var(--sp-2); }

/* ===== El termometro de margen (D1/D2, seccion 5): barra fina divergente desde "aca empatas"
   (precio=costo), con tick punteado en el objetivo. Contorno de 1px en todo relleno (regla del
   contorno, 3.3): lo pone JS via color-mix inline, igual que composicion/waterfall/cinta. ===== */
.termometro-margen{
  position:relative; height:20px; background:var(--paper-2); border-radius:var(--r-xs);
  margin:var(--sp-2) 0 6px; overflow:visible;
}
.termometro-margen__cero{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--line-fuerte); }
.termometro-margen__objetivo{
  position:absolute; top:-6px; bottom:-6px; width:0; border-left:2px dashed var(--ink-3);
}
.termometro-margen__barra{ position:absolute; top:1px; bottom:1px; border-radius:var(--r-xs); border-width:1px; border-style:solid; }
/* trama cruzada: estado perdida (misma trama que el estado C del subsidio). El color de la trama
   se fija en color-mix contra --paper (NUNCA currentColor sobre el mismo background-color: eso
   dejaba el patron invisible, bug real encontrado validando en vivo: un relleno solido "perdida"
   sin ninguna trama visible, solo color). */
.termometro-margen__barra--trama{
  background-image: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--neg) 40%, var(--paper)) 3px 7px);
}
/* trama de puntos: estado incompleto ("no se" del costo real, 3.3), nunca solida como un dato firme.
   Mismo motivo que arriba: color-mix explicito, no currentColor. */
.termometro-margen__barra--puntos{
  background-image: radial-gradient(circle, color-mix(in srgb, var(--neutro-medio) 45%, var(--paper)) 1.3px, transparent 1.4px);
  background-size: 6px 6px;
}
.termometro-margen__etiqueta{ font-size:12.5px; color:var(--ink-3); text-align:right; margin-top:-2px; }

/* ===== El veredicto de precio (D1), pegado al campo de precio del detalle ===== */
.veredicto-precio{ margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.veredicto-precio__cuerpo{ font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.veredicto-precio__cuerpo strong{ color:var(--ink); font-weight:700; }
.veredicto-precio__nota{ font-size:var(--t-micro); color:var(--ink-3); margin-top:var(--sp-2); }
.veredicto-precio__chips{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
.veredicto-precio--perdida .veredicto-precio__cuerpo strong{ color:var(--neg); }
.veredicto-precio--flaco .veredicto-precio__cuerpo strong{ color:var(--flaco-ink); }
.veredicto-precio--sano .veredicto-precio__cuerpo strong{ color:var(--pos); }
.veredicto-objetivo{ margin-top:var(--sp-3); }
.veredicto-objetivo .chips{ margin-top:var(--sp-2); }

/* ===== D2: el nudge por evento de Hoy (seccion 3.3), estilo fila de riesgo pero con lede serif ===== */
.nudge-margen__lede{ font-family:var(--font-marca); font-size:var(--t-lede); line-height:1.45; margin:2px 0 var(--sp-1); }
.nudge-margen__meta{ font-size:13px; color:var(--ink-2); margin-bottom:var(--sp-3); }
.nudge-margen__silenciar{
  display:inline-flex; align-items:center; min-height:36px; margin-top:2px; padding:4px 0;
  font-size:12.5px; color:var(--ink-3); background:none; border:none; cursor:pointer; text-decoration:underline;
}

@media (min-width:720px){
  .cinta-tallos__columna{ min-width:60px; }
}

.recibo__barra--trama{ background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 3px, transparent 3px 6px); }

@media (max-width:719px){ .waterfall-cascada{ display:none; } }
@media (min-width:720px){ .recibo{ display:none; } }

/* ===== El DESPIECE recursivo (Fase 4.1, docs/diseno/fase41-subreceta-cruzada-v1.md seccion 3 y
   7): la barra apilada matrioska. Reusa .composicion-barra/.composicion-seg/.composicion-punto
   tal cual; lo unico nuevo es el grupo por segmento, el riel de la rama y el boton de abrir. ===== */
.despiece__barra{ margin-bottom:var(--sp-3); }
.despiece__grupo{ margin-bottom:2px; }
.despiece__linea{ padding:5px 0; }
.despiece__senal{ margin:-2px 0 4px; }
.despiece__abrir{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 var(--sp-2) 0 0;
  background:none; border:none; color:var(--marca-ink); font-size:13px; font-weight:600; cursor:pointer;
}
.despiece__abrir:focus-visible{ outline:2px solid var(--marca-ink); outline-offset:2px; border-radius:4px; }
.despiece__seguir{ margin-left:var(--sp-2); }
/* El riel: hereda el color del segmento padre por variable inline (--rama-color). Asi se traza
   "esta rama salio de aquel pedazo" sin depender solo del color (el encabezado repite el nombre). */
.despiece__rama{
  margin: var(--sp-2) 0 var(--sp-4) var(--sp-2); padding-left:var(--sp-4);
  border-left:2px solid var(--rama-color, var(--line-fuerte));
}
.despiece__rama-encabezado{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2);
  font-size:14px; font-weight:600; margin-bottom:var(--sp-2);
}
/* Crece una vez desde arriba al revelarse (ux-app 3.7); con prefers-reduced-motion no se agrega
   la clase (ver dataviz.js), asi que esta regla nunca corre en ese caso. */
.despiece__rama--entra{ animation: despiece-entra var(--mo-dato) var(--e-dato); }
@keyframes despiece-entra{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* Agrupa una .receta-fila con su segunda linea opcional ("ver de que esta hecho"/senal cruzada):
   el borde vive aca (no en .receta-fila, que sigue siendo flex de una sola linea). */
.receta-fila-grupo{ border-bottom:1px solid var(--line); }
.receta-fila-grupo:last-child{ border-bottom:none; }
.receta-fila-grupo .receta-fila{ border-bottom:none; }

/* La fila de receta que es un producto compuesto (seccion 2.2 del diseno de Fase 4.1). */
.receta-fila--producto .receta-fila__nombre{ color:var(--ink); }
.receta-fila__glifo{ margin-right:5px; color:var(--ink-3); font-style:normal; }
.receta-fila__ver{ display:flex; align-items:center; font-size:12.5px; color:var(--marca-ink); text-decoration:none; min-height:44px; }
.receta-fila__ver:hover{ text-decoration:underline; }
.receta-fila--error{ border-left:3px solid var(--neg); padding-left:var(--sp-3); margin-left:calc(var(--sp-3) * -1); }

/* La senal cruzada propagada, tenue (seccion 6.1.b): nunca sola, siempre con ▲ + la palabra. */
.senal-cruzada{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--flaco-ink); }
.senal-cruzada--perdida{ color:var(--neg); }
.senal-cruzada__punto{ width:8px; height:8px; border-radius:3px; background:currentColor; flex:none; }

/* Segmento de composicion incompleto (D4): reusa la trama de puntos del termometro, nunca solido
   como un dato firme (mismo color-mix explicito, jamas currentColor sobre su propio fondo). */
.composicion-seg--incompleto{
  background-image: radial-gradient(circle, color-mix(in srgb, var(--neutro-medio) 45%, var(--paper)) 1.3px, transparent 1.4px);
  background-size: 6px 6px; background-color: var(--neutro-medio);
}

/* ===== El buscador unico "+ Agregar a la receta" (seccion 2.1): dos grupos con encabezado,
   marca de FORMA ademas de color (glifo ▤/◦) para distinguir producto de insumo. ===== */
.buscador-receta{
  background:var(--paper-2); border-radius:var(--r-sm); padding:var(--sp-4);
  margin:var(--sp-2) 0 var(--sp-4); max-height:360px; overflow-y:auto;
}
.buscador-receta__campo{ margin-bottom:var(--sp-3); margin-top:var(--sp-3); }
.buscador-receta__grupo-titulo{
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); margin:var(--sp-3) 0 4px;
}
.buscador-receta__fila{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:var(--sp-2);
  min-height:44px; padding:6px 0; background:none; border:none; border-bottom:1px solid var(--line);
  text-align:left; cursor:pointer; font-size:13.5px; color:var(--ink);
}
.buscador-receta__fila:last-child{ border-bottom:none; }
.buscador-receta__fila:hover, .buscador-receta__fila:focus-visible{ background:var(--paper-2); }
.buscador-receta__fila[disabled]{ color:var(--ink-3); cursor:default; }
.buscador-receta__fila[disabled]:hover{ background:none; }
.buscador-receta__meta{ color:var(--ink-3); font-size:12px; flex:none; text-align:right; max-width:46%; }
.buscador-receta__vacio{ font-size:13px; color:var(--ink-3); padding:var(--sp-3) 0; }

/* El cierre del dia (7C.3) SIEMPRE es "modo recibo" (una lista, como un ticket), nunca la
   cascada SVG, sin importar el ancho de la ventana: el modal de escritorio mide 560px pero la
   ventana de Dario puede ser mucho mas ancha, y la regla de arriba mira el viewport, no el
   contenedor. */
.cierre-dia__recibo .waterfall-cascada{ display:none; }
.cierre-dia__recibo .recibo{ display:flex; }