/* ============================================================
   SCAE · Tablero maestro — capa de dashboard
   ------------------------------------------------------------
   Hereda marca/scae-design-system.css. NO redefine colores.
   Aplica el ajuste de proporciones de docs/04-IDENTIDAD-VISUAL:
   base 17px -> 15px, padding 40px -> 20-24px, radios 20 -> 12,
   sombras nivel 3 -> 1 y 2, cascara oscura y datos sobre claro.
   Sin haces animados detras de datos.
   ============================================================ */

:root{
  --r-card:12px;
  --r-box:10px;
  --lateral:236px;
  --serie-1:#0F2E25;
  --serie-2:#2F7D5A;
  --serie-3:#C8A03B;
  --serie-4:#7E9B8E;
  --serie-5:#8C2F2F;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-size:15px;
  margin:0;
  line-height:1.5;
  color:var(--verde);
  background:var(--tinta);
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(200,160,59,.10), transparent 62%),
    radial-gradient(760px 480px at 92% 8%, rgba(23,58,48,.75), transparent 60%);
  background-attachment:fixed;
}

/* ============ ESTRUCTURA ============ */
.app{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100vh}
/* Sin esto, un hijo ancho (la barra de navegación en móvil, una
   tabla) fuerza la columna a crecer y la página entera scrollea
   en horizontal. */
.app > *{min-width:0}

.lateral{
  background:linear-gradient(180deg,var(--verde-2),var(--tinta-2));
  border-right:1px solid rgba(200,160,59,.16);
  padding:20px 0 24px;
  display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.marca-bloque{padding:0 20px 18px;border-bottom:1px solid rgba(200,160,59,.14);margin-bottom:14px}
.marca-bloque .logo{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:26px;line-height:1;
  background:linear-gradient(180deg,#FFFEF9,#F3EBD6 46%,#CFC1A0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.marca-bloque .sub{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(227,197,104,.62);margin-top:5px;font-weight:600}

.nav-grupo{font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(231,234,228,.34);padding:16px 20px 6px;font-weight:700}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 20px;color:#D8DDD7;font-size:14px;font-weight:500;
  cursor:pointer;border:none;background:none;width:100%;text-align:left;
  border-left:2px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.nav-item:hover{background:rgba(255,255,255,.045);color:#F3F5F1}
.nav-item.activo{background:rgba(200,160,59,.11);color:var(--champan);border-left-color:var(--oro)}
.nav-item .cuenta{
  margin-left:auto;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:20px;text-align:center;padding:1px 6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);color:#D8DDD7;
}
.nav-item .cuenta.rojo{background:var(--error);color:#fff}
.nav-item .cuenta.ambar{background:var(--alerta);color:#1a1206}
.nav-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 16px}

.principal{padding:22px 26px 60px;min-width:0;max-width:1560px}

.cabecera{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.cabecera h1{font-size:31px;margin:0;color:#F4F2EA;letter-spacing:-.3px}
.cabecera .fecha{font-size:12.5px;color:rgba(231,234,228,.55);margin-bottom:5px}
.cabecera .acciones{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ============ TARJETAS ============ */
.tarjeta{
  background:linear-gradient(180deg,#FCFCFA,#F5F5F0);
  border:1px solid rgba(200,160,59,.24);
  border-radius:var(--r-card);
  padding:18px 20px;
  box-shadow:var(--s-2);
  position:relative;
}
.tarjeta::before{
  content:'';display:block;height:2px;margin:-18px -20px 15px;
  border-radius:var(--r-card) var(--r-card) 0 0;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:.8;
}
.tarjeta.sin-hilo::before{display:none}
.tarjeta h3{margin:0 0 12px;font-size:19px}
.tarjeta-cabeza{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tarjeta-cabeza h3{margin:0}
.tarjeta-cabeza .der{margin-left:auto;display:flex;gap:6px;align-items:center}

.rejilla{display:grid;gap:14px}
.r-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r-2-1{grid-template-columns:2fr 1fr}
.r-1-2{grid-template-columns:1fr 2fr}
.pila{display:flex;flex-direction:column;gap:14px}

/* ============ KPI ============
   KPI grande en Cormorant, etiqueta en Inter mayuscula 11px
   con tracking 2.5px. Ese contraste es la identidad en miniatura. */
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .etiqueta{
  font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;
  font-weight:700;color:var(--oro-texto);
}
.kpi .valor{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:42px;line-height:1.05;color:var(--verde);
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}
.kpi .valor.mediano{font-size:32px}
.kpi .valor.chico{font-size:25px}
.kpi .valor.rojo{color:var(--error)}
.kpi .valor.ambar{color:var(--alerta)}
.kpi .valor.ok{color:var(--ok)}
.kpi .nota{font-size:12px;color:var(--gris);margin-top:3px;line-height:1.35}

.kpi-critico{border-color:rgba(140,47,47,.5)}
.kpi-critico::before{background:linear-gradient(90deg,transparent,var(--error),transparent)}

/* ============ VEREDICTO ============ */
.veredicto{
  border-radius:var(--r-card);padding:16px 20px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(200,160,59,.26);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:var(--s-2);
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
}
.veredicto .etapa{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:600;
  writing-mode:vertical-rl;transform:rotate(180deg);
  letter-spacing:3px;text-transform:uppercase;
  padding:6px 3px;border-radius:var(--r-pill);
  color:var(--champan);border:1px solid rgba(200,160,59,.4);
}
.veredicto h2{margin:0 0 4px;font-size:23px;color:#F4F2EA}
.veredicto .razon{font-size:14px;color:rgba(231,234,228,.82);margin-bottom:8px}
.veredicto .evidencia{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.veredicto .evidencia span{
  font-size:11.5px;padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);color:rgba(231,234,228,.8);
  font-variant-numeric:tabular-nums;
}
.veredicto .instrucciones{display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
.veredicto .hacer{color:var(--champan)}
.veredicto .no-tocar{color:rgba(231,234,228,.55)}
.veredicto .hacer b,.veredicto .no-tocar b{
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;display:block;
  color:rgba(227,197,104,.6);margin-bottom:1px;font-weight:700;
}
.veredicto[data-etapa="Caja"] .etapa{border-color:rgba(140,47,47,.75);color:#F0C9C9}
.veredicto[data-etapa="Entrega"] .etapa{border-color:rgba(184,121,28,.8);color:#F5DCB4}
.veredicto[data-etapa="Ninguna"] .etapa,.veredicto[data-etapa="Bandeja"] .etapa{border-color:rgba(107,122,115,.6);color:#C7CFC9}

/* ============ BANDEJA ============ */
.fila-bandeja{
  display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;
  padding:9px 12px;border-radius:var(--r-box);
  border-left:3px solid var(--neutro);
  background:#fff;box-shadow:var(--s-1);margin-bottom:6px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.fila-bandeja:hover{transform:translateX(2px);box-shadow:var(--s-2)}
.fila-bandeja[data-nivel="vencido"]{border-left-color:var(--error);background:linear-gradient(90deg,rgba(140,47,47,.055),#fff 40%)}
.fila-bandeja[data-nivel="hoy"]{border-left-color:var(--alerta);background:linear-gradient(90deg,rgba(184,121,28,.06),#fff 40%)}
.fila-bandeja[data-nivel="proximo"]{border-left-color:var(--oro)}
.fila-bandeja[data-nivel="semana"]{border-left-color:var(--neutro)}
.fila-bandeja .cuando{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  font-variant-numeric:tabular-nums;color:var(--gris);line-height:1.25;
}
.fila-bandeja[data-nivel="vencido"] .cuando{color:var(--error)}
.fila-bandeja[data-nivel="hoy"] .cuando{color:var(--alerta)}
.fila-bandeja .qué{min-width:0}
.fila-bandeja .titulo{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-bandeja .detalle{font-size:12px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-bandeja .tipo{
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  color:var(--neutro);padding:2px 8px;border-radius:var(--r-pill);
  background:var(--lienzo);white-space:nowrap;
}

/* ============ TABLERO DE CARTERA ============
   Columnas por quién tiene la pelota. El color codifica bloqueo,
   que es dato de estado: por eso sale de la paleta funcional y
   nunca del oro.                                                */
.board{
  display:grid;grid-auto-flow:column;grid-auto-columns:288px;
  gap:14px;overflow-x:auto;padding-bottom:14px;align-items:start;
}
.board .col{display:flex;flex-direction:column;min-width:0}
.col-head{
  display:flex;align-items:center;gap:8px;padding:0 2px 9px;
  border-bottom:2px solid var(--stripe,var(--neutro));margin-bottom:11px;
}
.col-dot{width:8px;height:8px;border-radius:50%;background:var(--stripe);flex:none}
.col-head h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:600;
  margin:0;flex:1;color:#F0EEE6;letter-spacing:.1px;line-height:1.2;cursor:help;
}
.col-count{
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--stripe-tinta,#4A5751);background:var(--stripe-tinte,rgba(255,255,255,.12));
  border-radius:var(--r-pill);padding:1px 9px;
}
.board .cards{display:flex;flex-direction:column;gap:9px}
.col-vacia{
  font-size:12px;color:rgba(231,234,228,.38);line-height:1.4;
  padding:10px 4px;font-style:italic;
}

.board .card{
  background:linear-gradient(180deg,#FCFCFA,#F5F5F0);
  border:1px solid rgba(200,160,59,.2);border-radius:var(--r-box);
  padding:12px 13px 12px 15px;position:relative;cursor:pointer;
  box-shadow:var(--s-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.board .card:hover{transform:translateY(-2px);box-shadow:var(--s-2)}
.board .card::before{
  content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:2px;background:var(--stripe,var(--neutro));
}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card-name{font-weight:700;font-size:14px;color:var(--verde);line-height:1.25}
.card-name.dead{color:var(--neutro);text-decoration:line-through}
.wa-link{
  flex:none;font-size:10px;font-weight:700;letter-spacing:.5px;
  color:#1F5C41;text-decoration:none;
  border:1px solid rgba(47,125,90,.5);border-radius:5px;padding:2px 6px;
  transition:background .2s var(--ease);
}
.wa-link:hover{background:rgba(47,125,90,.12)}
.card-line{font-size:12px;color:var(--gris);margin-top:5px;line-height:1.4}
.card-line b{color:var(--verde);font-weight:600}
.owner{
  display:inline-block;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:700;color:var(--stripe-tinta,var(--neutro));margin-top:8px;
}
.next{font-size:12.5px;margin-top:3px;color:var(--verde);line-height:1.4}
.next.falta{color:var(--alerta);font-style:italic}

.meter-wrap{margin-top:8px}
.meter-track{
  height:5px;border-radius:3px;background:rgba(15,46,37,.10);
  overflow:hidden;border:1px solid rgba(198,198,189,.5);
}
.meter-fill{height:100%;border-radius:3px 0 0 3px;transition:width .7s var(--ease)}
.meter-label{
  display:flex;justify-content:space-between;font-size:10.5px;color:var(--neutro);
  margin-top:3px;font-variant-numeric:tabular-nums;gap:6px;
}
.card-acciones{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}

/* Señales duras del proceso: contrato, accesos, formulario.
   Lo que falta se ve de un vistazo sin abrir la ficha. */
.senales{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.senal{
  font-size:9px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;
  padding:2px 7px;border-radius:var(--r-pill);border:1px solid;
  background:var(--lienzo);color:var(--neutro);border-color:var(--borde);
}
.senal.ok{background:rgba(47,125,90,.13);color:#1F5C41;border-color:rgba(47,125,90,.4)}
.senal.falta{background:rgba(140,47,47,.11);color:#7A2727;border-color:rgba(140,47,47,.4)}
.senal.pend{background:rgba(184,121,28,.12);color:#8A5911;border-color:rgba(184,121,28,.35)}

/* El tablero de proceso tiene doce columnas: más angostas. */
.board.proceso{grid-auto-columns:236px}
.card-estancado{
  margin-top:8px;font-size:10.5px;font-weight:600;color:var(--alerta);
  font-variant-numeric:tabular-nums;
}
.card-estancado.grave{color:var(--error)}

@media (max-width:900px){
  .board{grid-auto-flow:row;grid-auto-columns:unset;grid-template-columns:1fr;overflow-x:visible}
}

/* ============ GRÁFICOS ============
   Siempre dentro de tarjeta clara. Marcas finas, rejilla que se
   nota poco y etiquetas directas donde el color no alcanza.   */
/* El SVG se añade cuando ya se pudo medir el contenedor, así que
   puede llegar después de la leyenda. El orden visual lo fija CSS
   para no depender del orden de inserción. */
.grafico{position:relative;width:100%;min-height:40px;display:flex;flex-direction:column}
.g-svg{max-width:100%;display:block;overflow:visible;order:1}
.g-leyenda{order:2}
.gtip{order:0}
.g-grid{stroke:rgba(15,46,37,.09);stroke-width:1}
.g-eje{
  font-family:'Inter',sans-serif;font-size:7px;fill:var(--neutro);
  text-transform:uppercase;letter-spacing:.7px;font-weight:600;
}
.g-barra,.g-vela,.g-seg{cursor:default;transition:opacity .18s var(--ease)}
.grafico:hover .g-barra,
.grafico:hover .g-vela,
.grafico:hover .g-seg{opacity:.55}
.g-barra:hover,.g-vela:hover,.g-seg:hover{opacity:1}
.g-mecha{opacity:.35}
.g-vela.proyectada{opacity:.55}
.grafico:hover .g-vela.proyectada:hover{opacity:.85}

.grafico-vacio{
  background:var(--crema);border-radius:var(--r-box);padding:26px 16px;
  text-align:center;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:16px;color:var(--neutro);
}

.g-leyenda{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;
  font-size:11.5px;color:var(--gris);align-items:center;
}
.g-leyenda i{
  width:9px;height:9px;border-radius:2px;display:inline-block;
  margin-right:5px;vertical-align:-1px;
}
.g-leyenda i.rayado{
  background:repeating-linear-gradient(45deg,var(--neutro),var(--neutro) 2px,transparent 2px,transparent 4px);
}
.g-leyenda.vertical{flex-direction:column;gap:6px;align-items:stretch;margin-top:14px}
.g-leyenda.vertical span{display:flex;align-items:center;gap:0}
.g-l-nombre{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-l-valor{font-variant-numeric:tabular-nums;font-weight:600;color:var(--verde);margin-left:8px}

.g-dona{display:flex;flex-direction:column;align-items:center}
.g-svg-dona{width:100%;max-width:190px;display:block}
.g-centro-valor{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-weight:600;
  fill:var(--verde);
}
.g-centro-tit{
  font-family:'Inter',sans-serif;font-size:7.5px;fill:var(--neutro);
  text-transform:uppercase;letter-spacing:1.4px;font-weight:700;
}

.gtip{
  position:absolute;z-index:20;pointer-events:none;opacity:0;
  background:var(--verde);color:#F3F5F1;font-size:11.5px;line-height:1.45;
  padding:7px 10px;border-radius:8px;white-space:nowrap;
  box-shadow:var(--s-2);transition:opacity .14s var(--ease);
  font-variant-numeric:tabular-nums;
}
.gtip.visible{opacity:1}

/* ---- Anillos ---- */
.anillos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
}
.anillo{display:flex;flex-direction:column;align-items:center;text-align:center}
.anillo-viz{position:relative;width:118px;height:118px}
.g-anillo-svg{width:100%;height:100%;display:block}
.g-anillo-arco{transition:stroke-dasharray .8s var(--ease)}
.anillo-centro{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
.anillo-valor{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1;
}
.anillo-pct{font-size:10.5px;color:var(--neutro);font-variant-numeric:tabular-nums;font-weight:600}
.anillo-etiqueta{
  font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;
  color:var(--oro-texto);margin-top:9px;line-height:1.25;
}
.anillo-nota{font-size:11.5px;color:var(--gris);margin-top:3px;line-height:1.35}

/* ---- Barra de reparto ---- */
.reparto-franja{
  display:flex;height:26px;border-radius:var(--r-pill);overflow:hidden;
  gap:2px;background:rgba(15,46,37,.06);
}
.reparto-parte{
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;min-width:3px;
  transition:width .7s var(--ease);
}

/* ---- Planes de cuotas ---- */
.plan{padding:14px 0;border-bottom:1px solid rgba(198,198,189,.5)}
.plan:last-child{border-bottom:none;padding-bottom:0}
.cuotas{display:flex;gap:8px;flex-wrap:wrap}
.cuota{
  flex:1 1 116px;background:var(--crema);border-radius:var(--r-box);
  padding:9px 11px;display:flex;flex-direction:column;gap:3px;
  border-left:3px solid var(--neutro);min-width:116px;
}
.cuota.cobrada{border-left-color:var(--ok);background:rgba(47,125,90,.07)}
.cuota.vencida{border-left-color:var(--error);background:rgba(140,47,47,.06)}
.cuota-n{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--neutro)}
.cuota-monto{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--verde)}
.cuota-fecha{font-size:11.5px;color:var(--gris);font-variant-numeric:tabular-nums}
.cuota-estado{font-size:10.5px;color:var(--ok);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.cuota .btn-mini{margin-top:2px}

/* ============ TUBERÍA ============ */
.celda-num{
  width:100%;min-width:56px;text-align:right;padding:5px 7px;font-size:13px;
  border-radius:7px;border:1px solid var(--borde);background:#fff;
  font-variant-numeric:tabular-nums;font-family:'Inter',sans-serif;
}
.celda-num:focus{border-color:var(--oro);box-shadow:0 0 0 3px rgba(200,160,59,.14)}

.tasa{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.tasa-pct{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--verde)}
.tasa.cuello{
  background:rgba(140,47,47,.06);margin:-5px -7px;padding:5px 7px;
  border-radius:7px;box-shadow:inset 2px 0 0 var(--error);
}

.diagnostico{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-box);
  background:var(--crema);border-left:3px solid var(--neutro);
}
.diagnostico.critico{background:rgba(140,47,47,.07);border-left-color:var(--error)}
.diagnostico.alerta{background:rgba(184,121,28,.08);border-left-color:var(--alerta)}
.diagnostico.sano{background:rgba(47,125,90,.07);border-left-color:var(--ok)}

/* El embudo de barras horizontales (.embudo-abs / .paso-*) lo
   reemplazo css/tuberia-viz.css: el mismo dato dibujado como caudal,
   con el corte donde esta el cuello. */

.atajos{display:flex;flex-wrap:wrap;gap:6px}
.atajos .btn-mini{padding:7px 13px;font-size:12.5px}

/* ============ TABLAS ============
   Una tabla ancha scrollea dentro de su propio contenedor. La
   página nunca scrollea en horizontal.                        */
.tabla-scroll{overflow-x:auto;margin:0 -20px;padding:0 20px}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px;min-width:340px}
.tabla th{
  text-align:left;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--neutro);font-weight:700;padding:0 10px 8px;border-bottom:1px solid var(--borde);
  white-space:nowrap;
}
.tabla td{padding:9px 10px;border-bottom:1px solid rgba(198,198,189,.45);vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:none}
.tabla tbody tr{transition:background .18s var(--ease)}
.tabla tbody tr:hover{background:rgba(200,160,59,.055)}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla .clickable{cursor:pointer}
.tabla td.principal-col{font-weight:600}

/* ============ ETIQUETAS DE ESTADO ============ */
.et{
  display:inline-block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  font-weight:700;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--lienzo);color:var(--gris);border:1px solid var(--borde);
}
.et.ok{background:rgba(47,125,90,.13);color:#1F5C41;border-color:rgba(47,125,90,.35)}
.et.alerta{background:rgba(184,121,28,.14);color:#8A5911;border-color:rgba(184,121,28,.35)}
.et.error{background:rgba(140,47,47,.13);color:#7A2727;border-color:rgba(140,47,47,.35)}
.et.neutro{background:rgba(107,122,115,.12);color:#4A5751;border-color:rgba(107,122,115,.3)}

/* ============ EMBUDO DE PRODUCCION ============ */
.embudo{display:flex;gap:3px;align-items:stretch;height:26px;border-radius:var(--r-box);overflow:hidden}
.embudo .seg{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  color:#fff;position:relative;min-width:22px;
}
.embudo .seg[data-n="0"]{opacity:.3}
.embudo .seg.e-guion{background:var(--serie-4)}
.embudo .seg.e-aprobado{background:var(--serie-1)}
.embudo .seg.e-grabado{background:var(--alerta)}
.embudo .seg.e-en_edicion{background:var(--serie-3);color:#0B1F19}
.embudo .seg.e-editado{background:var(--serie-2)}
.embudo .seg.e-publicado{background:var(--ok)}
.embudo-leyenda{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--neutro);margin-top:7px;font-weight:600}
.embudo-leyenda i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:-1px}

/* ============ BARRAS ============ */
.barra{height:7px;border-radius:var(--r-pill);background:rgba(15,46,37,.10);overflow:hidden}
.barra i{display:block;height:100%;border-radius:var(--r-pill);transition:width .7s var(--ease)}
.barra i.oro{background:var(--metal)}
.barra i.ok{background:var(--ok)}
.barra i.alerta{background:var(--alerta)}
.barra i.error{background:var(--error)}
.barra-fila{display:grid;grid-template-columns:1fr 46px;gap:10px;align-items:center;margin-bottom:9px}
.barra-fila .n{font-size:12px;font-variant-numeric:tabular-nums;text-align:right;font-weight:600;color:var(--gris)}
.barra-etiqueta{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}

/* ============ CALENDARIO ============ */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--neutro);font-weight:700;text-align:center;padding-bottom:5px}
.cal .dia{
  min-height:82px;border-radius:8px;padding:5px 6px;
  background:#fff;border:1px solid rgba(198,198,189,.6);
  display:flex;flex-direction:column;gap:3px;
}
.cal .dia.fuera{background:rgba(239,239,234,.5);opacity:.5}
.cal .dia.hoy{border-color:var(--oro);box-shadow:0 0 0 2px rgba(200,160,59,.2)}
.cal .dia .n{font-size:11px;font-weight:700;color:var(--neutro);font-variant-numeric:tabular-nums}
.cal .dia.hoy .n{color:var(--oro-texto)}
.ev{
  font-size:10.5px;padding:2px 5px;border-radius:4px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;
  border-left:2px solid;
}
.ev.grabacion{background:rgba(184,121,28,.14);border-color:var(--alerta);color:#6E450D;font-weight:600}
.ev.publicacion{background:rgba(47,125,90,.12);border-color:var(--ok);color:#1F5C41}
.ev.pago{background:rgba(140,47,47,.1);border-color:var(--error);color:#7A2727}
.ev.cobro{background:rgba(200,160,59,.15);border-color:var(--oro);color:var(--oro-texto)}
.ev.entrega{background:rgba(200,160,59,.16);border-color:var(--bronce);color:var(--oro-texto);font-weight:600}
.ev.reunion{background:rgba(15,46,37,.09);border-color:var(--serie-1);color:var(--verde)}

/* ============ FORMULARIOS EN TABLERO ============ */
.campo{margin-bottom:12px}
.campo label{font-size:12.5px;margin-bottom:4px}
.campo input,.campo select,.campo textarea{font-size:14px;padding:9px 11px;border-radius:8px}
.campo-fila{display:grid;gap:10px}
.cf-2{grid-template-columns:1fr 1fr}
.cf-3{grid-template-columns:1fr 1fr 1fr}
.cf-2-1{grid-template-columns:2fr 1fr}

.btn{font-size:13.5px;padding:9px 20px}
.btn-oro{padding:10px 24px}
.btn-linea{padding:7px 14px;font-size:13px;border-radius:var(--r-pill)}
.btn-mini{
  font-size:11.5px;padding:4px 11px;border-radius:var(--r-pill);cursor:pointer;
  background:#fff;border:1px solid var(--borde);color:var(--gris);font-weight:600;
  transition:all .2s var(--ease);font-family:'Inter',sans-serif;
}
.btn-mini:hover{border-color:var(--oro);color:var(--oro-texto)}
.btn-icono{
  background:none;border:none;cursor:pointer;color:var(--neutro);padding:3px;
  border-radius:5px;line-height:0;transition:all .2s var(--ease);
}
.btn-icono:hover{background:rgba(15,46,37,.07);color:var(--verde)}
.btn-icono svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}

.segmentado{
  display:inline-flex;background:var(--lienzo);border-radius:var(--r-pill);
  padding:2px;gap:2px;max-width:100%;overflow-x:auto;
  scrollbar-width:none;
}
.segmentado::-webkit-scrollbar{display:none}
.segmentado button{flex:0 0 auto}
.segmentado button{
  border:none;background:none;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:600;padding:5px 14px;border-radius:var(--r-pill);
  color:var(--gris);transition:all .2s var(--ease);
}
.segmentado button.activo{background:#fff;color:var(--verde);box-shadow:var(--s-1)}

/* ============ MODAL ============ */
.velo{
  position:fixed;inset:0;background:rgba(11,31,25,.72);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:44px 20px;
  overflow-y:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:aparecer .25s var(--ease);
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal{
  background:linear-gradient(180deg,#FCFCFA,#F5F5F0);
  border-radius:var(--r-card);border:1px solid rgba(200,160,59,.3);
  box-shadow:var(--s-3);width:100%;max-width:560px;padding:22px 24px;
  animation:subir .35s var(--ease);position:relative;
}
.modal.ancho{max-width:860px}
@keyframes subir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal::before{
  content:'';display:block;height:2px;margin:-22px -24px 16px;
  border-radius:var(--r-card) var(--r-card) 0 0;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);
}
.modal h2{margin:0 0 3px;font-size:24px}
.modal .sub{font-size:13px;color:var(--gris);margin-bottom:16px}
.modal-pie{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--borde)}
.modal-pie .izq{margin-right:auto}

/* ============ VACIO Y CARGA (tambien son marca) ============ */
.vacio{
  background:var(--crema);border-radius:var(--r-box);
  padding:26px 22px;text-align:center;position:relative;overflow:hidden;
}
.vacio::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);
}
.vacio p{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;
  color:var(--verde);margin:0 0 4px;font-weight:600;
}
.vacio small{color:var(--gris);font-size:12.5px;display:block;margin-bottom:12px}

/* Un dato ausente se dice, no se muestra como cero. */
.sin-datos{color:var(--neutro);font-style:italic;font-size:.92em;opacity:.85}

/* ============ MISCELANEA ============ */
.cifra{font-variant-numeric:tabular-nums}
.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
.kicker{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--oro-texto)}
.kicker.claro{color:rgba(227,197,104,.62)}
.mut{color:var(--gris)}
.mini{font-size:12px}
.der{text-align:right}
.fila{display:flex;align-items:center;gap:8px}
.fila.entre{justify-content:space-between}
.sep{height:1px;background:var(--borde);margin:14px 0}
.rise{opacity:0;transform:translateY(14px);animation:scae-rise .55s var(--ease) forwards}
.avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:var(--metal);color:#0B1F19;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.aviso{
  background:rgba(184,121,28,.1);border:1px solid rgba(184,121,28,.32);
  border-radius:var(--r-box);padding:10px 13px;font-size:12.5px;color:#7A4E0D;
}
.aviso.error{background:rgba(140,47,47,.09);border-color:rgba(140,47,47,.3);color:#7A2727}

/* ============ RESPONSIVE ============
   El tablero de Sebastian es de escritorio. La vista del cliente
   se disena primero en movil (Fase 1). Aqui solo se garantiza que
   nada se rompa si abre el tablero desde el celular.            */
@media (max-width:1180px){
  .r-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-2-1,.r-1-2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{
    position:static;height:auto;flex-direction:row;overflow-x:auto;
    padding:10px;gap:2px;align-items:center;
  }
  .marca-bloque,.nav-grupo{display:none}
  .nav-item{width:auto;white-space:nowrap;border-left:none;border-bottom:2px solid transparent;padding:8px 12px;border-radius:6px}
  .nav-item.activo{border-left:none;border-bottom-color:var(--oro)}
  /* `clip` y no `hidden`: con `hidden` el eje Y computa a `auto`, esto
     se vuelve contenedor de scroll y el position:sticky de la barra
     dorada del portal deja de pegarse al pie. `clip` corta igual el
     desborde horizontal y deja el eje Y en `visible`. */
  .principal{padding:16px 14px 40px;overflow-x:clip}
  .tabla-scroll{margin:0 -14px;padding:0 14px}
  .cabecera .acciones,.tarjeta-cabeza .der{flex-wrap:wrap}
  /* `minmax(0,1fr)` y no `1fr`: el minimo `auto` de una pista deja que
     el contenido mas ancho (una .tabla-scroll sangrada) estire la
     columna por encima de la rejilla, y lo que sobra se lo come el
     `overflow-x:clip` del .principal. Con minimo 0 la pista se queda
     en el ancho de la pantalla y la tabla se desliza por dentro. */
  .r-3,.r-2,.r-4{grid-template-columns:minmax(0,1fr)}
  .veredicto{grid-template-columns:1fr;gap:10px}
  .veredicto .etapa{writing-mode:horizontal-tb;transform:none;width:fit-content;padding:3px 12px}
  .cabecera h1{font-size:25px}
  .fila-bandeja{grid-template-columns:64px 1fr;gap:10px}
  .fila-bandeja .tipo{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}