/* ==========================================================================
   AMV — Panel de gestión (demo con datos inventados)
   Se carga después de styles.css y herramientas.css. Prefijo p-.
   Mismas reglas del manual: sin sombras ni degradados. Las superficies se
   separan con fondo y filete, no con relieve.
   ========================================================================== */

:root{
  --p-fondo: var(--neutro-100);
  --p-borde: #E1E6EC;
  --p-sube: var(--verde-prof);
  --p-sube-fondo: var(--verde-100);
  --p-baja: #8A3226;
  --p-baja-fondo: #F7E9E6;
  --p-ocre: #C08A3E;
  --p-alerta: #A33A2E;
}

.p-app{ background:var(--p-fondo); padding-bottom:var(--banda); border-top:var(--linea); }

/* --- Barra de controles (queda fija debajo del encabezado) ------------------- */
.p-barra{
  /* Queda pegada debajo del encabezado ya compactado (114 px de logo → 95 px
     de alto). Es un valor fijo a propósito: si siguiera la altura del
     encabezado mientras se achica, el navegador corrige el scroll, el
     encabezado cambia otra vez y la página tiembla en un bucle. */
  position:sticky; top:95px; z-index:25; overflow-anchor:none;
  background:color-mix(in srgb, var(--p-fondo) 92%, transparent);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--p-borde);
}
.p-barra__int{ display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; justify-content:space-between; padding-block:12px; }
.p-grupo{ display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; }
.p-periodos{ width:auto; }
.p-periodos button{ padding:8px 14px; font-size:13.5px; white-space:nowrap; }

.p-select{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--neutro-700); }
.p-select select{
  font:inherit; font-size:13.5px; font-weight:500; color:var(--carbon);
  padding:8px 30px 8px 12px; border:1px solid var(--neutro-300); border-radius:var(--r-pill); background:var(--blanco);
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5F5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
}

.p-filtro{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:13.5px; font-weight:500; color:var(--carbon);
  padding:8px 12px 8px 14px; border:1px solid var(--neutro-300); border-radius:var(--r-pill); background:var(--blanco); cursor:pointer;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.p-filtro:hover{ border-color:var(--verde); }
.p-filtro[aria-expanded="true"]{ border-color:var(--verde); background:var(--verde-100); }
.p-filtro.activo{ border-color:var(--verde); background:var(--verde-100); color:var(--verde-900); }
.p-filtro__n{ min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill); background:var(--verde); color:var(--blanco); font-size:11px; font-weight:600; display:none; place-items:center; }
.p-filtro.activo .p-filtro__n{ display:inline-grid; }
.p-filtro .ico{ width:14px; height:14px; color:var(--verde-prof); }

.p-interruptor{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--carbon); cursor:pointer; user-select:none; }
.p-interruptor input{ position:absolute; opacity:0; width:1px; height:1px; }
.p-interruptor__riel{ width:34px; height:20px; border-radius:var(--r-pill); background:var(--neutro-300); position:relative; transition:background-color var(--t) var(--ease); flex:none; }
.p-interruptor__riel::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--blanco); transition:transform var(--t) var(--ease-out); }
.p-interruptor input:checked + .p-interruptor__riel{ background:var(--verde); }
.p-interruptor input:checked + .p-interruptor__riel::after{ transform:translateX(14px); }
.p-interruptor input:focus-visible + .p-interruptor__riel{ outline:2px solid var(--verde-prof); outline-offset:2px; }

.p-boton{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--verde-prof);
  padding:8px 14px; border:1px solid var(--verde-200); border-radius:var(--r-pill); background:var(--blanco); cursor:pointer;
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.p-boton:hover{ background:var(--verde-100); border-color:var(--verde); }
.p-boton .ico{ width:16px; height:16px; }

/* En el celular la barra no queda fija (ocuparía media pantalla) y los
   controles bajan de renglón en vez de esconderse a la derecha. */
@media (max-width:899px){
  .p-barra{ position:static; }
  .p-barra__int{ justify-content:flex-start; }
  .p-periodos{ width:100%; }
  .p-periodos button{ padding:8px 6px; }
}

/* Menú de opciones de cada filtro */
.p-pop{
  position:fixed; z-index:60; width:280px; max-height:min(420px, 70vh); overflow:auto;
  background:var(--blanco); border:1px solid var(--neutro-300); border-radius:var(--r-card);
  padding:var(--e2);
}
.p-pop[hidden]{ display:none; }
.p-pop__titulo{ font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-frio); padding:8px 10px 6px; }
.p-pop label{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  font-size:14.5px; cursor:pointer;
}
.p-pop label:hover{ background:var(--neutro-100); }
.p-pop input{ width:18px; height:18px; accent-color:var(--verde); flex:none; }
.p-pop__punto{ width:10px; height:10px; border-radius:3px; flex:none; }
.p-pop__pie{ display:flex; justify-content:space-between; gap:var(--e2); padding:8px 10px 4px; border-top:1px solid var(--apoyo); margin-top:6px; }
.p-pop__pie button{ font:inherit; font-size:13.5px; font-weight:600; color:var(--verde-prof); background:none; border:0; cursor:pointer; padding:6px 0; }
@media (max-width:699px){
  .p-pop{ left:8px !important; right:8px; top:auto !important; bottom:8px; width:auto; max-height:60vh; border-radius:var(--r-plano); padding:var(--e3); }
}

/* --- Línea de filtros activos --------------------------------------------- */
.p-estado{ display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; padding-block:var(--e3) 0; font-size:13.5px; color:var(--neutro-700); }
.p-chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px;
  border-radius:var(--r-pill); background:var(--carbon); color:var(--blanco); font-size:13px; font-weight:500;
}
.p-chip button{ width:22px; height:22px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:var(--blanco); cursor:pointer; display:grid; place-items:center; }
.p-chip button:hover{ background:rgba(255,255,255,.28); }
.p-chip .ico{ width:12px; height:12px; }
.p-limpiar{ font:inherit; font-size:13.5px; font-weight:600; color:var(--verde-prof); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* --- Grilla --------------------------------------------------------------- */
.p-grilla{ display:grid; gap:var(--e3); margin-top:var(--e3); grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .p-grilla{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (min-width:1100px){ .p-grilla{ grid-template-columns:repeat(12, minmax(0,1fr)); } }
.p-s12{ grid-column:1 / -1; }
@media (min-width:760px){
  .p-s6, .p-s5, .p-s7, .p-s4, .p-s8{ grid-column:span 6; }
  .p-s3{ grid-column:span 3; }
}
@media (min-width:1100px){
  .p-s8{ grid-column:span 8; } .p-s7{ grid-column:span 7; } .p-s6{ grid-column:span 6; }
  .p-s5{ grid-column:span 5; } .p-s4{ grid-column:span 4; } .p-s3{ grid-column:span 3; }
}

.p-card{
  background:var(--blanco); border:1px solid var(--p-borde); border-radius:var(--r-card);
  padding:clamp(16px, 1.6vw, 24px); display:grid; gap:var(--e3); align-content:start; min-width:0;
}
.p-card__cabeza{ display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:flex-start; justify-content:space-between; }
.p-card__titulo{ font-family:var(--f-titulo); font-weight:600; font-size:1.0625rem; letter-spacing:-0.02em; line-height:1.25; }
.p-card__sub{ font-size:13px; color:var(--gris-frio); line-height:1.4; margin-top:2px; }
.p-mini-seg{ display:inline-flex; padding:3px; gap:2px; border:1px solid var(--neutro-300); border-radius:var(--r-pill); }
.p-mini-seg button{ font:inherit; font-size:12.5px; font-weight:500; color:var(--neutro-700); padding:5px 10px; border:0; border-radius:var(--r-pill); background:none; cursor:pointer; }
.p-mini-seg button[aria-pressed="true"]{ background:var(--carbon); color:var(--blanco); }

/* --- Indicadores ------------------------------------------------------------ */
.p-kpis{ display:grid; gap:var(--e3); grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:760px){ .p-kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1100px){ .p-kpis{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
.p-kpi{ background:var(--blanco); border:1px solid var(--p-borde); border-radius:var(--r-card); padding:16px 18px 12px; display:grid; gap:6px; min-width:0; }
.p-kpi__rotulo{ font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-frio); }
.p-kpi__valor{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing:-0.035em; line-height:1.05; font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-kpi__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--gris-frio); }
.p-kpi svg{ width:100%; height:34px; display:block; margin-top:4px; }
@media (max-width:759px){ .p-kpis > :last-child{ grid-column:1 / -1; } }

.p-var{ display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-var.sube{ background:var(--p-sube-fondo); color:var(--p-sube); }
.p-var.baja{ background:var(--p-baja-fondo); color:var(--p-baja); }
.p-var.igual{ background:var(--neutro-100); color:var(--neutro-700); }

/* --- Lecturas automáticas -------------------------------------------------- */
.p-lecturas{ display:grid; gap:var(--e3); }
@media (min-width:900px){ .p-lecturas{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.p-lectura{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
  background:var(--blanco); border:1px solid var(--p-borde); border-radius:var(--r-card); padding:16px 18px;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.p-lectura:hover{ border-color:var(--verde); background:#FBFDFC; }
.p-lectura__icono{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--verde-100); color:var(--verde-prof); }
.p-lectura__icono.ocre{ background:#F6EEDF; color:#8A5E22; }
.p-lectura__icono.alerta{ background:var(--p-baja-fondo); color:var(--p-baja); }
.p-lectura__icono .ico{ width:18px; height:18px; }
.p-lectura p{ font-size:14.5px; line-height:1.45; }
.p-lectura strong{ font-weight:600; }
.p-lectura small{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--verde-prof); }

/* --- Gráfico de barras por mes --------------------------------------------- */
.p-meses{ position:relative; height:260px; margin-left:46px; }
.p-meses__guias{ position:absolute; inset:0; }
.p-guia{ position:absolute; left:0; right:0; border-top:1px dashed var(--apoyo); }
.p-guia span{ position:absolute; left:-46px; top:-8px; width:40px; text-align:right; font-size:11.5px; color:var(--gris-frio); font-variant-numeric:tabular-nums; }
.p-guia--base{ border-top:1px solid var(--neutro-300); }
.p-meses__barras{ position:absolute; inset:0; display:flex; align-items:flex-end; }
.p-mes{
  flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; position:relative;
  background:none; border:0; padding:0 clamp(2px, .5vw, 6px); cursor:pointer; font:inherit;
}
.p-mes__barra{
  width:100%; max-width:46px; border-radius:6px 6px 2px 2px; background:var(--verde-200);
  transform-origin:bottom; transition:height 600ms var(--ease-out), background-color var(--t) var(--ease);
}
.p-mes.en-periodo .p-mes__barra{ background:var(--verde); }
/* El mes en curso todavía no terminó: barra hueca con borde punteado */
.p-mes.en-curso .p-mes__barra{ background:var(--verde-100); border:1.5px dashed var(--verde); }
.p-mes.en-curso:hover .p-mes__barra{ background:var(--verde-200); }
.p-mes:hover .p-mes__barra, .p-mes:focus-visible .p-mes__barra{ background-color:var(--verde-prof); }
.p-mes:focus-visible{ outline:none; }
.p-mes:focus-visible .p-mes__barra{ outline:2px solid var(--carbon); outline-offset:2px; }
.p-meses__linea{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.p-meses__linea polyline{ fill:none; stroke:var(--carbon); stroke-width:1.75; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; transition:all 600ms var(--ease-out); }
.p-punto{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--blanco); border:1.75px solid var(--carbon); pointer-events:none; transition:top 600ms var(--ease-out); }
.p-meses__ejes{ display:flex; margin:8px 0 0 46px; }
.p-meses__ejes span{ flex:1; text-align:center; font-size:11.5px; color:var(--gris-frio); white-space:nowrap; overflow:hidden; }
.p-meses__ejes span.en-periodo{ color:var(--carbon); font-weight:600; }
.p-leyenda{ display:flex; flex-wrap:wrap; gap:var(--e2) var(--e4); font-size:12.5px; color:var(--neutro-700); }
.p-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.p-leyenda i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.p-leyenda i.linea{ height:0; border-top:2px dashed var(--carbon); border-radius:0; width:18px; }
@media (max-width:599px){
  .p-meses{ height:200px; margin-left:38px; }
  .p-guia span{ left:-38px; width:34px; font-size:10.5px; }
  .p-meses__ejes{ margin-left:38px; }
  .p-meses__ejes span{ font-size:10px; }
  .p-meses__ejes span:nth-child(even){ visibility:hidden; }
}

/* --- Dona ----------------------------------------------------------------- */
.p-dona{ display:grid; gap:var(--e3); align-items:center; }
@media (min-width:480px){ .p-dona{ grid-template-columns:132px minmax(0,1fr); } }
.p-dona .p-fila{ padding-block:6px; }
.p-dona .p-fila__dato{ font-size:13px; }
.p-dona__svg{ position:relative; width:132px; height:132px; margin-inline:auto; }
.p-dona__svg svg{ width:100%; height:100%; transform:rotate(-90deg); }
.p-dona__svg circle{ fill:none; stroke-width:4.4; transition:stroke-dasharray 700ms var(--ease-out), stroke-dashoffset 700ms var(--ease-out), opacity var(--t) var(--ease); cursor:pointer; }
.p-dona__svg circle.apagado{ opacity:.22; }
.p-dona__centro{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.p-dona__centro strong{ font-family:var(--f-titulo); font-weight:600; font-size:15px; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.p-dona__centro small{ font-size:10.5px; color:var(--gris-frio); }

/* --- Filas con barra horizontal (productos, zonas, rubros, vendedores) ------- */
.p-filas{ display:grid; gap:2px; }
.p-fila{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px var(--e3); align-items:center;
  padding:8px 10px; margin-inline:-10px; border-radius:10px; width:calc(100% + 20px);
  font:inherit; color:inherit; text-align:left; background:none; border:0; cursor:pointer;
  transition:background-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.p-fila:hover{ background:var(--neutro-100); }
.p-fila.apagada{ opacity:.4; }
.p-fila.elegida{ background:var(--verde-100); }
.p-fila__nombre{ display:flex; align-items:center; gap:8px; font-size:14px; line-height:1.3; min-width:0; }
.p-fila__nombre span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-fila__punto{ width:10px; height:10px; border-radius:3px; flex:none; }
.p-fila__dato{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-fila__dato .p-var{ font-size:11.5px; padding:1px 6px; }
.p-fila__riel{ grid-column:1 / -1; height:6px; border-radius:var(--r-pill); background:var(--apoyo); overflow:hidden; }
.p-fila__barra{ height:100%; width:0; border-radius:inherit; background:var(--verde); transition:width 650ms var(--ease-out); }
.p-fila__meta{ grid-column:1 / -1; display:flex; justify-content:space-between; font-size:12px; color:var(--gris-frio); }

/* --- Cobranzas ------------------------------------------------------------ */
.p-cobro{ display:grid; gap:var(--e4); }
@media (min-width:900px){ .p-cobro{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--e5); } }
.p-grande{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); letter-spacing:-0.035em; line-height:1; font-variant-numeric:tabular-nums; }
.p-apilada{ display:flex; height:14px; border-radius:var(--r-pill); overflow:hidden; background:var(--apoyo); gap:2px; }
.p-apilada span{ height:100%; transition:width 650ms var(--ease-out); }
.p-tramos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px var(--e3); }
.p-tramo{ display:grid; gap:2px; font-size:12.5px; color:var(--gris-frio); }
.p-tramo strong{ font-size:15px; color:var(--carbon); font-weight:600; font-variant-numeric:tabular-nums; }
.p-tramo i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.p-deudores{ display:grid; }
.p-deudor{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--e3); align-items:center;
  padding:10px 10px; margin-inline:-10px; border-radius:10px; border-bottom:1px solid var(--apoyo);
  font:inherit; color:inherit; text-align:left; background:none; border-width:0 0 1px; cursor:pointer; width:calc(100% + 20px);
}
.p-deudor:hover{ background:var(--neutro-100); }
.p-deudor strong{ font-weight:500; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-deudor small{ grid-column:1; font-size:12.5px; color:var(--gris-frio); }
.p-deudor span{ grid-row:1 / span 2; grid-column:2; font-weight:600; font-variant-numeric:tabular-nums; }

/* --- Stock ------------------------------------------------------------------ */
.p-stock{ display:grid; gap:2px; }
.p-stock__fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px var(--e3); align-items:center; padding:8px 0; border-bottom:1px solid var(--apoyo); }
.p-stock__fila.apagada{ opacity:.4; }
.p-stock__nombre{ font-size:14px; line-height:1.3; }
.p-stock__nombre small{ display:block; font-size:12px; color:var(--gris-frio); }
.p-stock__dias{ font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.p-etiqueta{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; background:var(--p-baja-fondo); color:var(--p-baja); vertical-align:1px; }
.p-etiqueta.ocre{ background:#F6EEDF; color:#8A5E22; }
.p-stock__riel{ grid-column:1 / -1; position:relative; height:8px; border-radius:var(--r-pill); background:var(--apoyo); }
.p-stock__barra{ height:100%; width:0; border-radius:inherit; background:var(--verde); transition:width 650ms var(--ease-out); }
.p-stock__barra.bajo{ background:var(--p-alerta); }
.p-stock__barra.justo{ background:var(--p-ocre); }
.p-stock__marca{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--carbon); border-radius:2px; }

/* --- Tabla de clientes ------------------------------------------------------ */
.p-tabla__herr{ display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; justify-content:space-between; }
.p-buscar{ position:relative; flex:1 1 240px; max-width:360px; }
.p-buscar input{
  width:100%; font:inherit; font-size:14px; padding:10px 14px 10px 38px;
  border:1px solid var(--neutro-300); border-radius:var(--r-pill); background:var(--blanco);
}
.p-buscar input:focus{ border-color:var(--verde); outline:none; }
.p-buscar .ico{ position:absolute; left:13px; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--gris-frio); }
.p-tabla{ overflow-x:auto; margin-inline:calc(clamp(16px, 1.6vw, 24px) * -1); }
.p-tabla table{ width:100%; min-width:760px; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.p-tabla th, .p-tabla td{ padding:11px 12px; text-align:left; border-bottom:1px solid var(--apoyo); white-space:nowrap; }
.p-tabla th:first-child, .p-tabla td:first-child{ padding-left:clamp(16px, 1.6vw, 24px); }
.p-tabla th:last-child, .p-tabla td:last-child{ padding-right:clamp(16px, 1.6vw, 24px); }
.p-tabla th{ font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-frio); background:var(--blanco); }
.p-tabla th button{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; display:inline-flex; gap:4px; align-items:center; }
.p-tabla th button:hover{ color:var(--carbon); }
.p-tabla th[aria-sort] button{ color:var(--carbon); }
.p-tabla th .ico{ width:12px; height:12px; }
.p-tabla .num{ text-align:right; }
.p-tabla th.num button{ flex-direction:row-reverse; }
.p-tabla tbody tr{ cursor:pointer; transition:background-color var(--t) var(--ease); }
.p-tabla tbody tr:hover, .p-tabla tbody tr:focus-visible{ background:var(--neutro-100); outline:none; }
.p-tabla td:first-child{ position:sticky; left:0; background:inherit; }
.p-tabla tbody tr td:first-child{ background:var(--blanco); }
.p-tabla tbody tr:hover td:first-child{ background:var(--neutro-100); }
.p-cli{ display:grid; line-height:1.3; max-width:280px; }
.p-cli strong{ font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.p-cli small .p-riesgo{ vertical-align:0; }
.p-cli small{ font-size:12px; color:var(--gris-frio); }
.p-semaforo{ display:inline-flex; align-items:center; gap:6px; }
.p-semaforo i{ width:8px; height:8px; border-radius:50%; background:var(--verde); }
.p-semaforo.ocre i{ background:var(--p-ocre); }
.p-semaforo.rojo i{ background:var(--p-alerta); }
.p-semaforo.gris i{ background:var(--neutro-300); }
.p-riesgo{ display:inline-block; margin-left:6px; font-size:11px; font-weight:600; padding:1px 7px; border-radius:var(--r-pill); background:#F6EEDF; color:#8A5E22; }
.p-paginas{ display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; justify-content:space-between; font-size:13.5px; color:var(--neutro-700); }
.p-paginas div{ display:flex; gap:var(--e2); }
.p-vacio{ padding:var(--e5) var(--e3); text-align:center; color:var(--gris-frio); }

/* --- Ficha del cliente (panel lateral) -------------------------------------- */
.p-fondo-ficha{ position:fixed; inset:0; z-index:70; background:rgba(31,42,46,.38); opacity:0; transition:opacity var(--t-lento) var(--ease); }
.p-fondo-ficha.visible{ opacity:1; }
.p-ficha{
  position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(520px, 100%);
  background:var(--blanco); border-left:1px solid var(--p-borde);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform var(--t-lento) var(--ease-out);
  display:grid; align-content:start; gap:var(--e4); padding:var(--e4) clamp(18px, 3vw, 32px) var(--e5);
}
.p-ficha.visible{ transform:none; }
.p-ficha[hidden], .p-fondo-ficha[hidden]{ display:none; }
.p-ficha__cabeza{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--e2) var(--e3); align-items:start; }
.p-ficha__cabeza h2{ font-size:clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height:1.12; letter-spacing:-0.03em; }
.p-ficha__cabeza p{ grid-column:1; font-size:14px; color:var(--gris-frio); }
.p-cerrar{ width:40px; height:40px; border-radius:50%; border:1px solid var(--neutro-300); background:var(--blanco); cursor:pointer; display:grid; place-items:center; color:var(--carbon); }
.p-cerrar:hover{ border-color:var(--carbon); }
.p-cerrar .ico{ width:18px; height:18px; }
.p-ficha__kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e2); }
.p-ficha__kpi{ background:var(--neutro-100); border-radius:12px; padding:12px 14px; display:grid; gap:2px; }
.p-ficha__kpi small{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-frio); }
.p-ficha__kpi strong{ font-family:var(--f-titulo); font-weight:600; font-size:1.25rem; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.p-ficha h3{ font-size:1rem; letter-spacing:-0.015em; margin-bottom:var(--e2); }
.p-ficha__barras{ display:flex; align-items:flex-end; gap:4px; height:90px; }
.p-ficha__barras span{ flex:1; background:var(--verde); border-radius:4px 4px 1px 1px; min-height:2px; position:relative; }
.p-ficha__barras span.cero{ background:var(--apoyo); }
.p-ficha__meses{ display:flex; gap:4px; margin-top:6px; }
.p-ficha__meses span{ flex:1; text-align:center; font-size:10.5px; color:var(--gris-frio); }
.p-ficha__alerta{ padding:12px 14px; border-radius:12px; background:#F6EEDF; color:#6E4A18; font-size:14px; line-height:1.45; }
.p-ficha table{ width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums; }
.p-ficha td{ padding:9px 0; border-bottom:1px solid var(--apoyo); }
.p-ficha td + td{ padding-left:var(--e2); }
.p-ficha td.num{ text-align:right; }
.p-estado-cobro{ font-size:12.5px; }
.p-estado-cobro.rojo{ color:var(--p-baja); font-weight:600; }
.p-estado-cobro.gris{ color:var(--gris-frio); }

/* --- Globito de datos ------------------------------------------------------- */
.p-globo{
  position:fixed; z-index:80; pointer-events:none; max-width:260px;
  background:var(--carbon); color:var(--blanco); border-radius:12px; padding:10px 12px;
  font-size:13px; line-height:1.45; opacity:0; transition:opacity 120ms var(--ease);
}
.p-globo.visible{ opacity:1; }
.p-globo strong{ display:block; font-weight:600; margin-bottom:2px; }
.p-globo span{ color:var(--neutro-300); }

/* --- Aviso de datos inventados --------------------------------------------- */
.p-ficticio{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-pill); background:#F6EEDF; color:#6E4A18; font-size:13px; font-weight:500; }
.p-ficticio .ico{ width:16px; height:16px; }

@media (prefers-reduced-motion:reduce){
  .p-mes__barra, .p-fila__barra, .p-stock__barra, .p-apilada span, .p-dona__svg circle, .p-punto, .p-meses__linea polyline{ transition:none; }
}
@media print{
  .p-barra{ position:static; }
  .p-ficha, .p-fondo-ficha, .p-globo{ display:none; }
}