/* WebMatic · Negocio (Ingresos y Analíticas). Gráficas en HTML/CSS.
   Paleta de datos validada (dataviz validate_palette, claro y oscuro): serie 1 violeta, serie 2 naranja.
   El rosa Monkey queda para la marca, no para datos. Texto siempre en tokens de tinta, nunca en el color de la serie. */
:root { --fz-1: #6A35F0; --fz-2: #E8740C; --fz-pista: var(--hundido); }
html[data-tema="oscuro"] { --fz-1: #8E65FF; --fz-2: #E0701A; }

/* KPIs: rejilla flexible (3 por fila en escritorio) */
.fz-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fz-kpis .kpi-nota { line-height: 1.4; }
.fz-delta { font-weight: 700; color: var(--verde); white-space: nowrap; }
.fz-delta.baja { color: var(--rojo); }
.kpi.marca-kpi .fz-delta { color: #fff; }
.kpi.fz-negativo .kpi-val { color: var(--rojo); }
.fz-meta { display: block; height: 8px; margin: 10px 0 2px; border-radius: 99px; background: var(--fz-pista); overflow: hidden; }
.fz-meta i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--fz-1); }

/* Controles en la cabecera */
.fz-prueba { margin: 0; }
.fz-prueba label.check { margin: 0; font-size: .86rem; color: var(--tinta-2); padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); }
.fz-periodo { margin: 0; }
.fz-periodo select { min-height: 34px; width: auto; padding-top: 4px; padding-bottom: 4px; font-size: .86rem; margin: 0; }
.fz-nota { margin: 0 0 14px; color: var(--apagado); font-size: .86rem; max-width: 72ch; }
.fz-pie { padding-top: 12px; }
.fz-pie .fz-nota, .fz-sin-pie .fz-nota { margin: 0; }
.fz-sin-pie { padding-bottom: 12px; }
.fz-consejo { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--violeta-suave); color: var(--tinta); font-size: .9rem; }
.fz-consejo .ic { color: var(--violeta-texto); margin-top: 2px; }
.panel.fz-atencion { border-color: color-mix(in srgb, var(--ambar-punto) 45%, var(--linea)); }

/* ---------- Gráfica de columnas ---------- */
.fz-graf { margin: 0; }
.fz-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: .82rem; color: var(--tinta-2); }
.fz-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.fz-leyenda i { width: 12px; height: 12px; border-radius: 3px; }
.fz-s1 { background: var(--fz-1); }
.fz-s2 { background: var(--fz-2); }
.fz-plot { position: relative; height: 230px; padding: 10px 0 26px 48px; }
.fz-rejilla { position: absolute; left: 48px; right: 0; top: 10px; bottom: 26px; pointer-events: none; }
.fz-rejilla span { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--linea); }
.fz-rejilla span:last-child { border-top-color: var(--linea-fuerte); }
.fz-rejilla em { position: absolute; right: calc(100% + 8px); top: 0; transform: translateY(-50%); font: 500 .72rem/1 var(--f-texto); font-style: normal; color: var(--apagado); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fz-cols { position: relative; height: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.fz-col { position: relative; height: 100%; display: flex; border-radius: 8px; outline: none; cursor: default; }
.fz-col:hover, .fz-col:focus-visible { background: color-mix(in srgb, var(--violeta-suave) 70%, transparent); }
.fz-col:focus-visible { box-shadow: var(--anillo); }
.fz-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.fz-b { position: relative; width: min(24px, 58%); height: var(--h); min-height: 0; border-radius: 4px 4px 0 0; transition: height .5s var(--ease); }
.fz-graf.doble .fz-b { width: min(14px, 40%); }
.fz-b.cero { height: 0; }
.fz-b em { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font: 600 .72rem/1 var(--f-texto); font-style: normal; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fz-x { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: .72rem; color: var(--apagado); white-space: nowrap; }
.fz-col.actual .fz-x { color: var(--tinta); font-weight: 600; }
.fz-proy .fz-col.actual .fz-x { color: var(--apagado); font-weight: 400; }
.fz-proy .fz-col:first-child .fz-x { color: var(--tinta); font-weight: 600; }
/* Tooltip (hover y foco con teclado o dedo) */
.fz-col::after { content: attr(data-tip); position: absolute; z-index: 3; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 6px)); width: max-content; max-width: 220px;
  padding: 7px 10px; border-radius: 9px; background: var(--tinta); color: var(--superficie); font: 500 .78rem/1.35 var(--f-texto); box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; white-space: normal; text-align: left; }
.fz-col:hover::after, .fz-col:focus::after { opacity: 1; visibility: visible; }
.fz-col:nth-child(-n+2)::after { left: 0; transform: translate(0, calc(-100% - 6px)); }
.fz-col:nth-last-child(-n+2)::after { left: auto; right: 0; transform: translate(0, calc(-100% - 6px)); }
.fz-tabla { margin-top: 18px; }
.fz-tabla table { font-size: .86rem; }
@media (max-width: 640px) {
  .fz-plot { height: 200px; padding-left: 40px; }
  .fz-rejilla { left: 40px; }
  .fz-graf .fz-col:nth-last-child(even) .fz-x { visibility: hidden; }
  .fz-x { font-size: .66rem; }
  .fz-b em { font-size: .66rem; }
}

/* ---------- Barras horizontales ---------- */
.fz-hb, .fz-embudo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fz-hb li, .fz-embudo li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.fz-hb-et { font-weight: 600; font-size: .9rem; min-width: 0; }
.fz-hb-et a { color: var(--tinta); text-decoration: none; }
.fz-hb-et a:hover { color: var(--violeta-texto); text-decoration: underline; }
.fz-hb-val { font-weight: 600; font-size: .9rem; text-align: right; }
.fz-hb-val small, .fz-emb-val small { display: block; font-weight: 500; color: var(--apagado); font-size: .76rem; }
.fz-hb-pista { grid-column: 1 / -1; height: 10px; border-radius: 0 5px 5px 0; background: var(--fz-pista); overflow: hidden; }
.fz-hb-pista i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.fz-hb-pista i.fz-s1 { background: var(--fz-1); }
.fz-hb-pista i.fz-s2 { background: var(--fz-2); }
.fz-embudo { gap: 16px; }
.fz-emb-et b { display: block; font-size: .94rem; }
.fz-emb-et small { display: block; color: var(--apagado); font-size: .8rem; }
.fz-emb-val { text-align: right; }
.fz-emb-val b { font: 600 1.15rem/1.1 var(--f-titulo); }
.fz-embudo li.fz-atoron .fz-emb-et b::after { content: "Aquí se atoran"; display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--ambar-suave); color: var(--ambar); font: 600 .7rem/1.4 var(--f-texto); vertical-align: 2px; }

/* ---------- Listas y tablas ---------- */
.fz-grupo { display: flex; justify-content: space-between; align-items: center; padding: 9px 18px; background: var(--lienzo); border-top: 1px solid var(--linea); font: 600 .74rem var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.lista > .fz-grupo:first-child { border-top: 0; }
.fz-grupo b { font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--tinta); }
tr.fz-mejor td { background: color-mix(in srgb, var(--verde-suave) 70%, transparent); }
tfoot td { padding: 12px 14px; background: var(--lienzo); border-top: 1px solid var(--linea); font-weight: 600; }
.fz-campos2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .tabla.apilable tfoot, .tabla.apilable tfoot tr { display: flex; justify-content: space-between; align-items: center; }
  .tabla.apilable tfoot td { display: block; padding: 12px 16px; border: 0; }
  .tabla.apilable tfoot td:first-child { flex: 1; }
  .fz-prueba label.check { padding: 10px 12px; }
}
@media (max-width: 420px) { .fz-campos2 { grid-template-columns: 1fr; } }
.panel-cab:has(.fz-periodo) { padding-block: 8px; }
@media (max-width: 640px) {
  .fz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fz-kpis .kpi { padding: 14px; }
  .fz-kpis .kpi.marca-kpi { grid-column: 1 / -1; }
  .fz-kpis .kpi:not(.marca-kpi) .kpi-val { font-size: 1.3rem; }
  .fz-kpis .kpi:not(.marca-kpi) .kpi-val small { display: block; margin: 2px 0 0; }
  .fz-kpis .kpi-et { font-size: .78rem; }
  .fz-kpis .kpi-nota { font-size: .74rem; }
}
.fz-emb-pct { grid-column: 1 / -1; font-size: .8rem; color: var(--apagado); font-variant-numeric: tabular-nums; }
.fz-emb-pct b { color: var(--tinta-2); }
.fz-hb-pista i[style*="width:0%"] { min-width: 0; }
@media (max-width: 767px) {
  .tabla.apilable.fz-nt tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .tabla.apilable.fz-nt td.t-principal { flex: 1 1 calc(100% - 100px); order: 0; }
  .tabla.apilable.fz-nt td.t-lado { order: 1; margin-left: auto; }
  .tabla.apilable.fz-nt td[data-et] { order: 2; display: inline-flex; flex: none; gap: 4px; font-size: .8rem; }
  .tabla.apilable.fz-nt td[data-et]::before { content: attr(data-et); min-width: 0; font-size: .78rem; }
}
/* dentro de una rejilla los paneles hermanos no llevan margen extra (si no, la segunda columna baja 18px) */
.rejilla > .panel + .panel, .rejilla > .panel + form.panel, .rejilla > form.panel + .panel { margin-top: 0; }