:root{
  /* Base */
  --bg-0:#081a2c;
  --bg-1:#0b2340;

  /* Superficies */
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.085);
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.12);

  /* Bordes / sombras */
  --line: rgba(255,255,255,.12);
  --line2: rgba(255,255,255,.18);
  --shadow: 0 14px 34px rgba(0,0,0,.38);

  /* Texto */
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);

  /* Marca */
  --brand:#009FE3;
  --accent:#f59e0b;

  --radius: 18px;

  /* Faltaban estas variables y las estabas usando */
  --radius-lg: 18px;
  --radius-md: 14px;
}

/* Desktop: el wizard usa los controles del header. El CTA inferior queda reservado para móvil. */
@media (min-width: 769px){
  .pp-wizard-bottom-cta{
    display: none !important;
  }
}

@media (max-width: 768px){
  .pp-wizard-bottom-cta{
    display: grid !important;
  }
}

.pp-diag .pp-btn,
.pp-diag button.pp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 166, 51, 0.75);
  background: linear-gradient(90deg, #ed6b01, #ff8a1c);
  color: #fff;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.pp-diag-bullets li:empty{
  display: none;
}

.pp-story-compare{
  display: grid;
  gap: 10px;
}

.pp-compare-row{
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}

.pp-compare-row span{
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.58);
}

.pp-compare-row b{
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.pp-compare-row.is-ideal{
  background: linear-gradient(90deg, rgba(237,107,1,.20), rgba(255,138,28,.08));
  border-color: rgba(255,166,51,.38);
}

.pp-compare-row.is-ideal span{
  color: rgba(255,203,143,.92);
}

.pp-compare-delta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,159,227,.22);
  border: 1px solid rgba(0,159,227,.38);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

/* Wizard progress: panel izquierdo como indicador de evolución */
.hero.mode-wizard{
  grid-template-columns: 320px 1fr;
}

.hero.mode-wizard .control-panel{
  max-width: 320px;
}

.control-panel.mode-wizard .chips,
.chips.is-wizard{
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  counter-reset: wizard-step;
}

.control-panel.mode-wizard .chips::before,
.chips.is-wizard::before{
  content: "Progreso de Discover";
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.control-panel.mode-wizard .chip,
.chips.is-wizard .chip{
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.18;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
}

.control-panel.mode-wizard .chip::before,
.chips.is-wizard .chip::before{
  counter-increment: wizard-step;
  content: counter(wizard-step);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.66);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

.control-panel.mode-wizard .chip.is-done,
.chips.is-wizard .chip.is-done{
  color: rgba(255,255,255,.82);
  border-color: rgba(0,159,227,.34);
  background: rgba(0,159,227,.11);
}

.control-panel.mode-wizard .chip.is-done::before,
.chips.is-wizard .chip.is-done::before{
  content: "✓";
  color: #fff;
  background: rgba(0,159,227,.72);
  border-color: rgba(0,159,227,.9);
}

.control-panel.mode-wizard .chip.is-current,
.chips.is-wizard .chip.is-current{
  color: #fff;
  background: linear-gradient(90deg, rgba(237,107,1,.30), rgba(255,138,28,.13));
  border-color: rgba(255,166,51,.72);
  box-shadow: 0 10px 22px rgba(237,107,1,.16), inset 0 1px 0 rgba(255,255,255,.06);
}

.control-panel.mode-wizard .chip.is-current::before,
.chips.is-wizard .chip.is-current::before{
  color: #fff;
  background: linear-gradient(180deg, #ed6b01, #ff8a1c);
  border-color: rgba(255,190,89,.9);
}

.control-panel.mode-wizard .chip.is-pending,
.chips.is-wizard .chip.is-pending{
  opacity: .72;
}

.control-panel.mode-wizard .chip.is-available,
.chips.is-wizard .chip.is-available{
  opacity: .9;
  border-color: rgba(0,159,227,.30);
  background: rgba(0,159,227,.08);
}

.control-panel.mode-wizard .chip:not(.is-locked),
.chips.is-wizard .chip:not(.is-locked){
  cursor: pointer;
}

.control-panel.mode-wizard .chip.is-locked,
.chips.is-wizard .chip.is-locked{
  cursor: not-allowed;
  opacity: .48;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(0,159,227,.20), transparent 62%),
    radial-gradient(900px 420px at 92% 12%, rgba(245,158,11,.10), transparent 58%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}

/* =========================
   CONTENEDOR GENERAL
   ========================= */
.wrap{
  max-width: 1600px;
  margin: 0 auto;
  /* menos aire lateral */
  padding: 16px 12px 20px;
}

/* =========================
   HEADER
   ========================= */
header.hero{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding: 10px;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 14px;
  align-items: stretch;
}

.hero-title{ margin:0; font-size: 22px; letter-spacing:.2px; }
.hero-sub{ margin:6px 0 0; color: rgba(255,255,255,.78); line-height:1.35; max-width: 1000px; }

.hero-main{
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap:10px;
  padding: 2px 6px;
}

.hero-box{
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.08);
  padding: 12px 14px;
}

.kicker{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  text-transform: uppercase;
  letter-spacing: .35px;
  margin-bottom: 6px;
}
.copy{ font-size: 14px; color:#fff; line-height:1.35; }

/* Panel control */
.control-panel{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.18);
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.small-note{
  margin-top:auto;
  font-size:12px;
  color: rgba(255,255,255,.70);
  line-height:1.25;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top:10px;
}

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.70);
}
.chip.on{
  border-color: rgba(245,158,11,.55);
  background: rgba(245,158,11,.22);
  color:#fff;
}

/* Botones */
.btn{
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.08);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 700;
  font-size: 13px;
  text-align:left;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn.primary{
  background: linear-gradient(90deg, rgba(245,158,11,.30), rgba(245,158,11,.16));
  border-color: rgba(245,158,11,.45);
}
.btn.ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.85);
}

/* =========================
   GRID PRINCIPAL (3 columnas)
   - Más presencia al centro
   - Menos “bordes” laterales
   ========================= */
main.grid{
  margin-top: 16px;
  display: grid;
  gap: 18px;

  /* 👉 finanzas un poco más estrecho, PE más grande */
  grid-template-columns: 1.15fr 1.55fr 1.30fr;
  align-items: start;
}

/* =========================
   PANELES
   ========================= */
.panel{
  position: relative;
  min-width: 0;              /* 🔒 clave anti-overflow */
  border: 8px solid rgba(255,255,255,0.055); /* menos “marco” */
  border-radius: 18px;
  background: linear-gradient(180deg, #1b2b44 0%, #152236 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 24px rgba(0,0,0,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.panel-head{
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.panel-title{ margin:0; font-size:16px; font-weight:700; }
.panel-sub{ margin:6px 0 0; font-size:13px; color: #9AA4B2; }

.panel-body{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex: 1;
}

/* =========================
   CARDS / KPI
   ========================= */
.card{
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
  min-height: 96px;
  min-width: 0; /* 🔒 clave anti-overflow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 10px rgba(0,0,0,0.25);
}
.card.strong{
  background: rgba(255,255,255,0.10);
  min-height: 108px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 18px rgba(0,0,0,0.35);
}

.label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}

.value{
  /* ✅ evita que se corte el € y evita que empuje el grid */
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;

  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;

  /* adaptable */
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.08;
}

.valuec {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 4px;

  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #fff;

  white-space: nowrap;
  min-width: 0; /* 🔑 por si el padre es flex */
}

/* número: el que se adapta */
.valuec .num {
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.3px; /* 🔥 reduce ancho real */
}

/* símbolo: fijo y pequeño */
.valuec .currency {
  font-size: 0.75em;
  opacity: 0.85;
  flex-shrink: 0;
}


.hint{
  color: #9AA4B2;
  font-size: 12px;
  margin-top: 6px;
  opacity: .75;
}

/* KPI grids */
.kpi-grid{ display:grid; gap: 12px; }
.kpi-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpi-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.kpi-grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* En columnas de 3 o 4, reduce un pelín para que nunca “salte” */
.kpi-grid.cols-3 .value{ font-size: clamp(16px, 1.25vw, 22px); }
.kpi-grid.cols-4 .value{ font-size: clamp(15px, 1.10vw, 20px); }

/* =========================
   BREAK-EVEN (PE)
   ========================= */

/* KPIs arriba */
.be-top{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

/* Caja del gráfico: más presencia */
#panel-breakeven .chart-wrap{
  height: 420px;
  padding: 14px;
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(circle at top, #0f3a5f 0%, #0b2a44 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 30px rgba(0,0,0,0.45);
}

#breakevenChart{
  display:block;
  width:100% !important;
  height:100% !important;
}

/* Texto didáctico / bloques informativos */
.block-footer,
.be-explain{
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: 10px;
}

/* =========================
   WIZARD / FLOW (dejas esto tal cual, ya lo ordenaremos)
   ========================= */

.wiz{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
  z-index:9999;
}
.wiz-card{
  width:min(860px, 96vw);
  max-height: 90vh;
  display:flex;
  flex-direction:column;
  background:rgba(20,24,32,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding:18px;
}
.wiz-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.wiz-title{font-weight:800; font-size:20px;}
.wiz-sub{opacity:.85; margin-top:4px;}
.wiz-body{
  margin-top:14px;
  overflow:auto;
  padding-right:8px;
}
.wiz-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
@media (max-width:720px){ .wiz-grid{grid-template-columns:1fr;} }

.wiz-field .label{font-size:12px; opacity:.85; margin-bottom:6px;}
.wiz-field input,.wiz-field select{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--ink);
}
.wiz-actions{display:flex; justify-content:space-between; gap:10px; margin-top:12px;}

#flow-box{ max-width: 720px; }
#flow-fields{
  max-height: 260px;
  overflow: auto;
  padding-right: 8px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px){
  header.hero{ grid-template-columns: 1fr; }
  main.grid{ grid-template-columns: 1fr; }
  .control-panel{ order: 2; }
  .kpi-grid.cols-2,
  .kpi-grid.cols-3,
  .kpi-grid.cols-4{ grid-template-columns: 1fr; }
  .be-top{ grid-template-columns: 1fr; }
  .hero-title{ font-size: 20px; }
  #panel-breakeven .chart-wrap{ height: 320px; }
}

.pp-scenarios{display:flex; gap:10px; margin:10px 0;}
.pp-btn.is-active{outline:2px solid rgba(255,255,255,.25);}
#btn-scn-optimizer:disabled{
  cursor:not-allowed;
  filter: grayscale(0.2);
}
.pp-delta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  transform: translateY(-2px);
  line-height: 1;
}
.pp-delta.up{
  background: rgba(39,174,96,.16);
  border: 1px solid rgba(39,174,96,.35);
  color: #7CFFB2;
}
.pp-delta.down{
  background: rgba(231,76,60,.14);
  border: 1px solid rgba(231,76,60,.35);
  color: #ffb3aa;
}
.pp-delta.neutral{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
}
.pp-delta{
  margin-left:8px;
  font-size:12px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  vertical-align:middle;
}
.pp-delta.up{
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
  color: rgba(34,197,94,.95);
}

/* KPI value como contenedor (numero + delta badge) */
.value{
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Numero principal */
.value .kpi-main{
  white-space: nowrap;
}

/* Delta badge */
.kpi-delta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;

  /* verde “mejora” */
  background: rgba(39,174,96,.18);
  border: 1px solid rgba(39,174,96,.40);
  color: rgba(210,255,225,.95);
}

/* Flecha */
.kpi-delta::before{
  content: "▲";
  font-size: 11px;
  opacity: .95;
}

/* KPI + delta en la misma línea */
.value-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  white-space:nowrap;
}

/* Badge delta */
.delta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  transform: translateY(-2px); /* lo sube un pelín para que “respire” */
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}

/* estados */
.delta.up{
  background: rgba(39,174,96,.18);
  border-color: rgba(39,174,96,.35);
  color: rgba(210,255,230,.95);
}
.delta.down{
  background: rgba(231,76,60,.16);
  border-color: rgba(231,76,60,.35);
  color: rgba(255,220,220,.95);
}

.delta .arrow{
  font-size:11px;
  opacity:.95;
}
/* KPI número + delta en la misma línea */

/* Badge delta (por defecto) */
.delta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  transform: translateY(-2px);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
}

/* Mejora (verde) */
.delta.up{
  background: rgba(39,174,96,.18);
  border-color: rgba(39,174,96,.35);
  color: rgba(220,255,235,.98);
}

/* Empeora (rojo) */
.delta.down{
  background: rgba(231,76,60,.16);
  border-color: rgba(231,76,60,.35);
  color: rgba(255,225,225,.98);
}

.delta .arrow{ font-size:11px; opacity:.95; }

/* Caso especial: “BAJA es BUENO” (ej: Día PE) => flecha ↓ pero en verde */
.delta.good-down{
  background: rgba(39,174,96,.18);
  border-color: rgba(39,174,96,.35);
  color: rgba(220,255,235,.98);
}

/* ===== KPI: NUMERO + DELTA (NO OVERFLOW) ===== */
.value.value-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;          /* clave para que el hijo pueda encoger */
  overflow:hidden;      /* evita que el delta “se salga” */
}

/* el número debe poder encoger */
.value.value-row > span:first-child{
  min-width:0;
  flex: 1 1 auto;
  overflow:hidden;
  text-overflow: ellipsis;  /* si no cabe, recorta con … (último recurso) */
  white-space: nowrap;
}

/* el delta nunca empuja el layout */
.value.value-row .delta{
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 2px;
}

/* ===== Ajuste de tamaño SOLO para los 3 KPIs de costes (para que no se corten) ===== */
#fin-costes-fijos,
#fin-costes-variables,
#fin-costes-total{
  font-size: clamp(14px, 1.10vw, 20px) !important;
  letter-spacing: -0.2px;
}

/* Si quieres también reducir un poco en Fact/H, Coste/H, Contrib/H */
#kpi-fact-h, #kpi-coste-h, #kpi-margen-h{
  font-size: clamp(15px, 1.15vw, 21px) !important;
  letter-spacing: -0.2px;
}


/* Delta badge compacto, que no empuje el número */
.delta{
  flex:0 0 auto;
  white-space:nowrap;
}

/* En cards normales, el número se adapta un poco para dejar sitio al delta */
.card .value-row > span:first-child{
  font-size: clamp(20px, 2.1vw, 30px);
}

.delta.down-good{
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
  color: rgba(34,197,94,.95);
}
/* KPI value + delta en la misma linea SIN truncar el numero */
.value-row{
  position: relative;
  display: block;           /* clave: el numero ocupa ancho completo */
  padding-right: 64px;      /* reserva espacio para la pill delta */
}

.value-row > span:first-child{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* si alguna vez no cabe, que el corte sea limpio */
}

/* Delta “flotante” */
.value-row .delta{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* Colores del delta */
.delta.up    { background: rgba(46, 204, 113, .22); color: #BFF2D1; }
.delta.down  { background: rgba(46, 204, 113, .22); color: #BFF2D1; } /* verde también para “mejora” */
.delta.bad   { background: rgba(231, 76, 60, .22);  color: #FFD2CC; }

/* --------- Delta estable (no rompe valores) --------- */
.label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.label-row .label{
  margin:0;
}

/* el delta NO debe empujar el layout */
.delta{
  flex:0 0 auto;
  white-space:nowrap;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1;
}

/* (si ya tienes .delta.up/.down, respétalo; esto solo asegura que quepa) */
.card{ overflow:hidden; }

/* Los números: no se cortan por culpa del delta, porque el delta ya no está en la misma fila */
.value > span, .valuec > span{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
}

/* Móvil: baja un poco el tamaño para evitar cortes extremos */
@media (max-width: 420px){
  .value{
    font-size: clamp(16px, 6vw, 22px);
  }
  .valuec{
    font-size: clamp(15px, 5.6vw, 20px);
  }
}
/* --- KPI largos (costes + €/h): nunca se salen --- */
.kpi-tight{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  font-variant-numeric: tabular-nums;
  font-weight: 800;

  /* tamaño adaptable (sin tocar el resto de .value) */
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.1;
}

/* Delta debajo, centrado, con hueco propio */
.delta-under{
  min-height: 18px;            /* reserva hueco aunque esté oculto */
  display:flex;
  justify-content:center;
  margin-top: 6px;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 420px){
  .kpi-tight{
    font-size: clamp(15px, 5.2vw, 20px);
  }
}
/* =========================
   FINANZAS: KPIs largos
   - Los números nunca se salen
   - Delta va debajo centrado
   ========================= */

.label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Para €/h y costes: el número se recorta con ... si no cabe */
.kpi-tight{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;

  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color:#fff;

  /* Tamaño coherente y responsivo sin tocar el resto de KPIs */
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.1;
}

/* Delta debajo, centrado, y reservando hueco */
.delta-under{
  min-height: 18px;
  display:flex;
  justify-content:center;
  margin-top: 6px;
}

/* Ajuste fino móvil */
@media (max-width: 420px){
  .kpi-tight{
    font-size: clamp(15px, 5.2vw, 20px);
  }
}
.valuec.kpi-fit{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  max-width:100%;
}

.valuec.kpi-fit{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  max-width:100%;
}

.valuec.kpi-fit .num{
  min-width:0;
  flex:1 1 auto;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;

  font-variant-numeric: tabular-nums;
  font-weight:800;
  color:#fff;

  /* 👇 más pequeño para que entren cifras largas */
  font-size: clamp(14px, 1.05vw, 18px);
  line-height:1.1;
}

.valuec.kpi-fit .unit{
  flex:0 0 auto;
  font-weight:800;
  opacity:.9;
  font-size: clamp(12px, .95vw, 14px);
}
#fin-costes-fijos,
#fin-costes-variables,
#fin-costes-total{
  font-size: clamp(13px, 0.95vw, 18px) !important;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.hero{
  min-height: 420px;          /* ajusta a gusto: 420–520 suele ir bien */
}
#flow-box{
  min-height: 220px;          /* para que no colapse si no hay contenido */
}
/* Quitar flechas de number (por si te queda algún input number en otros sitios) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Mejor legibilidad de inputs en wizard (si quieres) */
.pp-wizard input[type="text"], .pp-wizard select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}
.pp-wizard input[type="text"]::placeholder { color: rgba(255,255,255,.55); }

/* (FUTURO) Chips más grandes y a ancho completo: lo anotamos */

/* Asegura que el card del PE pueda contener un overlay */
.pp-pe-card, #breakeven-card, .breakeven-card, .pp-block-pe {
  position: relative;
}

/* Pizarra overlay */
.pp-board {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(8, 18, 30, 0.94);
  backdrop-filter: blur(6px);
  border-radius: 18px;
}

/* Contenido interno */
.pp-board-inner {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-board-metrics {
  flex: 1;
  overflow-y: auto;
}

.pp-board-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* =========================================================
   Opción C: Panel derecho estable (Wizard/Diagnóstico)
   - Header fijo
   - Body con scroll interno
   - Misma altura (no pega saltos)
   ========================================================= */

/* Asegura que ambos paneles se comportan igual */
#pp-wizard,
#pp-diagnostic {
  display: flex;
  flex-direction: column;
  /* Ajusta si tu contenedor padre ya gestiona altura. */
  min-height: 520px;      /* base estable */
  height: 100%;
}

/* Header fijo (no hace scroll) */
.pp-wizard-header,
.pp-diag-header {
  flex: 0 0 auto;
}

/* Body con scroll interno */
.pp-wizard-body,
.pp-diag-body {
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 6px;     /* un poco de aire para scrollbar */
  /* altura máxima para evitar crecer infinito */
  max-height: calc(100vh - 220px);
}

/* =========================================================
   Wizard: tarjetas y grids (SCOPED -> NO rompe diagnóstico)
   ========================================================= */

#pp-wizard .wiz-section {
  margin-bottom: 14px;
}

#pp-wizard .wiz-section-title {
  font-weight: 700;
  margin: 10px 0 8px;
  opacity: .95;
}

/* Grid de tarjetas */
#pp-wizard .wiz-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 columnas */
  gap: 12px;
}

/* Tarjeta */
#pp-wizard .wiz-card {
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* Título dentro de tarjeta */
#pp-wizard .wiz-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
}

/* Grid interno de campos (2 columnas) */
#pp-wizard .wiz-fields-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Cuando la pantalla es estrecha: 1 columna */
@media (max-width: 980px) {
  #pp-wizard .wiz-card-grid { grid-template-columns: 1fr; }
  #pp-wizard .wiz-fields-2 { grid-template-columns: 1fr; }
}
/* =========================
   F1A – MIX CARDS (selector)
   ========================= */

.pp-mix-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
  width:100%;
}

@media (max-width: 980px){
  .pp-mix-grid{ grid-template-columns: 1fr; }
}

/* tarjeta clicable */
.pp-mix-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 14px 12px;
  background: rgba(255,255,255,.06);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}

.pp-mix-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,159,227,.55);
  background: rgba(255,255,255,.08);
}

/* activo */
.pp-mix-card.is-active{
  border-color: rgba(0,159,227,.95);
  background: rgba(0,159,227,.10);
  box-shadow: 0 0 0 1px rgba(0,159,227,.25), 0 10px 26px rgba(0,0,0,.25);
}

/* header tarjeta */
.pp-mix-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
  letter-spacing:.02em;
}

.pp-mix-badge{
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  opacity:.9;
}

/* barras apiladas */
.pp-mix-bar{
  height:8px;
  display:flex;
  border-radius:6px;
  overflow:hidden;
  margin:10px 0 10px;
  background: rgba(255,255,255,.08);
}

.pp-mix-bar > span{
  height:100%;
}

/* leyenda compacta */
.pp-mix-legend{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px 12px;
  font-size:12px;
  opacity:.9;
}

.pp-mix-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
  margin-right:6px;
  transform: translateY(1px);
}

.pp-mix-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:100%; }
@media (max-width:980px){ .pp-mix-grid{ grid-template-columns:1fr; } }

.pp-mix-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 14px 12px;
  background: rgba(255,255,255,.06);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}
.pp-mix-card:hover{ transform:translateY(-1px); border-color: rgba(0,159,227,.55); background: rgba(255,255,255,.08); }
.pp-mix-card.is-active{
  border-color: rgba(0,159,227,.95);
  background: rgba(0,159,227,.10);
  box-shadow: 0 0 0 1px rgba(0,159,227,.25), 0 10px 26px rgba(0,0,0,.25);
}
.pp-mix-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-weight:800; letter-spacing:.02em; }
.pp-mix-badge{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); opacity:.9; }

.pp-mix-bar{ height:8px; display:flex; border-radius:6px; overflow:hidden; margin:10px 0; background: rgba(255,255,255,.08); }
.pp-mix-bar>span{ height:100%; }

.pp-mix-legend{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:12px; opacity:.9; }
.pp-mix-dot{ width:8px; height:8px; border-radius:999px; display:inline-block; margin-right:6px; transform: translateY(1px); }
/* Compactar inputs del step 1 */
#pp-wizard .form-grid .field-card input{
  padding: 05px 14px;
  height: 30px;
  border-radius: 10px;
}
.pp-mix-card { padding: 12px 14px; }
.pp-mix-bar  { height: 7px; margin: 8px 0; }
.pp-mix-legend { font-size: 11.5px; gap: 4px 10px; }
@media (min-width: 1100px){
  .pp-mix-legend{ grid-template-columns: repeat(4, 1fr); }
}
.pp-mix-card.is-active::after{
  content:"✓";
  position:absolute;
  top:10px; left:10px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background: rgba(0,159,227,.18);
  border:1px solid rgba(0,159,227,.55);
  font-weight:800;
}
.pp-mix-card{ position:relative; }
/* =========================
   WIZARD – COMPACT MODE
   Objetivo: evitar scroll
   ========================= */

#pp-wizard .pp-wizard-body{
  /* el body no debe crecer infinito */
  max-height: calc(100vh - 220px); /* ajusta según tu header real */
  overflow: auto;
  padding-right: 6px;
}

/* Inputs más compactos */
#pp-wizard .field-card{
  padding: 12px 14px;
  border-radius: 14px;
}
#pp-wizard .field-title{
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .04em;
}
#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}

/* Jornada: radios en una línea */
#pp-wizard .radio-row{
  display: inline-flex;
  margin-right: 14px;
  margin-bottom: 0;
}

/* ===== MIX cards compact ===== */
.pp-mix-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.pp-mix-card{
  padding: 12px 14px;
  border-radius: 14px;
}

.pp-mix-title{
  font-size: 16px;
  margin-bottom: 6px;
}

.pp-mix-bar{
  height: 6px;
  margin: 6px 0 8px;
  border-radius: 6px;
}

.pp-mix-legend{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 1 sola línea en desktop */
  gap: 6px;
  font-size: 11px;
  opacity: .92;
}

/* En móvil: vuelve a 2 columnas para que no se rompa */
@media (max-width: 640px){
  .pp-mix-grid{ grid-template-columns: 1fr; }
  .pp-mix-legend{ grid-template-columns: 1fr 1fr; }
}

/* Botones más pequeños */
#pp-wizard .pp-wizard-nav .btn{
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}
/* =========================
   F1A COMPACT (wizard)
   ========================= */

#pp-wizard .form-grid{
  gap: 10px;
}

/* Cards más bajas */
#pp-wizard .field-card{
  padding: 10px 12px;
  border-radius: 12px;
}

/* Radios en una línea */
#pp-wizard .radio-row{
  display: inline-flex;
  margin: 0 14px 0 0;
  font-size: 14px;
}

/* Inputs más bajos */
#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
}

/* ===== Mix header legend ===== */
#pp-wizard .pp-mix-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  opacity: .9;
  margin: 6px 0 10px;
}
#pp-wizard .pp-mix-dot{
  width: 8px; height: 8px; border-radius: 99px; display:inline-block; margin-right:6px;
}

/* ===== 4 cards en una fila ===== */
#pp-wizard .pp-mix-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Mix cards ultra-compact */
#pp-wizard .pp-mix-card{
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
#pp-wizard .pp-mix-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}
#pp-wizard .pp-mix-bar{
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display:flex;
}

/* Reducir “peso visual” */
#pp-wizard .hint{
  margin-top: 6px !important;
  font-size: 12px;
  opacity: .75;
}

/* Responsive: si no cabe, 2x2 */
@media (max-width: 1100px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: 1fr; }
}
/* =========================
   F1A COMPACT (wizard)
   ========================= */

#pp-wizard .form-grid{
  gap: 10px;
}

/* Cards más bajas */
#pp-wizard .field-card{
  padding: 10px 12px;
  border-radius: 12px;
}

/* Radios en una línea */
#pp-wizard .radio-row{
  display: inline-flex;
  margin: 0 14px 0 0;
  font-size: 14px;
}

/* Inputs más bajos */
#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
}

/* ===== Mix header legend ===== */
#pp-wizard .pp-mix-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  opacity: .9;
  margin: 6px 0 10px;
}
#pp-wizard .pp-mix-dot{
  width: 8px; height: 8px; border-radius: 99px; display:inline-block; margin-right:6px;
}

/* ===== 4 cards en una fila ===== */
#pp-wizard .pp-mix-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Mix cards ultra-compact */
#pp-wizard .pp-mix-card{
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
#pp-wizard .pp-mix-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}
#pp-wizard .pp-mix-bar{
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display:flex;
}

/* Reducir “peso visual” */
#pp-wizard .hint{
  margin-top: 6px !important;
  font-size: 12px;
  opacity: .75;
}

/* Responsive: si no cabe, 2x2 */
@media (max-width: 1100px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: 1fr; }
}

/* =========================
   WIZARD OVERRIDES (compact)
   ========================= */
#pp-wizard .pp-wizard-body{
  padding: 10px 8px;
}

/* Reduce aire general */
#pp-wizard .field-card,
#pp-wizard .wiz-card{
  padding: 10px 12px;
  border-radius: 12px;
}

#pp-wizard .field-title{
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: .03em;
}

#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}

/* Radios en línea y compactos */
#pp-wizard .radio-row{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
  margin-bottom: 6px;
}

/* Grid del paso: más compacto */
#pp-wizard .form-grid{
  gap: 0px;
  margin-top: 8px;
}

/* --- MIX: 4 tarjetas en una fila --- */
#pp-wizard .pp-mix-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

#pp-wizard .pp-mix-card{
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

#pp-wizard .pp-mix-card:hover{
  border-color: rgba(0,159,227,.55);
}

#pp-wizard .pp-mix-card.is-active{
  border-color: rgba(0,159,227,.95);
  box-shadow: 0 0 0 2px rgba(0,159,227,.12) inset;
  background: rgba(0,159,227,.08);
}

#pp-wizard .pp-mix-title{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}

#pp-wizard .pp-pill{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  opacity: .9;
}

#pp-wizard .pp-mix-bar{
  height: 6px;
  border-radius: 6px;
  overflow: hidden;
  display:flex;
  background: rgba(0,0,0,.35);
}

#pp-wizard .pp-mix-bar span{
  height: 100%;
  display:block;
}

/* Leyenda en una sola línea */
#pp-wizard .pp-mix-legend{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 16px;
  opacity: .9;
  margin-top: 6px;
}

#pp-wizard .pp-mix-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display:inline-block;
  margin-right: 6px;
}

/* Responsive: en pantallas medianas -> 2 columnas, móvil -> 1 */
@media (max-width: 1100px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: 1fr; }
}
/* Quita el check (V/✓) que se dibuja en la tarjeta activa */
.pp-mix-card.is-active::before,
.pp-mix-card.is-active::after,
.pp-mix-card.is-active .pp-mix-title::before,
.pp-mix-card.is-active .pp-mix-title::after,
.pp-mix-card.is-active .pp-mix-title span::before,
.pp-mix-card.is-active .pp-mix-title span::after {
  content: none !important;
  background-image: none !important;
}
/* ===== F1A compacto ===== */
.pp-f1a-top { margin-top: 6px; }

.pp-row { display:flex; gap:12px; align-items:flex-end; }
.pp-row-jornada { align-items:center; gap:10px; margin-top:6px; }
.pp-row-horas { margin-top:10px; display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.pp-field .pp-label,
.pp-row-jornada .pp-label{
  font-size:16px; opacity:.9; font-weight:600;
  width: 300px; flex: 0 0 400px; /* etiqueta compacta a la izquierda */
}

.pp-row-horas .pp-label{ width:auto; flex:auto; margin-bottom:6px; display:block; }

/* Pills para radio */
.pp-pill-radio{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.pp-pill-radio input{ accent-color:#009fe3; }
.pp-pill-radio span{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

/* MIX header en una línea */
.pp-mix-head{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.pp-mix-head-title{ opacity:.9; font-weight:600; }

/* Grid 4 tarjetas (y responsive) */
.pp-mix-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1200px){
  .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Compactación global del wizard (altura) */
#pp-wizard .field-card,
#pp-wizard .wiz-card,
#pp-wizard .pp-mix-card{
  padding: 10px 12px;           /* antes suele ser 14-18 */
}

#pp-wizard .field-title,
#pp-wizard .pp-label{
  margin-bottom: 6px;            /* menos separación */
}

#pp-wizard input{
  padding: 8px 10px;             /* inputs más bajos */
  border-radius: 10px;
}

#pp-wizard .hint{
  margin-top: 8px;
}
/* ===== LAYOUT HERO: control-panel + panel derecho ===== */
.hero{
  display: grid;
  grid-template-columns: 280px 1fr;  /* izquierda fija, derecha flexible */
  gap: 16px;
  align-items: start;

  /* IMPORTANTE: que el bloque superior no crezca infinito */
  min-height: min(78vh, 720px);      /* ajusta: 70–80vh */
}

/* En pantallas pequeñas: apila */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .control-panel{
    order: 2;
  }
  #pp-wizard, #pp-diagnostic{
    order: 1;
  }
}
.control-panel{
  width: 100%;
  max-width: 280px;     /* mismo que grid */
}

@media (max-width: 980px){
  .control-panel{
    max-width: none;
  }
}
/* El panel derecho (wizard/diag) debe poder ocupar altura */
#pp-wizard, #pp-diagnostic{
  height: 100%;
  min-height: 0;              /* clave para que el overflow funcione dentro */
  display: flex;
  flex-direction: column;
}

/* Cabecera fija, body scroll */
.pp-wizard-header,
.pp-diag-header{
  flex: 0 0 auto;
}

.pp-wizard-body,
.pp-diag-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;

  /* un pelín de padding consistente */
  padding-right: 6px; /* deja respirar la barra de scroll */
}
.pp-wizard-header{
  padding: 12px 14px;      /* baja padding */
  gap: 8px;
}

#pp-wizard-title{
  margin: 0;
  line-height: 1.15;
  font-size: 26px;         /* ajusta si quieres */
}

#pp-wizard-subtitle{
  margin: 6px 0 0;
  opacity: .85;
}

/* Botonera más compacta */
.pp-wizard-nav{
  margin-top: 6px !important;
}
.right-panel{
  min-height: 0;
  height: 100%;
  display: flex;
}
.right-panel > section{
  width: 100%;
}

/* 1) Layout 2 columnas (panel izq + panel der) */
.hero{
  display: grid !important;
  grid-template-columns: 320px 1fr !important; /* ajusta 280–360 */
  gap: 18px !important;                        /* separación real */
  align-items: start !important;
}

/* 2) “Corte” visual: divisor vertical + fondos distintos */
.control-panel{
  border-right: 1px solid rgba(255,255,255,.10);
  padding-right: 14px;
}

#pp-wizard, #pp-diagnostic{
  background: rgba(0,0,0,.10);                 /* panel derecho “tarjeta” */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
}
.wrap{ min-height: unset !important; }
.hero{ min-height: unset !important; height: auto !important; }
#pp-wizard{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px); /* ajusta según tu header */
}

#pp-wizard-body{
  overflow: auto;
  min-height: 0;
}
/* ===== Wizard compact grids (F2) ===== */
.pp-qgrid{ display:grid; gap:14px; }
.pp-q{ display:grid; gap:8px; }
.pp-qtitle{ font-weight:700; opacity:.95; }
.pp-qinput input{ width:100%; }

.pp-qspan2{ display:grid; gap:10px; }

.pp-row-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.pp-row-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

.pp-mini-label{ font-size:.85rem; opacity:.9; margin-bottom:6px; }

.pp-area-title{ margin-top:8px; font-weight:800; opacity:.95; }
.pp-area-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.pp-area-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(255,255,255,.04);
  padding:12px;
}
.pp-area-head{ font-weight:800; margin-bottom:10px; }
.pp-area-body input{ width:100%; }

/* Responsive */
@media (max-width: 1100px){
  .pp-row-3{ grid-template-columns: 1fr; }
  .pp-area-grid{ grid-template-columns: 1fr; }
  .pp-row-2{ grid-template-columns: 1fr; }
}
/* ===== Compactar F2: menos alto en tarjetas y campos ===== */
.pp-area-grid{ gap:10px; margin-top:8px; }

.pp-area-card{
  padding:10px;
  border-radius:12px;
}

.pp-area-head{
  margin-bottom:8px;
  font-size:1rem;
  line-height:1.1;
}

.pp-area-body{ gap:8px; }

/* Inputs más bajos */
.pp-mini input,
.pp-qinput input{
  padding:8px 10px !important;
  border-radius:10px !important;
  height:36px !important;
}

/* Etiquetas más pequeñas */
.pp-mini-label{
  font-size:.8rem;
  margin-bottom:4px;
  opacity:.85;
}

/* Filas más juntas */
.pp-row-2{ gap:10px; }
.pp-row-3{ gap:10px; }

/* Título de sección más compacto */
.pp-area-title{
  margin-top:6px;
  font-size:1rem;
  line-height:1.1;
}
.pp-wizard {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02)
    );
}
.pp-wizard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    #009FE3,
    #4aa3ff
  );
  border-radius: 3px 3px 0 0;
}
.pp-wizard h1,
.pp-wizard h2 {
  color: #ffffff;
  font-weight: 600;
}

.pp-wizard p {
  color: rgba(255,255,255,0.75);
}
.pp-wizard input,
.pp-wizard select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}

.pp-wizard input:focus {
  border-color: #009FE3;
  box-shadow: 0 0 0 2px rgba(0,159,227,0.15);
}
/* Limita el ancho útil del wizard */
.pp-wizard-body {
  max-width: 1000px;
}

/* Acerca las columnas del grid */
.pp-wizard-body .form-grid {
  column-gap: 16px;
  row-gap: 12px;
}

/* ====== MODO COMPACTO (solo pasos F2/F3/F4) ====== */
.pp-step--compact h1,
.pp-step--compact .pp-wizard-title,
.pp-step--compact .title,
.pp-step--compact h2 {
  font-size: 32px; /* baja el “H1” sin tocar F1 */
  line-height: 1.15;
  margin: 0 0 6px 0;
}

.pp-step--compact .subtitle,
.pp-step--compact .pp-wizard-subtitle,
.pp-step--compact p {
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 10px 0;
  opacity: .9;
}

/* preguntas (si las tienes en h3/strong/label grandes) */
.pp-step--compact .question,
.pp-step--compact h3 {
  font-size: 16px;
  margin: 10px 0 6px 0;
}

/* inputs + labels: menos alto */
.pp-step--compact .field-title,
.pp-step--compact .label {
  font-size: 12px;
  margin-bottom: 6px;
  opacity: .85;
}

.pp-step--compact input[type="number"],
.pp-step--compact input[type="text"]{
  padding: 8px 10px;  /* antes 10-12 */
  border-radius: 10px;
}

/* menos aire entre bloques */
.pp-step--compact .hint {
  margin-top: 8px !important;
  font-size: 12px;
}

/* cards (Pintura/Chapa/Mecánica): más bajas */
.pp-step--compact .pp-area-card,
.pp-step--compact .area-card,
.pp-step--compact .field-card {
  padding: 12px 14px;
  border-radius: 14px;
}

/* grid: mismo 2x2 pero más compacto */
.pp-step--compact .form-grid{
  gap: 12px;
  margin-top: 12px;
}

/* responsive: en móvil que caiga a 1 columna sin hacer scroll lateral */
@media (max-width: 900px){
  .pp-step--compact .form-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ===== Wizard: evita scroll horizontal y fuerza que los grids puedan encoger ===== */
#pp-wizard, .pp-wizard, #pp-wizard-body, .pp-wizard-body {
  overflow-x: hidden;
}

.form-grid, .wiz-card-grid, .wiz-fields-2 {
  min-width: 0;
}

.wiz-card, .field-card, .form-grid > * {
  min-width: 0;
}

/* Tarjetas dobles (Costes fijos/variables) */
.wiz-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px){
  .wiz-card-grid{
    grid-template-columns: 1fr;
  }
}

/* Dentro de cada tarjeta: 2 columnas de campos */
.wiz-fields-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 720px){
  .wiz-fields-2{
    grid-template-columns: 1fr;
  }
}

/* Inputs: que no “empujen” el grid */
.wiz-card input[type="number"],
.wiz-card input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="text"]{
  width: 100%;
  box-sizing: border-box;
}

/* Compacta un poco el bloque de tarjetas (para igualar altura con otros pasos) */
.wiz-card h4{
  margin: 0 0 8px 0;
}
.wiz-card .hint{
  margin-top: 6px !important;
}
/* 1) Nunca scroll horizontal en el wizard */
#pp-wizard, .pp-wizard, #pp-wizard-body, .pp-wizard-body {
  overflow-x: hidden;
}

/* 2) Bloque salarios en 2 columnas */
.wiz-salarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 760px){
  .wiz-salarios{ grid-template-columns: 1fr; }
}

/* 3) Tarjetas compactas (NO 50% ancho infinito) */
.wiz-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 200px)); /* compactas */
  gap: 6px;
  justify-content: center; /* centradas */
  align-items: start;
  margin-top: 10px;
}
@media (max-width: 980px){
  .wiz-card-grid{
    grid-template-columns: minmax(100px, 200px);
  }
}

/* 4) Dentro de cada tarjeta: 2 columnas de campos, compactas */
.wiz-fields-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .wiz-fields-2{ grid-template-columns: 1fr; }
}

/* 5) Inputs no empujan / no se salen */
.wiz-card, .wiz-card * { min-width: 0; }
.wiz-card input[type="number"], .wiz-card input[type="text"]{
  width: 50%;
  box-sizing: border-box;
}

/* 6) Un pelín más compacto visual */
.wiz-card h4{ margin:0 0 8px 0; }


/* tarjeta clicable */
.pp-mix-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 14px 12px;
  background: rgba(255,255,255,.06);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}

.pp-mix-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,159,227,.55);
  background: rgba(255,255,255,.08);
}

/* activo */
.pp-mix-card.is-active{
  border-color: rgba(0,159,227,.95);
  background: rgba(0,159,227,.10);
  box-shadow: 0 0 0 1px rgba(0,159,227,.25), 0 10px 26px rgba(0,0,0,.25);
}

/* header tarjeta */
.pp-mix-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
  letter-spacing:.02em;
}

.pp-mix-badge{
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  opacity:.9;
}

/* barras apiladas */
.pp-mix-bar{
  height:8px;
  display:flex;
  border-radius:6px;
  overflow:hidden;
  margin:10px 0 10px;
  background: rgba(255,255,255,.08);
}

.pp-mix-bar > span{
  height:100%;
}

/* leyenda compacta */
.pp-mix-legend{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px 12px;
  font-size:12px;
  opacity:.9;
}

.pp-mix-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
  margin-right:6px;
  transform: translateY(1px);
}

.pp-mix-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:100%; }
@media (max-width:980px){ .pp-mix-grid{ grid-template-columns:1fr; } }

.pp-mix-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 14px 12px;
  background: rgba(255,255,255,.06);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}
.pp-mix-card:hover{ transform:translateY(-1px); border-color: rgba(0,159,227,.55); background: rgba(255,255,255,.08); }
.pp-mix-card.is-active{
  border-color: rgba(0,159,227,.95);
  background: rgba(0,159,227,.10);
  box-shadow: 0 0 0 1px rgba(0,159,227,.25), 0 10px 26px rgba(0,0,0,.25);
}
.pp-mix-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-weight:800; letter-spacing:.02em; }
.pp-mix-badge{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); opacity:.9; }

.pp-mix-bar{ height:8px; display:flex; border-radius:6px; overflow:hidden; margin:10px 0; background: rgba(255,255,255,.08); }
.pp-mix-bar>span{ height:100%; }

.pp-mix-legend{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:12px; opacity:.9; }
.pp-mix-dot{ width:8px; height:8px; border-radius:999px; display:inline-block; margin-right:6px; transform: translateY(1px); }
/* Compactar inputs del step 1 */
#pp-wizard .form-grid .field-card input{
  padding: 05px 14px;
  height: 30px;
  border-radius: 10px;
}
.pp-mix-card { padding: 12px 14px; }
.pp-mix-bar  { height: 7px; margin: 8px 0; }
.pp-mix-legend { font-size: 11.5px; gap: 4px 10px; }
@media (min-width: 1100px){
  .pp-mix-legend{ grid-template-columns: repeat(4, 1fr); }
}
.pp-mix-card.is-active::after{
  content:"✓";
  position:absolute;
  top:10px; left:10px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background: rgba(0,159,227,.18);
  border:1px solid rgba(0,159,227,.55);
  font-weight:800;
}
.pp-mix-card{ position:relative; }
/* =========================
   WIZARD – COMPACT MODE
   Objetivo: evitar scroll
   ========================= */

#pp-wizard .pp-wizard-body{
  /* el body no debe crecer infinito */
  max-height: calc(100vh - 220px); /* ajusta según tu header real */
  overflow: auto;
  padding-right: 6px;
}

/* Inputs más compactos */
#pp-wizard .field-card{
  padding: 12px 14px;
  border-radius: 14px;
}
#pp-wizard .field-title{
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .04em;
}
#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}

/* Jornada: radios en una línea */
#pp-wizard .radio-row{
  display: inline-flex;
  margin-right: 14px;
  margin-bottom: 0;
}

/* ===== MIX cards compact ===== */
.pp-mix-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.pp-mix-card{
  padding: 12px 14px;
  border-radius: 14px;
}

.pp-mix-title{
  font-size: 16px;
  margin-bottom: 6px;
}

.pp-mix-bar{
  height: 6px;
  margin: 6px 0 8px;
  border-radius: 6px;
}

.pp-mix-legend{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 1 sola línea en desktop */
  gap: 6px;
  font-size: 11px;
  opacity: .92;
}

/* En móvil: vuelve a 2 columnas para que no se rompa */
@media (max-width: 640px){
  .pp-mix-grid{ grid-template-columns: 1fr; }
  .pp-mix-legend{ grid-template-columns: 1fr 1fr; }
}

/* Botones más pequeños */
#pp-wizard .pp-wizard-nav .btn{
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}
/* =========================
   F1A COMPACT (wizard)
   ========================= */

#pp-wizard .form-grid{
  gap: 10px;
}

/* Cards más bajas */
#pp-wizard .field-card{
  padding: 10px 12px;
  border-radius: 12px;
}

/* Radios en una línea */
#pp-wizard .radio-row{
  display: inline-flex;
  margin: 0 14px 0 0;
  font-size: 14px;
}

/* Inputs más bajos */
#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
}

/* ===== Mix header legend ===== */
#pp-wizard .pp-mix-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  opacity: .9;
  margin: 6px 0 10px;
}
#pp-wizard .pp-mix-dot{
  width: 8px; height: 8px; border-radius: 99px; display:inline-block; margin-right:6px;
}

/* ===== 4 cards en una fila ===== */
#pp-wizard .pp-mix-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Mix cards ultra-compact */
#pp-wizard .pp-mix-card{
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
#pp-wizard .pp-mix-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}
#pp-wizard .pp-mix-bar{
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display:flex;
}

/* Reducir “peso visual” */
#pp-wizard .hint{
  margin-top: 6px !important;
  font-size: 12px;
  opacity: .75;
}

/* Responsive: si no cabe, 2x2 */
@media (max-width: 1100px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: 1fr; }
}
/* =========================
   F1A COMPACT (wizard)
   ========================= */

#pp-wizard .form-grid{
  gap: 10px;
}

/* Cards más bajas */
#pp-wizard .field-card{
  padding: 10px 12px;
  border-radius: 12px;
}

/* Radios en una línea */
#pp-wizard .radio-row{
  display: inline-flex;
  margin: 0 14px 0 0;
  font-size: 14px;
}

/* Inputs más bajos */
#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
}

/* ===== Mix header legend ===== */
#pp-wizard .pp-mix-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  opacity: .9;
  margin: 6px 0 10px;
}
#pp-wizard .pp-mix-dot{
  width: 8px; height: 8px; border-radius: 99px; display:inline-block; margin-right:6px;
}

/* ===== 4 cards en una fila ===== */
#pp-wizard .pp-mix-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Mix cards ultra-compact */
#pp-wizard .pp-mix-card{
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
#pp-wizard .pp-mix-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}
#pp-wizard .pp-mix-bar{
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display:flex;
}

/* Reducir “peso visual” */
#pp-wizard .hint{
  margin-top: 6px !important;
  font-size: 12px;
  opacity: .75;
}

/* Responsive: si no cabe, 2x2 */
@media (max-width: 1100px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: 1fr; }
}

/* =========================
   WIZARD OVERRIDES (compact)
   ========================= */
#pp-wizard .pp-wizard-body{
  padding: 10px 8px;
}

/* Reduce aire general */
#pp-wizard .field-card,
#pp-wizard .wiz-card{
  padding: 10px 12px;
  border-radius: 12px;
}

#pp-wizard .field-title{
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: .03em;
}

#pp-wizard input[type="text"],
#pp-wizard input[type="number"],
#pp-wizard select{
  height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}

/* Radios en línea y compactos */
#pp-wizard .radio-row{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
  margin-bottom: 6px;
}

/* Grid del paso: más compacto */
#pp-wizard .form-grid{
  gap: 0px;
  margin-top: 8px;
}

/* --- MIX: 4 tarjetas en una fila --- */
#pp-wizard .pp-mix-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

#pp-wizard .pp-mix-card{
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

#pp-wizard .pp-mix-card:hover{
  border-color: rgba(0,159,227,.55);
}

#pp-wizard .pp-mix-card.is-active{
  border-color: rgba(0,159,227,.95);
  box-shadow: 0 0 0 2px rgba(0,159,227,.12) inset;
  background: rgba(0,159,227,.08);
}

#pp-wizard .pp-mix-title{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}

#pp-wizard .pp-pill{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  opacity: .9;
}

#pp-wizard .pp-mix-bar{
  height: 6px;
  border-radius: 6px;
  overflow: hidden;
  display:flex;
  background: rgba(0,0,0,.35);
}

#pp-wizard .pp-mix-bar span{
  height: 100%;
  display:block;
}

/* Leyenda en una sola línea */
#pp-wizard .pp-mix-legend{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 16px;
  opacity: .9;
  margin-top: 6px;
}

#pp-wizard .pp-mix-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display:inline-block;
  margin-right: 6px;
}

/* Responsive: en pantallas medianas -> 2 columnas, móvil -> 1 */
@media (max-width: 1100px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #pp-wizard .pp-mix-grid{ grid-template-columns: 1fr; }
}
/* Quita el check (V/✓) que se dibuja en la tarjeta activa */
.pp-mix-card.is-active::before,
.pp-mix-card.is-active::after,
.pp-mix-card.is-active .pp-mix-title::before,
.pp-mix-card.is-active .pp-mix-title::after,
.pp-mix-card.is-active .pp-mix-title span::before,
.pp-mix-card.is-active .pp-mix-title span::after {
  content: none !important;
  background-image: none !important;
}
/* ===== F1A compacto ===== */
.pp-f1a-top { margin-top: 6px; }

.pp-row { display:flex; gap:12px; align-items:flex-end; }
.pp-row-jornada { align-items:center; gap:10px; margin-top:6px; }
.pp-row-horas { margin-top:10px; display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.pp-field .pp-label,
.pp-row-jornada .pp-label{
  font-size:16px; opacity:.9; font-weight:600;
  width: 300px; flex: 0 0 400px; /* etiqueta compacta a la izquierda */
}

.pp-row-horas .pp-label{ width:auto; flex:auto; margin-bottom:6px; display:block; }

/* Pills para radio */
.pp-pill-radio{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.pp-pill-radio input{ accent-color:#009fe3; }
.pp-pill-radio span{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

/* MIX header en una línea */
.pp-mix-head{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.pp-mix-head-title{ opacity:.9; font-weight:600; }

/* Grid 4 tarjetas (y responsive) */
.pp-mix-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1200px){
  .pp-mix-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Compactación global del wizard (altura) */
#pp-wizard .field-card,
#pp-wizard .wiz-card,
#pp-wizard .pp-mix-card{
  padding: 10px 12px;           /* antes suele ser 14-18 */
}

#pp-wizard .field-title,
#pp-wizard .pp-label{
  margin-bottom: 6px;            /* menos separación */
}

#pp-wizard input{
  padding: 8px 10px;             /* inputs más bajos */
  border-radius: 10px;
}

#pp-wizard .hint{
  margin-top: 8px;
}
/* ===== LAYOUT HERO: control-panel + panel derecho ===== */
.hero{
  display: grid;
  grid-template-columns: 280px 1fr;  /* izquierda fija, derecha flexible */
  gap: 16px;
  align-items: start;

  /* IMPORTANTE: que el bloque superior no crezca infinito */
  min-height: min(78vh, 720px);      /* ajusta: 70–80vh */
}

/* En pantallas pequeñas: apila */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .control-panel{
    order: 2;
  }
  #pp-wizard, #pp-diagnostic{
    order: 1;
  }
}
.control-panel{
  width: 100%;
  max-width: 280px;     /* mismo que grid */
}

@media (max-width: 980px){
  .control-panel{
    max-width: none;
  }
}
/* El panel derecho (wizard/diag) debe poder ocupar altura */
#pp-wizard, #pp-diagnostic{
  height: 100%;
  min-height: 0;              /* clave para que el overflow funcione dentro */
  display: flex;
  flex-direction: column;
}

/* Cabecera fija, body scroll */
.pp-wizard-header,
.pp-diag-header{
  flex: 0 0 auto;
}

.pp-wizard-body,
.pp-diag-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;

  /* un pelín de padding consistente */
  padding-right: 6px; /* deja respirar la barra de scroll */
}
.pp-wizard-header{
  padding: 12px 14px;      /* baja padding */
  gap: 8px;
}

#pp-wizard-title{
  margin: 0;
  line-height: 1.15;
  font-size: 26px;         /* ajusta si quieres */
}

#pp-wizard-subtitle{
  margin: 6px 0 0;
  opacity: .85;
}

/* Botonera más compacta */
.pp-wizard-nav{
  margin-top: 6px !important;
}
.right-panel{
  min-height: 0;
  height: 100%;
  display: flex;
}
.right-panel > section{
  width: 100%;
}

/* 1) Layout 2 columnas (panel izq + panel der) */
.hero{
  display: grid !important;
  grid-template-columns: 320px 1fr !important; /* ajusta 280–360 */
  gap: 18px !important;                        /* separación real */
  align-items: start !important;
}

/* 2) “Corte” visual: divisor vertical + fondos distintos */
.control-panel{
  border-right: 1px solid rgba(255,255,255,.10);
  padding-right: 14px;
}

#pp-wizard, #pp-diagnostic{
  background: rgba(0,0,0,.10);                 /* panel derecho “tarjeta” */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
}
.wrap{ min-height: unset !important; }
.hero{ min-height: unset !important; height: auto !important; }
#pp-wizard{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px); /* ajusta según tu header */
}

#pp-wizard-body{
  overflow: auto;
  min-height: 0;
}
/* ===== Wizard compact grids (F2) ===== */
.pp-qgrid{ display:grid; gap:14px; }
.pp-q{ display:grid; gap:8px; }
.pp-qtitle{ font-weight:700; opacity:.95; }
.pp-qinput input{ width:100%; }

.pp-qspan2{ display:grid; gap:10px; }

.pp-row-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.pp-row-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

.pp-mini-label{ font-size:.85rem; opacity:.9; margin-bottom:6px; }

.pp-area-title{ margin-top:8px; font-weight:800; opacity:.95; }
.pp-area-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.pp-area-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(255,255,255,.04);
  padding:12px;
}
.pp-area-head{ font-weight:800; margin-bottom:10px; }
.pp-area-body input{ width:100%; }

/* Responsive */
@media (max-width: 1100px){
  .pp-row-3{ grid-template-columns: 1fr; }
  .pp-area-grid{ grid-template-columns: 1fr; }
  .pp-row-2{ grid-template-columns: 1fr; }
}
/* ===== Compactar F2: menos alto en tarjetas y campos ===== */
.pp-area-grid{ gap:10px; margin-top:8px; }

.pp-area-card{
  padding:10px;
  border-radius:12px;
}

.pp-area-head{
  margin-bottom:8px;
  font-size:1rem;
  line-height:1.1;
}

.pp-area-body{ gap:8px; }

/* Inputs más bajos */
.pp-mini input,
.pp-qinput input{
  padding:8px 10px !important;
  border-radius:10px !important;
  height:36px !important;
}

/* Etiquetas más pequeñas */
.pp-mini-label{
  font-size:.8rem;
  margin-bottom:4px;
  opacity:.85;
}

/* Filas más juntas */
.pp-row-2{ gap:10px; }
.pp-row-3{ gap:10px; }

/* Título de sección más compacto */
.pp-area-title{
  margin-top:6px;
  font-size:1rem;
  line-height:1.1;
}
.pp-wizard {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02)
    );
}
.pp-wizard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    #009FE3,
    #4aa3ff
  );
  border-radius: 3px 3px 0 0;
}
.pp-wizard h1,
.pp-wizard h2 {
  color: #ffffff;
  font-weight: 600;
}

.pp-wizard p {
  color: rgba(255,255,255,0.75);
}
.pp-wizard input,
.pp-wizard select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}

.pp-wizard input:focus {
  border-color: #009FE3;
  box-shadow: 0 0 0 2px rgba(0,159,227,0.15);
}
/* Limita el ancho útil del wizard */
.pp-wizard-body {
  max-width: 1000px;
}

/* Acerca las columnas del grid */
.pp-wizard-body .form-grid {
  column-gap: 16px;
  row-gap: 12px;
}

/* ====== MODO COMPACTO (solo pasos F2/F3/F4) ====== */
.pp-step--compact h1,
.pp-step--compact .pp-wizard-title,
.pp-step--compact .title,
.pp-step--compact h2 {
  font-size: 32px; /* baja el “H1” sin tocar F1 */
  line-height: 1.15;
  margin: 0 0 6px 0;
}

.pp-step--compact .subtitle,
.pp-step--compact .pp-wizard-subtitle,
.pp-step--compact p {
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 10px 0;
  opacity: .9;
}

/* preguntas (si las tienes en h3/strong/label grandes) */
.pp-step--compact .question,
.pp-step--compact h3 {
  font-size: 16px;
  margin: 10px 0 6px 0;
}

/* inputs + labels: menos alto */
.pp-step--compact .field-title,
.pp-step--compact .label {
  font-size: 12px;
  margin-bottom: 6px;
  opacity: .85;
}

.pp-step--compact input[type="number"],
.pp-step--compact input[type="text"]{
  padding: 8px 10px;  /* antes 10-12 */
  border-radius: 10px;
}

/* menos aire entre bloques */
.pp-step--compact .hint {
  margin-top: 8px !important;
  font-size: 12px;
}

/* cards (Pintura/Chapa/Mecánica): más bajas */
.pp-step--compact .pp-area-card,
.pp-step--compact .area-card,
.pp-step--compact .field-card {
  padding: 12px 14px;
  border-radius: 14px;
}

/* grid: mismo 2x2 pero más compacto */
.pp-step--compact .form-grid{
  gap: 12px;
  margin-top: 12px;
}

/* responsive: en móvil que caiga a 1 columna sin hacer scroll lateral */
@media (max-width: 900px){
  .pp-step--compact .form-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ===== Wizard: evita scroll horizontal y fuerza que los grids puedan encoger ===== */
#pp-wizard, .pp-wizard, #pp-wizard-body, .pp-wizard-body {
  overflow-x: hidden;
}

.form-grid, .wiz-card-grid, .wiz-fields-2 {
  min-width: 0;
}

.wiz-card, .field-card, .form-grid > * {
  min-width: 0;
}

/* Tarjetas dobles (Costes fijos/variables) */
.wiz-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px){
  .wiz-card-grid{
    grid-template-columns: 1fr;
  }
}

/* Dentro de cada tarjeta: 2 columnas de campos */
.wiz-fields-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 720px){
  .wiz-fields-2{
    grid-template-columns: 1fr;
  }
}

/* Inputs: que no “empujen” el grid */
.wiz-card input[type="number"],
.wiz-card input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="text"]{
  width: 100%;
  box-sizing: border-box;
}

/* Compacta un poco el bloque de tarjetas (para igualar altura con otros pasos) */
.wiz-card h4{
  margin: 0 0 8px 0;
}
.wiz-card .hint{
  margin-top: 6px !important;
}
/* 1) Nunca scroll horizontal en el wizard */
#pp-wizard, .pp-wizard, #pp-wizard-body, .pp-wizard-body {
  overflow-x: hidden;
}

/* 2) Bloque salarios en 2 columnas */
.wiz-salarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 760px){
  .wiz-salarios{ grid-template-columns: 1fr; }
}

/* 3) Tarjetas compactas (NO 50% ancho infinito) */
.wiz-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 200px)); /* compactas */
  gap: 6px;
  justify-content: center; /* centradas */
  align-items: start;
  margin-top: 10px;
}
@media (max-width: 980px){
  .wiz-card-grid{
    grid-template-columns: minmax(100px, 200px);
  }
}

/* 4) Dentro de cada tarjeta: 2 columnas de campos, compactas */
.wiz-fields-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .wiz-fields-2{ grid-template-columns: 1fr; }
}

/* 5) Inputs no empujan / no se salen */
.wiz-card, .wiz-card * { min-width: 0; }
.wiz-card input[type="number"], .wiz-card input[type="text"]{
  width: 50%;
  box-sizing: border-box;
}


/* ===== OVERRIDE BRUTO: arregla el paso de Costes sí o sí ===== */
.wiz-card-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 tarjetas en pantalla */
  gap: 14px !important;
  align-items: start !important;
}

/* Evita scroll horizontal por culpa de anchos mínimos */
.wiz-card, .wiz-card *{
  min-width: 0 !important;
}

/* Inputs al 100% (anula el width:50% que te rompe todo) */
.wiz-card input[type="number"],
.wiz-card input[type="text"]{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Dentro de tarjeta: 2 columnas de campos */
.wiz-fields-2{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 12px !important;
}

/* En pantallas pequeñas: 1 columna */
@media (max-width: 980px){
  .wiz-card-grid{ grid-template-columns: 1fr !important; }
}
@media (max-width: 720px){
  .wiz-fields-2{ grid-template-columns: 1fr !important; }
}
/* ===== FIX: wiz-card dentro del grid NO puede tener width fijo ===== */
.wiz-card-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items:start !important;
}

/* Solo las tarjetas que están dentro del grid */
.wiz-card-grid > .wiz-card{
  width: auto !important;     /* 🔑 mata el min(860px, 96vw) */
  max-width: none !important;
}

/* Evita que el contenido obligue a crecer */
.wiz-card-grid > .wiz-card,
.wiz-card-grid > .wiz-card *{
  min-width: 0 !important;
}

/* Inputs siempre al 100% */
.wiz-card-grid input[type="number"],
.wiz-card-grid input[type="text"]{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive */
@media (max-width: 980px){
  .wiz-card-grid{ grid-template-columns: 1fr !important; }
}
/* ===== INTRO: dim/focus ===== */
.pp-dim .panel { opacity: .22; filter: blur(.2px); transition: .25s ease; }
.pp-dim .panel.pp-focus { opacity: 1; filter: none; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.25); }

/* resalta números/kpis */
.pp-pulse {
  position: relative;
  animation: ppPulse 1s ease-in-out infinite;
}
@keyframes ppPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
/* =========================
   STORY (DISPLAY SUPERIOR)
========================= */
.pp-story{
  border-radius: 18px;
  padding: 18px;
  background: rgba(10,18,28,.60);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  margin-bottom: 14px;
}

.pp-story-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.pp-story-badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(0,159,227,.12);
  border: 1px solid rgba(0,159,227,.25);
  font-weight: 700;
  letter-spacing:.4px;
  font-size: 12px;
  margin-bottom:10px;
}

.pp-story-title{
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

.pp-story-lead{
  margin: 0;
  opacity: .9;
  max-width: 900px;
}

.pp-story-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pp-story-metrics{
  margin-top: 12px;
  display:grid;
  gap:10px;
}

/* Highlight suave de panel al “focalizar” */
.pp-focus{
  outline: 2px solid rgba(0,159,227,.35);
  box-shadow: 0 0 0 6px rgba(0,159,227,.10);
  transition: box-shadow .25s ease, outline .25s ease;
}
/* ===== Contenedor dashboard (para overlay absoluto) ===== */
.pp-dashboard-wrap{
  position: relative;
}

/* ===== Overlay bloqueo dashboard (solo dentro del wrap) ===== */
.pp-lock{
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.pp-lock-card{
  width: min(560px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 16px 18px;
  background: rgba(10,18,28,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.pp-lock-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  background: rgba(0,159,227,.18);
  border: 1px solid rgba(0,159,227,.35);
  color: #d7f3ff;
  margin-bottom: 10px;
}

.pp-lock-title{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}

.pp-lock-text{
  opacity: .9;
  line-height: 1.35;
  margin-bottom: 12px;
}
/* ===========================
OVERLAY FINAL
=========================== */
.pp-final-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.pp-final-card{
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,22,40,.92);
  backdrop-filter: blur(10px);
  padding: 16px;
}

.pp-final-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pp-final-logos{
  display:flex;
  align-items:center;
  gap: 12px;
}

.pp-final-logo{
  height: 30px;
  width: auto;
  object-fit: contain;
  display:block;
}

.pp-final-close{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.pp-final-copy{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.pp-final-copy-title{
  font-weight: 800;
  margin-bottom: 6px;
}

.pp-final-copy-text{
  color: rgba(255,255,255,.85);
  line-height: 1.35;
}

.pp-final-form{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.pp-final-form-title{
  font-weight: 800;
  margin-bottom: 10px;
}

.pp-final-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 780px){
  .pp-final-grid{ grid-template-columns: 1fr; }
}

.pp-field label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,.80);
  margin-bottom: 6px;
}

.pp-field input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: #fff;
}

.pp-final-cta{
  width: 100%;
  margin-top: 12px;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: #ed6b01;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.pp-final-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* ===========================
   LIMPIEZA DIAGNÓSTICO EN OVERLAY FINAL
=========================== */

#pp-final-overlay .pp-diag-actions,
#pp-final-overlay .pp-diag-cta,
#pp-final-overlay button[data-action-id="go_optimizer"],
#pp-final-overlay button[data-action-id="go_actual"] {
  display: none !important;
}

/* Bloquea scroll del fondo cuando el overlay está abierto */
body.pp-final-open { overflow: hidden; }

/* KPIs resumen del diagnóstico: ocultos en desktop */
#pp-final-kpis{
  display: none;
}


.pp-final-bullets{
  margin: 10px 0 14px;
  padding-left: 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* =========================================================
   MÓVIL – WIZARD Y LAYOUT GENERAL
   Solo presentación. No toca lógica.
   ========================================================= */
@media (max-width: 768px){

  .wrap{
    padding: 8px 8px 16px;
  }

  header.hero{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 8px;
    border-radius: 14px;
  }

  .control-panel{
    order: 2;
    max-width: none !important;
    padding: 10px;
    gap: 8px;
    border-right: 0;
  }

  .right-panel{
    order: 1;
    min-height: 0;
    display: block;
  }

  #pp-story,
  #pp-wizard,
  #pp-diagnostic{
    border-radius: 14px;
    padding: 12px;
  }

  .pp-story-header,
  .pp-wizard-header,
  .pp-diag-header{
    display: block;
  }

  .pp-story-title,
  #pp-wizard-title,
  .pp-diag-title,
  #pp-diag-title{
    font-size: 22px !important;
    line-height: 1.15;
  }

  .pp-story-lead,
  #pp-wizard-subtitle,
  .pp-diag-subtitle,
  #pp-diag-subtitle{
    font-size: 14px;
    line-height: 1.35;
  }

  .pp-wizard-nav{
    display: flex !important;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px !important;
  }

  .pp-wizard-nav .btn{
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 12px;
  }

  .chips{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .chip{
    text-align: center;
    font-size: 11px;
    padding: 7px 8px;
  }

  main.grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .panel{
    border-width: 4px;
    border-radius: 14px;
  }

  .panel-head{
    padding: 12px 12px 8px;
  }

  .panel-title{
    font-size: 14px;
    line-height: 1.2;
  }

  .panel-sub{
    font-size: 12px;
    line-height: 1.35;
  }

  .panel-body{
    padding: 10px;
    gap: 10px;
  }

  .kpi-grid.cols-2,
  .kpi-grid.cols-3,
  .kpi-grid.cols-4,
  .be-top,
  .pp-row-2,
  .pp-row-3,
  .pp-area-grid,
  .wiz-card-grid,
  .wiz-fields-2,
  .wiz-salarios{
    grid-template-columns: 1fr !important;
  }

  .card,
  .card.strong{
    min-height: auto;
    padding: 12px;
  }

  .value{
    font-size: clamp(18px, 6vw, 24px) !important;
  }

  .valuec .num,
  .kpi-tight,
  .valuec.kpi-fit .num{
    font-size: clamp(16px, 5.5vw, 22px) !important;
  }

  .delta{
    font-size: 11px;
    padding: 4px 8px;
  }

  #panel-breakeven .chart-wrap{
    height: 260px;
    padding: 10px;
  }

  .pp-f1a-top,
  .pp-qgrid,
  .wiz-layout,
  .wiz-top,
  .wiz-mid,
  .wiz-cards{
    display: block;
  }

  .pp-row{
    display: block;
  }

  .pp-row-jornada{
    display: block;
    margin-top: 6px;
  }

  .pp-row-jornada .pp-label,
  .pp-field .pp-label{
    width: auto !important;
    flex: auto !important;
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .pp-pill-radio{
    display: flex;
    margin-bottom: 8px;
  }

  .pp-pill-radio span{
    width: 100%;
    text-align: center;
    padding: 10px 12px;
  }

  .pp-row-horas{
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-top: 10px;
  }

  #pp-wizard .pp-mix-grid,
  .pp-mix-grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  #pp-wizard .pp-mix-card,
  .pp-mix-card{
    padding: 12px;
    border-radius: 12px;
  }

  #pp-wizard .pp-mix-title,
  .pp-mix-title{
    font-size: 15px;
  }

  #pp-wizard .pp-mix-legend,
  .pp-mix-legend{
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px;
    font-size: 11px;
  }

  .pp-qtitle,
  .pp-area-title,
  .pp-area-head{
    font-size: 15px;
    line-height: 1.2;
  }

  .pp-mini-label,
  .field-title,
  .label{
    font-size: 12px !important;
  }

  #pp-wizard input[type="text"],
  #pp-wizard input[type="number"],
  #pp-wizard select,
  .pp-field input{
    height: 42px !important;
    padding: 9px 10px !important;
    font-size: 16px;
  }

  .small-note{
    font-size: 11px;
    padding-top: 8px;
  }

  .pp-final-card{
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    padding: 12px;
  }

  .pp-final-top{
    align-items: flex-start;
  }

  .pp-final-logo{
    height: 24px;
  }

  .pp-final-copy,
  .pp-final-form{
    padding: 10px;
    border-radius: 12px;
  }

  .pp-final-cta{
    padding: 13px 14px;
    font-size: 14px;
  }
}
/* =========================================================
   MÓVIL – INTRO LIMPIA
   Solo portada de bienvenida
   ========================================================= */
@media (max-width: 768px){

  html, body{
    margin: 0 !important;
    padding: 0 !important;
  }

  .wrap{
    padding: 0;
    max-width: 100% !important;
    width: 100% !important;
  }

  header.hero{
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .right-panel{
    display: block;
    min-height: 100vh;
    padding: 12px;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* STORY base móvil */
  #pp-story{
    min-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    padding: 40px 20px 24px;
    border-radius: 0 !important;
    margin: 0;
    background: linear-gradient(180deg, rgba(10,18,28,.88), rgba(9,26,47,.96));
    border: 0;
    box-shadow: none;
  }

  #pp-story .pp-story-header{
    display: block;
  }

  #pp-story .pp-story-title{
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 18px 0;
  }

  #pp-story .pp-story-lead{
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  #pp-story .pp-story-metrics{
    display: grid;
    gap: 14px;
    margin-top: 12px;
  }

  #pp-story .pp-story-metric{
    font-size: 15px;
    line-height: 1.6;
  }

  .pp-story-welcome-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
  }

  .pp-story-welcome-actions .pp-btn,
  .pp-story-welcome-actions .btn,
  #pp-welcome-start{
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
  }

  .pp-mobile-note{
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.75;
    margin-top: 14px;
    margin-bottom: 6px;
  }
}


/* =========================================================
   MÓVIL – WIZARD
   Wizard completo en móvil
   ========================================================= */
@media (max-width: 768px){

  #pp-wizard{
    min-height: 100vh;
    max-height: none !important;
    padding: 16px 14px 24px;
    border-radius: 0 !important;
    border: 0 !important;
    background: linear-gradient(180deg, rgba(10,18,28,.88), rgba(9,26,47,.96));
    box-shadow: none !important;
  }

  .pp-wizard-header{
    padding: 0 0 14px 0 !important;
  }

  #pp-wizard-title{
    font-size: 20px !important;
    line-height: 1.15;
    margin-bottom: 8px;
  }

  #pp-wizard-subtitle{
    font-size: 14px !important;
    line-height: 1.45;
    margin: 0;
    opacity: .82;
  }

  /* Ocultamos navegación superior en móvil */
  .pp-wizard-nav{
    display: none !important;
  }

  #pp-wizard-body{
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .pp-row-jornada{
    margin-top: 16px;
  }

  .pp-row-horas{
    gap: 14px;
    margin-top: 14px;
  }

  .pp-row-jornada .pp-label,
  .pp-field .pp-label{
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  #pp-wizard input[type="text"],
  #pp-wizard input[type="number"]{
    height: 46px !important;
    border-radius: 12px;
    font-size: 16px;
  }

  .pp-pill-radio{
    margin-bottom: 10px;
  }

  .pp-pill-radio span{
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* CTA inferior wizard */
  .pp-wizard-bottom-cta{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 0 10px;
    background: linear-gradient(to top, rgba(9,26,47,0.96), rgba(9,26,47,0));
    z-index: 10;
  }

  .pp-wizard-bottom-cta .btn{
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 14px;
  }

  #pp-wiz-next-mobile{
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    justify-content: center;
    background: linear-gradient(90deg, #ed6b01, #ff8a1c) !important;
    border: 1px solid rgba(255, 166, 51, 0.85) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(237,107,1,.22);
  }

  #pp-wiz-next-mobile:hover{
    filter: brightness(1.04);
    transform: none;
  }
}


/* =========================================================
   MÓVIL – WOW / STORY
   Pantallas intermedias de impacto
   ========================================================= */
@media (max-width: 768px){

  #pp-story{
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 24px);
    padding: 24px 16px 20px;
    background: linear-gradient(180deg, rgba(10,18,28,.88), rgba(9,26,47,.96));
  }

  #pp-story .pp-story-header{
    display: block;
  }

  #pp-story .pp-story-title{
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 8px;
    max-width: 92%;
  }

  #pp-story .pp-story-lead{
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 18px 0;
    color: rgba(255,255,255,.8);
    max-width: 92%;
  }

  /* 3 claves con el mismo peso */
  #pp-story .pp-story-metrics{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
    justify-content: center;
  }

  #pp-story .pp-story-metric{
    padding: 16px 16px 15px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 19px;
    min-height: 92px;
    line-height: 1.15;
    font-weight: 600;
    color:#ffffff;
    word-break: normal;
    overflow-wrap: anywhere;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }

  #pp-story .pp-story-metric:first-child,
  #pp-story .pp-story-metric:nth-child(2),
  #pp-story .pp-story-metric:nth-child(3){
    background: rgba(255,255,255,.06);
    border-left: none;
    border-color: rgba(255,255,255,.08);
  }

  #pp-story .pp-story-metric strong{
    display: block;
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.58);
    margin-bottom: 8px;
  }

  /* Botón WOW abajo */
  #pp-story .pp-story-actions{
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    justify-content: flex-start;
  }

  #pp-story .pp-story-actions .btn,
  #pp-story #pp-story-next{
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    justify-content: center;
    background: linear-gradient(90deg, #ff6a00, #ff8c1a) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(255,106,0,.25);
  }

  #pp-story .pp-story-actions .btn:hover{
    filter: brightness(1.05);
  }
}
@media (max-width: 768px){
  #pp-story{
    display: flex;
    flex-direction: column;
  }

  #pp-story .pp-story-header{
    order: 1;
  }

  #pp-story .pp-story-metrics{
    order: 2;
  }

  #pp-story .pp-story-actions{
    order: 3;
  }
  #pp-story .pp-story-metrics{
    margin-top: 12px;
  }

  #pp-story .pp-story-metric:first-child{
    font-size: 24px;
    font-weight: 800;
  }
  #pp-story .pp-story-metric:first-child{
    font-size: 24px;
    font-weight: 800;
  }

  #pp-story .pp-story-metric:first-child{
    font-size: 24px;
    font-weight: 800;
  }

  #pp-story .pp-story-metric:first-child{
    background: linear-gradient(180deg, rgba(255,122,0,0.15), rgba(255,122,0,0.05));
    border: 1px solid rgba(255,122,0,0.25);
  }

  /* KPI principal */
  #pp-story .pp-story-metric:first-child{
    background: linear-gradient(180deg, rgba(255,122,0,0.18), rgba(255,122,0,0.05));
    border: 1px solid rgba(255,122,0,0.35);
    box-shadow: 0 8px 24px rgba(255,122,0,0.15);

    font-size: 26px;
    font-weight: 800;
  }

  /* secundarios */
  #pp-story .pp-story-metric:not(:first-child){
    opacity: 0.75;
    font-size: 16px;
    font-weight: 500;
  }

  #pp-story .pp-story-metric:not(:first-child){
    padding: 12px 14px;
    min-height: auto;
  }

  #pp-story .pp-story-metric:not(:first-child){
    padding: 12px 14px;
    min-height: auto;
  }

  #pp-story .pp-story-metric:not(:first-child){
    opacity: 0.92;   /* antes 0.75 → demasiado bajo */
    font-size: 17px;
    font-weight: 500;
  }

  #pp-story .pp-story-metric{
    line-height: 1.3;
  }

  #pp-story .pp-story-metric strong{
    font-size: 10px;
    margin-bottom: 6px;
  }

  #pp-story .pp-story-metric:nth-child(2){
    opacity: 1;
    font-weight: 600;
  }

  #pp-story .pp-story-metric:nth-child(2){
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);

    padding: 8px 12px;
    border-radius: 999px;

    display: inline-block;
    width: fit-content;

    font-size: 13px;
    font-weight: 600;

    margin-top: -6px;
  }

  /* Bienvenida – primer bloque no protagonista */
  #pp-wizard .pp-card:first-child{
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
  }

  /* Texto más ligero */
  #pp-wizard .pp-card:first-child strong{
    font-size: 16px;
    font-weight: 600;
  }

  /* Quita el efecto naranja */
  #pp-wizard .pp-card:first-child{
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  }



  #pp-wizard .pp-card:first-child{
    opacity: 0.9;
  }

  #pp-wizard .pp-card:first-child{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: none;
    padding: 14px 14px;
  }

  /* texto más contenido */
  #pp-wizard .pp-card:first-child{
    font-size: 15px;
    font-weight: 500;
  }

  /* quita el efecto naranja totalmente */
  #pp-wizard .pp-card:first-child{
    background-image: none;
  }

  #pp-story .pp-story-metric:nth-child(2){
    font-size: 14px;
    font-weight: 600;
    opacity: 1;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);

    padding: 8px 12px;
    border-radius: 999px;

    display: inline-block;
    width: fit-content;
  }


}

@media (max-width: 768px){

  /* segundo KPI en WOW2 más importante */
  #pp-story .pp-story-metric:nth-child(2){
    opacity: 1;
    font-size: 18px;
    font-weight: 600;

    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);

    padding: 14px 16px;
    border-radius: 14px;
  }

  #pp-story .pp-story-metric:first-child strong{
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
    margin-bottom: 6px;
  }

  #pp-story .pp-story-metric:first-child{
    font-size: 22px;
  }
  #pp-story .pp-story-metric:nth-child(2){
    font-size: 17px;
    font-weight: 600;
    opacity: 1;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
  }

  .pp-wizard-bottom-cta{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 14px 0 10px;
    background: linear-gradient(to top, rgba(9,26,47,0.96), rgba(9,26,47,0));
    z-index: 10;
  }

  #pp-wiz-prev-mobile{
    min-height: 50px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  #pp-wiz-next-mobile{
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    justify-content: center;
    background: linear-gradient(90deg, #ed6b01, #ff8a1c) !important;
    border: 1px solid rgba(255, 166, 51, 0.85) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(237,107,1,.22);
  }

  #pp-wiz-next-mobile:hover{
    filter: brightness(1.04);
    transform: none;
  }

    /* =========================================================
    FINAL OVERLAY – KPIs RESUMEN
    ========================================================= */
  .pp-final-kpis{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pp-final-kpi-block{
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
  }

  .pp-final-kpi-title{
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 10px;
    color: #fff;
  }

  .pp-final-kpi-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
  }

  .pp-final-kpi-card{
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
  }

  .pp-final-kpi-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.62);
    margin-bottom: 6px;
  }

  .pp-final-kpi-value{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    word-break: break-word;
  }


}



@media (max-width: 780px){
  .pp-final-kpi-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }

  .pp-final-kpi-card{
    padding: 10px 8px;
  }

  .pp-final-kpi-value{
    font-size: 17px;
  }

  /* =========================================================
    FINAL OVERLAY – limpiar diagnóstico embebido
    ========================================================= */
  #pp-final-overlay #pp-diagnostic .pp-diag-actions,
  #pp-final-overlay #pp-diagnostic #pp-diag-cta-primary,
  #pp-final-overlay #pp-diagnostic #pp-diag-cta-secondary,
  #pp-final-overlay #pp-diagnostic #pp-diag-cta-tertiary{
    display: none !important;
  }

  #pp-final-overlay #pp-diagnostic{
    margin-bottom: 14px;
  }

  #pp-final-overlay #pp-diagnostic .pp-diag-body{
    padding-bottom: 0 !important;
  }

  /* En móvil sí se muestran */
  #pp-final-kpis{
    display: flex;
    flex-direction: column;
    
  }

    .pp-final-kpi-card{
    padding: 12px 10px 10px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pp-final-kpi-value{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 6px;
  }

  .pp-final-kpi-value{
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
  }


  .pp-final-kpi-card .delta{
    align-self: flex-start;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
  }

    @media (max-width: 780px){

  #pp-diagnostic .pp-diag-actions{
    display: flex;
    gap: 8px;
    margin: 10px 0 12px;
    flex-wrap: wrap;
  }

  #pp-diagnostic .pp-diag-actions .pp-btn,
  #pp-diagnostic .pp-diag-actions button{
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255,166,51,.85) !important;
    background: linear-gradient(90deg, #ed6b01, #ff8a1c) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(237,107,1,.18);
  }
  }
}

@media (max-width: 900px){
  .control-panel{
    display: none !important;
  }

  #pp-dashboard-wrap{
    display: none !important;
  }

  .wrap{
    display: block !important;
  }

  .right-panel{
    width: 100% !important;
    max-width: 100% !important;
  }

  header.hero{
    display: block !important;
    grid-template-columns: none !important;
  }
}

/* =========================================================
   MÓVIL – AJUSTE GLOBAL DE ESCALA
   ========================================================= */
@media (max-width: 900px){

  /* contenedor general */
  .right-panel,
  #pp-story,
  #pp-wizard,
  #pp-diagnostic{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* títulos */
  #pp-story .pp-story-title,
  #pp-wizard-title,
  #pp-diag-title{
    font-size: 18px !important;
    line-height: 1.12 !important;
  }

  #pp-story .pp-story-lead,
  #pp-wizard-subtitle,
  #pp-diag-subtitle{
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* cuerpo / bullets */
  .pp-diag-bullets,
  .pp-story-metric,
  .pp-final-copy,
  .pp-final-copy-text,
  .pp-final-bullets{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* botones móvil */
  .pp-wizard-bottom-cta .btn,
  #pp-wiz-next-mobile,
  #pp-diagnostic .pp-diag-actions .pp-btn,
  #pp-diagnostic .pp-diag-actions button{
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* bloques KPI resumen */
  .pp-final-kpi-block{
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .pp-final-kpi-title{
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .pp-final-kpi-grid{
    gap: 8px !important;
  }

  .pp-final-kpi-card{
    min-height: 82px !important;
    padding: 10px 8px 8px !important;
    border-radius: 10px !important;
  }

  .pp-final-kpi-label{
    font-size: 10px !important;
    margin-bottom: 5px !important;
    line-height: 1.1 !important;
  }

  .pp-final-kpi-value{
    font-size: 15px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em;
  }

  .pp-final-kpi-card .delta{
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  /* inputs */
  #pp-wizard input[type="text"],
  #pp-wizard input[type="number"],
  .pp-final-form input{
    height: 42px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  /* cards del wizard */
  .pp-pill-radio span{
    min-height: 40px !important;
    font-size: 14px !important;
  }
}
/* Estado final de diagnóstico: solo navegación de escenarios + CTA del diagnóstico */
body.diagnostic-final #btn-demo,
body.diagnostic-final #btn-start,
body.diagnostic-final .control-panel > .chips,
body.diagnostic-final .control-panel > .hero-box,
body.diagnostic-final .control-panel > .small-note{
  display: none !important;
}

body.diagnostic-final .control-panel{
  gap: 12px;
}

body.diagnostic-final .pp-scenarios{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px !important;
  margin-top: 0 !important;
}

body.diagnostic-final .pp-scenarios .btn{
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

body.diagnostic-final #pp-dashboard-wrap{
  display: none !important;
}

body.diagnostic-final #pp-diagnostic .pp-diag-body{
  gap: 18px;
}

body.diagnostic-final #pp-diagnostic .pp-diag-bullets{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-left: 0;
  margin: 0;
}

body.diagnostic-final #pp-diagnostic .pp-diag-bullets li{
  list-style: none;
  min-height: 126px;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.90);
  font-size: 15px;
  line-height: 1.45;
}

body.diagnostic-final #pp-diagnostic .pp-diag-bullets li::before{
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #ed6b01;
  margin-bottom: 12px;
}

@media (max-width: 900px){
  body.diagnostic-final #pp-diagnostic .pp-diag-bullets{
    grid-template-columns: 1fr;
  }

body.diagnostic-final #pp-diagnostic .pp-diag-bullets li{
  min-height: 0;
}
}

/* ===== Resultado final ejecutivo: 4 tarjetas + modales ===== */
body.diagnostic-final {
  background: #f4f7fb !important;
  color: #082653 !important;
}

body.diagnostic-final .wrap,
body.diagnostic-final .hero,
body.diagnostic-final .right-panel,
body.diagnostic-final #pp-diagnostic,
body.diagnostic-final #pp-diagnostic .pp-diag-body {
  background: #f4f7fb !important;
  color: #082653 !important;
  border-color: rgba(8, 38, 83, .12) !important;
  box-shadow: none !important;
}

body.diagnostic-final .right-panel {
  min-width: 0;
  width: 100%;
}

body.diagnostic-final .hero {
  grid-template-columns: 1fr !important;
}

body.diagnostic-final .control-panel {
  display: none !important;
}

body.diagnostic-final #pp-diagnostic .pp-diag-body {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

#pp-diagnostic.pp-result-mode .pp-diag-header {
  display: none;
}

#pp-diagnostic.pp-result-mode .pp-diag-bullets {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#pp-final-kpis.pp-final-kpis-legacy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.pp-result-cards-root {
  width: 100%;
}

.pp-result-shell {
  display: grid;
  gap: 18px;
}

.pp-result-title {
  display: grid;
  gap: 6px;
  margin-bottom: 4px;
}

.pp-result-title p {
  margin: 0;
  color: #ff6b00;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pp-result-title h2 {
  margin: 0;
  color: #082653;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: 0;
}

.pp-result-title span {
  color: #445a76;
  font-size: 16px;
  line-height: 1.45;
}

.pp-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pp-result-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(8, 38, 83, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(8, 38, 83, .10);
}

.pp-result-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-result-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(8, 38, 83, .28);
  border-radius: 999px;
  color: #082653;
  font-weight: 900;
}

.pp-result-card h3 {
  margin: 0;
  color: #082653;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.pp-result-card-body {
  flex: 1;
}

.pp-result-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.pp-result-two > div {
  min-width: 0;
}

.pp-result-two > div + div {
  border-left: 1px solid rgba(8, 38, 83, .14);
  padding-left: 18px;
}

.pp-result-two small,
.pp-result-main-value small,
.pp-result-empty span {
  display: block;
  color: #5d6d84;
  font-size: 13px;
  line-height: 1.35;
}

.pp-result-two strong,
.pp-result-main-value strong {
  display: block;
  margin-top: 6px;
  color: #082653;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

.pp-result-main-value {
  text-align: center;
  padding: 8px 0 0;
}

.pp-result-note {
  margin: 0;
  color: #445a76;
  font-size: 14px;
  line-height: 1.4;
}

.pp-result-delta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255, 107, 0, .10);
  color: #ff6b00;
}

.pp-result-delta.bad {
  background: rgba(185, 28, 28, .10);
  color: #b91c1c;
}

.pp-result-detail-btn {
  width: min(340px, 100%);
  min-height: 42px;
  align-self: center;
  margin-top: auto;
  border: 1px solid #ff6b00;
  border-radius: 6px;
  background: #fff;
  color: #ff6b00;
  font-weight: 800;
  cursor: pointer;
}

.pp-result-detail-btn:hover {
  background: #fff5ed;
}

.pp-result-areas {
  display: grid;
  gap: 14px;
}

.pp-result-area-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #082653;
  font-weight: 800;
}

.pp-result-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce5f0;
}

.pp-result-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #082653;
}

.pp-result-area.is-danger .pp-result-area-label strong {
  color: #b91c1c;
}

.pp-result-area.is-danger .pp-result-bar i {
  background: #b91c1c;
}

.pp-result-empty {
  display: grid;
  gap: 6px;
  min-height: 96px;
  align-content: center;
}

.pp-result-empty strong {
  color: #082653;
  font-size: 24px;
}

.pp-result-diagnosis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 2px;
  padding: 24px;
  border: 1px solid rgba(8, 38, 83, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(8, 38, 83, .08);
}

.pp-result-diagnosis-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pp-result-diagnosis-head p {
  margin: 0 0 6px;
  color: #ff6b00;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pp-result-diagnosis h3 {
  margin: 0;
  color: #082653;
  font-size: 26px;
  line-height: 1.22;
  font-weight: 900;
}

.pp-result-diagnosis-head span {
  display: block;
  margin-top: 8px;
  color: #445a76;
  font-size: 15px;
  line-height: 1.45;
}

.pp-result-diagnosis-content {
  display: grid;
  gap: 18px;
}

.pp-result-diagnosis-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pp-result-diagnosis-bullet {
  margin: 0;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(8, 38, 83, .12);
  border-radius: 8px;
  background: #f8fafc;
}

.pp-result-diagnosis-bullet strong {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #fff4eb;
  color: #ff6b00;
  font-size: 13px;
}

.pp-result-diagnosis-bullet p {
  margin: 0;
  color: #263e5c;
  font-size: 14px;
  line-height: 1.5;
}

.pp-result-cta {
  width: min(360px, 100%);
  min-height: 46px;
  justify-self: start;
  border: 1px solid #ff6b00;
  border-radius: 6px;
  background: #ff6b00;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(255, 107, 0, .20);
}

.pp-result-cta:hover {
  background: #e85f00;
}

#pp-result-modal-layer .pp-result-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 38, 83, .38);
}

#pp-result-modal-layer .pp-result-modal.is-open {
  display: flex !important;
}

.pp-result-modal-card {
  width: min(980px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(8, 38, 83, .28);
}

.pp-result-modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(8, 38, 83, .14);
  background: #fff;
}

.pp-result-modal-head p {
  margin: 0 0 4px;
  color: #ff6b00;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pp-result-modal-head h3 {
  margin: 0;
  color: #082653;
  font-size: 24px;
}

.pp-result-modal-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(8, 38, 83, .18);
  border-radius: 999px;
  background: #fff;
  color: #082653;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.pp-result-detail-head,
.pp-result-detail-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .85fr) minmax(170px, .9fr) minmax(110px, .65fr);
  gap: 12px;
  align-items: center;
}

.pp-result-detail-head {
  padding: 14px 24px;
  background: #f4f7fb;
  color: #5d6d84;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pp-result-modal-body {
  padding: 8px 24px 24px;
}

.pp-result-detail-section {
  padding: 12px 0 4px;
}

.pp-result-detail-section + .pp-result-detail-section {
  margin-top: 8px;
}

.pp-result-detail-section h4,
.pp-result-compact-section h4 {
  margin: 0 0 8px;
  color: #082653;
  font-size: 15px;
  font-weight: 900;
}

.pp-result-detail-section .pp-result-detail-row:last-child {
  border-bottom-color: rgba(8, 38, 83, .16);
}

.pp-result-compact-section {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(8, 38, 83, .12);
  border-radius: 8px;
  background: #f8fafc;
}

.pp-result-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pp-result-compact-metric {
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(8, 38, 83, .10);
  border-radius: 8px;
  background: #fff;
}

.pp-result-compact-metric span {
  display: block;
  margin-bottom: 10px;
  color: #445a76;
  font-size: 13px;
  line-height: 1.35;
}

.pp-result-compact-metric strong {
  display: block;
  color: #082653;
  font-size: 22px;
}

.pp-result-compact-metric em {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.pp-result-pe-chart {
  margin: 16px 0 18px;
  border: 1px solid rgba(8, 38, 83, .12);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.pp-result-pe-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(8, 38, 83, .10);
}

.pp-result-pe-chart-head strong {
  display: block;
  color: #082653;
  font-size: 17px;
  font-weight: 900;
}

.pp-result-pe-chart-head span {
  display: block;
  margin-top: 4px;
  color: #445a76;
  font-size: 13px;
  line-height: 1.4;
}

.pp-result-pe-legend {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  flex: 0 0 auto;
  color: #445a76;
  font-size: 13px;
  font-weight: 800;
}

.pp-result-pe-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.pp-result-pe-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
}

.pp-result-pe-legend i.actual {
  background: #082653;
}

.pp-result-pe-legend i.scenario {
  background: #ff6b00;
}

.pp-result-pe-chart-canvas {
  height: 300px;
  padding: 14px 16px 16px;
}

.pp-result-detail-row {
  padding: 14px 0;
  border-bottom: 1px solid rgba(8, 38, 83, .10);
}

.pp-result-detail-row span {
  color: #445a76;
}

.pp-result-detail-row strong {
  color: #082653;
  font-size: 15px;
}

.pp-result-detail-row em {
  font-style: normal;
}

.pp-result-area-detail {
  padding: 14px 0;
  border-bottom: 1px solid rgba(8, 38, 83, .10);
}

.pp-result-area-detail h4 {
  margin: 0 0 6px;
  color: #082653;
  font-size: 18px;
}

.pp-result-modal-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f4f7fb;
  color: #445a76;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .pp-result-grid,
  .pp-result-two,
  .pp-result-diagnosis {
    grid-template-columns: 1fr;
  }

  .pp-result-two > div + div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(8, 38, 83, .14);
    padding-top: 14px;
  }

  .pp-result-detail-head {
    display: none;
  }

  .pp-result-detail-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .pp-result-compact-grid {
    grid-template-columns: 1fr;
  }

  .pp-result-pe-chart-head {
    display: grid;
  }

  .pp-result-pe-chart-canvas {
    height: 260px;
  }
}

/* Resultado final: bloque de lectura principal */
body.diagnostic-final #pp-diagnostic .pp-diag-header {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto 20px;
}

body.diagnostic-final #pp-diagnostic .pp-diag-header > div:first-child {
  width: 100%;
  max-width: 1040px;
}

body.diagnostic-final #pp-diag-badge {
  justify-content: center;
  margin-bottom: 10px;
}

body.diagnostic-final #pp-diag-title {
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(34px, 4.1vw, 54px);
  line-height: 1.06;
}

body.diagnostic-final #pp-diag-subtitle {
  max-width: 980px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.45;
  color: #244366;
}

body.diagnostic-final #pp-diagnostic .pp-diag-bullets li {
  font-size: 16px;
  line-height: 1.45;
}

body.diagnostic-final #pp-diagnostic .pp-diag-bullets .pp-diag-data {
  font: inherit;
  font-weight: 900;
  color: #082653;
}

@media (max-width: 900px) {
  body.diagnostic-final #pp-diag-title {
    font-size: 28px;
  }

  body.diagnostic-final #pp-diag-subtitle,
  body.diagnostic-final #pp-diagnostic .pp-diag-bullets li {
    font-size: 15px;
  }
}