@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Calculadora de ingresos — Recetags Media
   Rediseño 2.0 · limpio, aireado, Work Sans dominante.
   Bebas reservado al número héroe. Color como acento.
   ============================================================ */

:root{
  --verde:#25482f;
  --verde-claro:#e8efe9;
  --rojo:#a30200;
  --rojo-claro:#fbeceb;
  --beige:#fbf9f1;
  --naranja:#f4962a;
  --naranja-claro:#fdf1e2;
  --negro:#25482f;
  --blanco:#ffffff;
  --tinta:#2e2c28;
  --tinta-suave:#7a756c;
  --tinta-tenue:#a8a296;
  --linea:#ece8dd;
  --linea-fuerte:#ddd7c8;
  --anil:#252F47;

  --r:0;
  --r-sm:0;
  --sombra:none;
  --sombra-fuerte:none;
  --fuente:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--beige);color:var(--tinta);
  font-family:var(--fuente);-webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.5;
}

/* ==================== LAYOUT ==================== */
.app-shell{max-width:1200px;margin:0 auto;padding:0 44px;min-height:100vh;}
@media (max-width:860px){ .app-shell{padding:0 18px;} }

/* ---- Sidebar ---- */
.sidebar{
  width:290px;flex:0 0 290px;background:var(--verde);
  display:flex;flex-direction:column;
  padding:22px 16px;position:sticky;top:0;height:100vh;
  transition:width .22s ease, flex-basis .22s ease;overflow:hidden;
}
.sidebar.collapsed{width:72px;flex-basis:72px;padding-left:10px;padding-right:10px;}

.side-toggle{
  align-self:flex-end;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(251,249,241,.08);border:none;color:var(--beige);
  cursor:pointer;font-size:14px;transition:background .15s;
}
.side-toggle:hover{background:rgba(251,249,241,.18);}
.sidebar.collapsed .side-toggle{align-self:center;}
.sidebar.collapsed .side-scroll{display:none;}

.side-scroll{flex:0 1 auto;overflow-y:auto;padding:10px 2px 0;margin-top:8px;min-height:0;}
.side-scroll::-webkit-scrollbar{width:6px;}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(251,249,241,.15);}

.side-nueva{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fuente);font-weight:700;font-size:13.5px;
  background:var(--naranja);color:#fff;border:none;border-radius:var(--r-sm);
  padding:13px;cursor:pointer;margin-bottom:22px;transition:transform .12s, background .15s;
}
.side-nueva:hover{background:#e0851c;}

.grupo-titulo{
  font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(251,249,241,.55);margin:20px 4px 10px;
}

.item{
  background:rgba(251,249,241,.04);border:none;border-radius:var(--r-sm);
  padding:13px 14px;margin-bottom:8px;cursor:pointer;
  transition:background .15s, transform .12s;
}
.item:hover{background:rgba(251,249,241,.12);}
.item.activo{background:var(--beige);}
.item.exito{box-shadow:inset 3px 0 0 var(--naranja);}
.item .fila{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.item .nom{
  font-weight:600;font-size:14px;color:var(--beige);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item .meta{
  font-size:12px;color:rgba(251,249,241,.55);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item .real{font-size:12px;color:var(--naranja);font-weight:600;margin-top:6px;}
.item.activo .nom{color:var(--verde);}
.item.activo .meta{color:var(--tinta-suave);}
.item.activo .real{color:#c47a10;}

.estrella-btn{
  background:none;border:none;cursor:pointer;font-size:16px;line-height:1;
  color:rgba(251,249,241,.3);padding:2px;flex:0 0 auto;transition:color .15s, transform .12s;
}
.estrella-btn:hover{color:var(--naranja);transform:scale(1.15);}
.estrella-btn.on{color:var(--naranja);}
.item.activo .estrella-btn{color:var(--linea-fuerte);}
.item.activo .estrella-btn.on{color:var(--naranja);}

.vacio{font-size:12.5px;color:rgba(251,249,241,.5);line-height:1.55;padding:6px 4px;}

/* Logo Recetags al pie del sidebar */
.side-logo{
  margin-top:auto;padding:24px 8px 4px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.side-logo .logo-full{width:82%;max-width:170px;height:auto;display:block;}
.side-logo .logo-mini{display:none;width:34px;height:auto;}
.sidebar.collapsed .side-logo{padding:22px 0 6px;}
.sidebar.collapsed .side-logo .logo-full{display:none;}
.sidebar.collapsed .side-logo .logo-mini{display:block;}


/* ==================== TOPBAR + CAJITAS DE NAVEGACIÓN ==================== */
.topbar{
  width:100%;background:var(--beige);
}
.topbar-inner{
  width:100%;padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
@media (max-width:860px){ .topbar-inner{padding:14px 18px;} }
  .topbar-left{display:flex;align-items:center;gap:18px;}
.brand-mini img{height:34px;width:auto;display:block;}
/* el logo de la topbar va en verde (archivo -verde.svg) sobre fondo claro */

.nav-cajas{display:flex;gap:12px;flex-wrap:wrap;}
.navbox{
  font-family:var(--fuente);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  padding:9px 16px;border:1px solid;cursor:pointer;background:transparent;
  display:inline-flex;align-items:center;gap:7px;transition:background .15s, color .15s;
}
/* Nueva: amarillo relleno, texto beige */
.navbox-nueva{border-color:var(--naranja);background:var(--naranja);color:var(--beige);}
.navbox-nueva:hover{background:#e0851c;border-color:#e0851c;}
/* Guardadas y Casos: borde verde, transparente, texto verde */
.navbox-guardadas,.navbox-exitos{border-color:var(--verde);background:transparent;color:var(--verde);}
.navbox-guardadas:hover,.navbox-exitos:hover{background:var(--verde-claro);}
.navbox .nb-star{color:var(--verde);font-size:12px;}
/* Estado activo */

.navbox-guardadas.activa,.navbox-exitos.activa{background:var(--verde);color:var(--beige);}
.navbox-guardadas.activa .nb-star,.navbox-exitos.activa .nb-star{color:var(--beige);}

/* ==================== VISTAS ==================== */
.vista{display:none;}
.vista.activa{display:block;}
.wrap.vista{max-width:none;padding:8px 0 80px;margin:0;}

/* Botón volver (arriba del formulario en modo detalle) */
.btn-volver{
  font-family:var(--fuente);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--verde);background:transparent;border:1px solid var(--verde);cursor:pointer;
  padding:8px 14px;transition:background .15s,color .15s;
}
.btn-volver:hover{background:var(--verde);color:var(--beige);}

/* ==================== GALERÍA ==================== */
.gal-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:14px 0 26px;flex-wrap:wrap;
}
.gal-title{
  font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:46px;letter-spacing:.01em;
  color:var(--verde);margin:0;-webkit-text-stroke:.7px currentColor;
  display:flex;align-items:center;gap:12px;
}
.gal-title .nb-star{color:var(--verde);-webkit-text-stroke:0;font-size:30px;}
.gal-buscar{
  font-family:var(--fuente);font-size:15px;padding:12px 16px;border:1.5px solid var(--linea);
  background:var(--blanco);color:var(--tinta);outline:none;min-width:260px;
}
.gal-buscar:focus{border-color:var(--verde);}

.galeria{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
.card-sim{
  background:var(--blanco);border:1px solid var(--linea);padding:20px;cursor:pointer;
  transition:border-color .15s, transform .12s;
}
.card-sim:hover{border-color:var(--verde);transform:translateY(-2px);}
.card-sim.exito{box-shadow:inset 4px 0 0 var(--naranja);}
.card-sim-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.card-sim-nom{font-weight:700;font-size:16px;color:var(--verde);line-height:1.25;}
.card-sim-dir{font-size:13px;color:var(--tinta-suave);margin-top:4px;}
.card-sim-real{font-size:13px;color:var(--naranja);font-weight:700;margin-top:10px;}
.card-sim-fecha{font-size:11.5px;color:var(--tinta-tenue);margin-top:10px;}
.card-sim .estrella-btn{
  background:none;border:none;cursor:pointer;font-size:18px;line-height:1;
  color:var(--linea-fuerte);padding:2px;flex:0 0 auto;transition:color .15s, transform .12s;
}
.card-sim .estrella-btn:hover{color:var(--naranja);transform:scale(1.15);}
.card-sim .estrella-btn.on{color:var(--naranja);}
.gal-vacio{
  grid-column:1 / -1;padding:44px;text-align:center;color:var(--tinta-tenue);
  font-size:14.5px;background:var(--blanco);border:1px dashed var(--linea-fuerte);
}

/* ==================== MAIN ==================== */
.wrap{padding:36px 0 80px;min-width:0;}

.title-wrap{margin-top:72px;margin-bottom:44px;}
.title-wrap h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:52px;letter-spacing:.01em;
  color:var(--rojo);margin:0 0 6px;line-height:1;text-align:center;
  -webkit-text-stroke:1px currentColor;
}
.title-wrap .eyebrow{
  margin:0;font-weight:600;color:var(--tinta-tenue);font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;text-align:center;
}

/* Título de sección: ya no es una banda maciza, es un rótulo ligero */
.band{
  font-weight:800;font-size:24px;letter-spacing:-.01em;text-transform:none;
  color:var(--verde);margin:46px 0 20px;padding:0 0 14px;
  border-bottom:2px solid var(--verde);
  display:flex;align-items:center;gap:12px;
}
/* Sin tick: título limpio */
/* Pastillas de "sobre qué cifra proyectamos": botones independientes */
#pastillasBase{background:transparent;border:none;padding:0;gap:12px;}
#pastillasBase .pastilla{
  border-radius:999px;font-weight:700;color:var(--verde);
  border:1px solid var(--verde);background:var(--blanco);padding:10px 24px;
}
#pastillasBase .pastilla:hover{background:var(--verde-claro);}
#pastillasBase .pastilla.activa{background:var(--verde);color:var(--beige);border-color:var(--verde);}
/* Subapartado (Ocupación de la sala, dentro de La sala): alineado a la derecha, más pequeño */
.band.sub{
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  justify-content:flex-end;border-bottom:1.5px solid var(--linea);
  margin-top:28px;
}

/* Subapartado: sin adorno */

/* Tarjetas: sombra suave, sin borde gris */
.card{
  background:var(--blanco);border:1px solid var(--linea);
  padding:28px;
}

/* ==================== FORMULARIO ==================== */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo.ancho{grid-column:1 / -1;}
.campo label{
  font-size:12px;font-weight:700;color:var(--verde);letter-spacing:.01em;
}
.campo input,.campo textarea{
  font-family:var(--fuente);font-size:15px;color:var(--tinta);
  padding:11px 13px;border:1px solid var(--verde);border-radius:var(--r-sm);
  background:var(--blanco);width:100%;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.campo input::placeholder{color:var(--tinta-tenue);}
.campo input:focus,.campo textarea:focus{
  border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-claro);
}
.campo textarea{min-height:64px;resize:vertical;}
.campo .pista{font-size:12px;color:var(--tinta-tenue);line-height:1.45;}
.campo input[readonly]{
  background:var(--beige);border-color:transparent;color:var(--tinta-suave);
  font-weight:600;cursor:default;
}
.campo input[readonly]:focus{box-shadow:none;border-color:transparent;}

/* Campos calculados que se ven como normales: blanco + borde verde */
.campo.dado input,
#margen_contribucion,
#facturacion_calculada{
  background:var(--blanco);border:1px solid var(--verde);
  color:var(--verde);font-weight:700;
}
.campo.dado input::placeholder{color:var(--tinta-tenue);}
.campo.dado input:focus{
  border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-claro);
}
/* El campo que manda (según la pastilla activa): borde naranja de 2px */
.campo.base-activa input,
.campo.base-activa #facturacion_calculada{
  border:2px solid var(--naranja);
}

.bloque-intro{
  font-size:14px;color:var(--tinta-suave);line-height:1.6;margin:0 0 22px;
  max-width:none;white-space:normal;
}
.bloque-intro strong{color:var(--verde);font-weight:700;}


/* Campos con valor predefinido: gris suave con borde verde */
.campo input.predef{
  background:#eceae4;border:1px solid var(--verde);color:var(--verde);font-weight:700;
}
.campo input.predef::placeholder{color:var(--tinta-tenue);}
.campo input.predef:focus{border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-claro);}
.campo input.predef:disabled{opacity:.7;}

/* ==================== PASTILLAS ==================== */
.pastillas{display:inline-flex;gap:0;background:var(--beige);padding:4px;}
#pastillasBase{border-radius:999px;}
.pastilla{
  font-family:var(--fuente);font-weight:600;font-size:13.5px;
  border:none;background:transparent;color:var(--tinta-suave);
  padding:9px 22px;cursor:pointer;
  transition:background .18s, color .18s;
}
.pastilla:hover{color:var(--verde);}
.pastilla.activa{background:var(--verde);color:#fff;}
#pastillasIva{background:transparent;border:none;padding:0;gap:12px;}
#pastillasIva .pastilla{
  border-radius:999px;font-weight:700;color:var(--verde);
  border:1px solid var(--verde);background:var(--blanco);padding:10px 24px;
}
#pastillasIva .pastilla:hover{background:var(--verde-claro);}
#pastillasIva .pastilla.activa{background:var(--verde);color:var(--beige);border-color:var(--verde);}

/* ==================== BOTONES ==================== */
.btn{
  font-family:var(--fuente);font-weight:700;font-size:14px;
  padding:12px 24px;border:none;border-radius:var(--r-sm);cursor:pointer;
  background:var(--verde);color:#fff;transition:transform .12s, background .15s, box-shadow .15s;
}
.btn:hover{background:#1d3a26;}
.btn.sec{background:var(--blanco);color:var(--verde);box-shadow:inset 0 0 0 1.5px var(--linea-fuerte);}
.btn.sec:hover{box-shadow:inset 0 0 0 1.5px var(--verde);background:var(--verde-claro);}
.btn.peli{background:var(--rojo);color:var(--beige);border:1.5px solid var(--rojo);}
.btn.peli:hover{background:#8a0200;border-color:#8a0200;color:var(--beige);}
.acciones{display:flex;gap:12px;margin-top:30px;justify-content:flex-end;flex-wrap:wrap;}

/* Errores de validación al guardar (abajo, junto a los botones) */
.errores-guardado{
  background:var(--rojo-claro);color:var(--rojo);padding:16px 20px;
  margin-top:26px;border-left:4px solid var(--rojo);font-size:14px;
}
.errores-guardado strong{display:block;margin-bottom:6px;font-weight:700;}
.errores-guardado ul{margin:0;padding-left:20px;}
.errores-guardado li{margin:3px 0;}


/* Avisos (aforo, incoherencia): apariencia de título de sección, en granate */
.aviso-seccion{
  font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--rojo);
  margin:16px 0;padding:0 0 14px;border-bottom:2px solid var(--rojo);
  line-height:1.4;
}
.aviso-seccion + .aviso-seccion{margin-top:0;}
#banners{margin:40px 0;}
#banners:empty{margin:0;}

/* ==================== BANNERS (legacy, ya no usados en form) ==================== */
.banner{
  padding:14px 18px;font-size:14px;line-height:1.55;margin-bottom:14px;border-radius:var(--r-sm);
  background:var(--verde-claro);color:var(--verde);
}
.banner.aforo{background:var(--rojo-claro);color:var(--rojo);}
.banner strong{font-weight:700;}

/* ==================== BLOQUE 2 · LA SALA ==================== */
.sala-cols{display:flex;align-items:stretch;gap:0;margin-top:6px;flex-wrap:wrap;}
.sala-col{
  flex:0 0 45%;max-width:45%;background:var(--verde);padding:24px;
}
.sala-col .campo{margin-bottom:16px;}
.sala-col .campo:last-child{margin-bottom:0;}
.sala-col .campo input{background:var(--blanco);border-color:var(--blanco);}
.sala-col .campo label{color:var(--beige);}
.sala-col .campo .pista{color:rgba(251,249,241,.85);}
.sala-col-tit{
  font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1.5px solid rgba(251,249,241,.4);
  color:var(--beige);
}
.sala-tit-actual{color:var(--beige);}
.sala-tit-max{color:var(--beige);}
.sala-flecha{
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--verde);font-weight:700;flex:0 0 10%;max-width:10%;
}
@media (max-width:760px){
  .sala-flecha{transform:rotate(90deg);flex-basis:100%;max-width:100%;}
  .sala-col{flex-basis:100%;max-width:100%;}
}


/* Fila superior de La sala: mismo ancho que las columnas de abajo */
.sala-cols-top{margin-bottom:20px;}
.sala-col-plain{flex:0 0 45%;max-width:45%;}
@media (max-width:760px){ .sala-col-plain{flex-basis:100%;max-width:100%;} }

/* ==================== OCUPACIÓN: matriz + slider + dinero ==================== */
.slider-obj{
  display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap;
  padding:6px 0 20px;border-bottom:1px solid var(--linea);
}
.slider-obj label{
  font-size:12px;font-weight:700;color:var(--verde);
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}
.slider-obj input[type=range]{
  flex:1;min-width:200px;accent-color:var(--verde);height:6px;cursor:pointer;
}
.slider-obj .slider-val{
  font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:38px;color:var(--verde);
  min-width:70px;text-align:right;letter-spacing:.01em;-webkit-text-stroke:.8px currentColor;
}

/* Matriz: limpia, sin bordes por celda, solo líneas horizontales suaves */
.tabla-wrap{overflow-x:auto;}
table.detalle{width:100%;border-collapse:collapse;font-size:14px;}
table.detalle thead th{
  text-align:right;padding:0 14px 12px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--verde);white-space:nowrap;
  border-bottom:1.5px solid var(--verde);
}
table.detalle thead th:first-child{text-align:left;}
table.detalle thead th.th-obj{color:var(--verde);}
table.detalle tbody td{
  padding:13px 14px;text-align:right;border-bottom:1px solid var(--linea);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--verde);
}
table.detalle tbody td:first-child{text-align:left;font-weight:700;color:var(--verde);}
table.detalle tbody tr:last-child td{border-bottom:none;}
table.detalle tbody tr:hover:not(.mes0) td{background:var(--beige);}
table.detalle tbody tr.mes0 td{color:var(--tinta-suave);font-style:italic;}

/* ---- JERARQUÍA DE LA TABLA ----
   Solo las columnas que deciden (beneficio y acumulado) llevan semáforo y peso.
   El resto acompaña en tono neutro para no generar ruido visual. */

/* Columnas de contexto: coste y ocupación, en tono suave y sin negrita */
table.detalle tbody td.col-coste,
table.detalle tbody td.col-suave{color:var(--tinta-suave);font-weight:400;}

/* Semáforo: SOLO beneficio neto y acumulado. Deben ir después de las reglas
   generales de tbody td, si no el color corporativo las pisa. */
table.detalle tbody td.pos{color:#1f7a3d;font-weight:800;}
table.detalle tbody td.neg{color:#c0281c;font-weight:800;}
table.detalle tbody tr.mes0 td.pos{color:#1f7a3d;}
table.detalle tbody tr.mes0 td.neg{color:#c0281c;}

/* Matriz de ocupación específica */
table.detalle.ocup td.ocup-lbl-td{font-weight:600;color:var(--tinta);}
table.detalle.ocup td.ocup-obj-td{font-weight:800;color:var(--verde);}
table.detalle.ocup td.ocup-mejora{font-weight:800;}
table.detalle tbody td.ocup-mejora.pos{color:#1f7a3d;}
table.detalle tbody td.ocup-mejora.neg{color:#c0281c;}
table.detalle.ocup tr.fila-sep td{border-top:2px solid var(--linea-fuerte);padding-top:15px;}

/* Tira de dinero: tarjetas limpias con acento, no bloques macizos */
.ocup-dinero{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.dinero-card{
  background:var(--verde);border-radius:var(--r);padding:22px 24px;
  display:flex;flex-direction:column;gap:6px;color:#fff;
}
.dinero-card.extra{background:var(--naranja);}
.dinero-card .dinero-num{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:56px;letter-spacing:.01em;line-height:1;-webkit-text-stroke:0.9px currentColor;}
.dinero-card .dinero-lbl{font-size:13px;font-weight:700;opacity:.95;}
.dinero-card .dinero-sub{font-size:12.5px;opacity:.8;margin-top:2px;}

.leyenda-ocup{
  font-size:12.5px;color:var(--tinta-tenue);line-height:1.55;margin:18px 0 0;max-width:none;
}
.leyenda-ocup strong{color:var(--tinta-suave);font-weight:700;}

/* ==================== RAMPA ==================== */
.rampa-fila{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.rampa-check{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--tinta-suave);cursor:pointer;
}
.rampa-check input{width:auto;accent-color:var(--verde);cursor:pointer;}
.rampa-num{max-width:130px;}
.rampa-num:disabled{background:var(--beige);color:var(--tinta-tenue);border-color:transparent;}
.rampa-info{
  font-size:12.5px;color:var(--beige);line-height:1.55;margin-top:10px;
  padding:14px 18px;background:var(--verde);
}
.rampa-info strong{color:var(--beige);font-weight:700;}

/* ==================== BARRA VISTA IVA ==================== */
.barra-vista{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:0 0 18px;flex-wrap:wrap;}
.barra-vista-et{
  font-size:12px;font-weight:600;color:var(--tinta-suave);
  text-transform:uppercase;letter-spacing:.04em;
}

/* ==================== RESULTADO · HISTORIA EN 3 ACTOS ==================== */
.kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:stretch;}
.acto{
  padding:28px 26px;display:flex;flex-direction:column;gap:7px;
  background:var(--blanco);border:1px solid var(--linea);position:relative;
}
.acto-tag{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta-tenue);
}
.acto-num{
  font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:62px;line-height:.95;
  letter-spacing:.01em;color:var(--verde);margin-top:4px;
  -webkit-text-stroke:0.8px currentColor;
}
.acto-num.grande{font-size:82px;-webkit-text-stroke:1.2px currentColor;}
.acto-num .acto-mes{font-family:var(--fuente);font-size:15px;font-weight:600;color:var(--tinta-tenue);margin-left:5px;letter-spacing:0;}
.acto-lbl{font-size:14px;font-weight:700;color:var(--verde);}
.acto-extra{font-size:12.5px;color:var(--tinta-suave);line-height:1.5;margin-top:5px;}

/* Acto 1 — Invierte: neutro, sobrio */
.acto-invierte .acto-num{color:var(--verde);}

/* Acto 2 — Gana: el héroe, fondo verde */
.acto-gana{background:var(--verde);border-color:var(--verde);}
.acto-gana .acto-tag{color:rgba(251,249,241,.6);}
.acto-gana .acto-num{color:#fff;}
.acto-gana .acto-lbl{color:var(--beige);}
.acto-gana .acto-extra{color:rgba(251,249,241,.82);}
.acto-gana.neg{background:var(--rojo);}

/* Acto 3 — Recupera: fondo naranja, letras beige (como las cajas de dinero) */
.acto-recupera{background:var(--naranja);border-color:var(--naranja);}
.acto-recupera .acto-tag{color:rgba(251,249,241,.75);}
.acto-recupera .acto-num{color:var(--beige);}
.acto-recupera .acto-lbl{color:var(--beige);}
.acto-recupera .acto-extra{color:rgba(251,249,241,.9);}
.acto-recupera.neg{background:var(--rojo);border-color:var(--rojo);}

.acto-espera{
  grid-column:1 / -1;background:var(--blanco);border:1px solid var(--linea);
  text-align:center;padding:44px;
}
.acto-espera-txt{margin:0;color:var(--tinta-tenue);font-size:14.5px;}

@media (max-width:900px){
  .kpis{grid-template-columns:1fr;}
  .acto-num.grande{font-size:56px;}
  .ocup-dinero{grid-template-columns:1fr;}
}

/* ==================== GRÁFICO ==================== */
.chartbox{position:relative;height:340px;}

/* ==================== PLEGABLE RESULTADO REAL ==================== */
/* Título Resultado real: como sección, granate, izquierda, sentence case */
.plegable-cab{display:flex;align-items:center;cursor:pointer;user-select:none;margin:56px 0 16px;gap:12px;}
.band-real{
  flex:1;font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--rojo);
  margin:0;padding:0 0 14px;border-bottom:2px solid var(--rojo);text-align:left;
}
.plegable-cab .flecha{
  color:var(--rojo);font-size:22px;line-height:1;padding:0 4px;
  transition:transform .2s ease;
}

.plegable-cab{display:flex;align-items:center;cursor:pointer;user-select:none;margin:38px 0 16px;gap:12px;}
.plegable-cab .band{flex:1;margin:0;}
.nota-real{
  margin-top:16px;padding:14px 18px;background:var(--naranja-claro);border-radius:var(--r-sm);
  font-size:13px;line-height:1.6;color:var(--tinta-suave);
}
.nota-real strong{color:var(--naranja);font-weight:700;}

.oculto{display:none !important;}

/* ==================== RESPONSIVE ==================== */
@media (max-width:860px){
  .app-body{flex-direction:column;}
  .sidebar{width:100%;flex:none;height:auto;position:static;max-height:340px;padding:16px;}
  .sidebar.collapsed{width:100%;flex-basis:auto;}
  .side-toggle{display:none;}
  .sidebar.collapsed .side-scroll{display:block;}
  .side-logo{display:none;}
  .wrap{padding:28px 20px 60px;}
  .title-wrap h1{font-size:24px;}
}

@media print{
  .sidebar,.acciones,.no-print{display:none !important;}
  .card,.acto{box-shadow:none;border:1px solid var(--linea);}
}

/* ==================== MÓVIL: MENÚ HAMBURGUESA + DRAWER ==================== */
.hamburguesa{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:transparent;border:1px solid var(--verde);
  cursor:pointer;flex:0 0 auto;
}
.hamburguesa span{
  display:block;height:2px;width:100%;background:var(--verde);
  transition:transform .22s ease, opacity .18s ease;
}
body.drawer-abierto .hamburguesa span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.drawer-abierto .hamburguesa span:nth-child(2){opacity:0;}
body.drawer-abierto .hamburguesa span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.drawer-fondo{
  display:none;position:fixed;inset:0;background:rgba(28,27,25,.45);z-index:90;
}
body.drawer-abierto .drawer-fondo{display:block;}

/* El logo del drawer solo existe en móvil */
.drawer-logo{display:none;}

@media (max-width:860px){
  .hamburguesa{display:flex;}

  /* La nav se convierte en panel lateral deslizante */
  .nav-cajas{
    position:fixed;top:0;right:0;bottom:0;width:min(78vw,300px);
    background:var(--beige);z-index:100;
    display:flex;flex-direction:column;align-items:stretch;gap:12px;
    padding:80px 20px 24px;
    transform:translateX(100%);transition:transform .25s ease;
    box-shadow:-8px 0 28px rgba(28,27,25,.14);
  }
  body.drawer-abierto .nav-cajas{transform:translateX(0);}

  .nav-cajas .navbox{
    width:100%;justify-content:flex-start;font-size:13px;padding:14px 16px;
  }

  /* Logo Recetags en verde, anclado abajo del drawer */
  .drawer-logo{
    display:block;margin-top:auto;padding-top:24px;
    border-top:1px solid var(--linea-fuerte);
  }
  .drawer-logo img{width:70%;max-width:150px;height:auto;display:block;}

  /* La hamburguesa queda por encima del panel para poder cerrarlo */
  .hamburguesa{position:relative;z-index:110;}
}

/* ==================== MÓVIL: AJUSTES GENERALES ==================== */
@media (max-width:860px){
  .topbar-inner{padding:14px 18px;flex-wrap:nowrap;}
  .brand-mini img{height:26px;}
  .btn-volver{padding:7px 10px;font-size:11px;}

  .title-wrap{margin-top:40px;margin-bottom:28px;}
  .title-wrap h1{font-size:34px;}

  .band{font-size:19px;margin:34px 0 16px;}
  .band-real{font-size:19px;}
  .card{padding:18px;}

  /* Formularios a una columna */
  .rejilla{grid-template-columns:1fr;gap:16px;}

  /* Pastillas apiladas y a ancho completo */
  .pastillas{display:flex;flex-direction:column;width:100%;gap:10px;}
  #pastillasBase .pastilla,#pastillasIva .pastilla{width:100%;text-align:center;}
  .barra-vista{justify-content:flex-start;}

  /* Slider: etiqueta arriba, control abajo */
  .slider-obj{gap:10px;padding:4px 0 16px;}
  .slider-obj label{width:100%;}
  .slider-obj .slider-val{font-size:32px;}

  /* Tablas: scroll horizontal con pista visual */
  .tabla-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,var(--blanco) 30%,rgba(255,255,255,0)),
               linear-gradient(to right,rgba(255,255,255,0),var(--blanco) 70%) 100% 0,
               linear-gradient(to right,rgba(28,27,25,.10),rgba(255,255,255,0)),
               linear-gradient(to right,rgba(255,255,255,0),rgba(28,27,25,.10)) 100% 0;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  table.detalle{font-size:13px;}
  table.detalle tbody td{padding:11px 10px;}
  table.detalle thead th{padding:0 10px 10px;font-size:10px;}

  /* Actos y tarjetas de dinero apilados */
  .kpis{grid-template-columns:1fr;gap:12px;}
  .acto{padding:22px 20px;}
  .acto-num{font-size:48px;}
  .acto-num.grande{font-size:58px;}
  .ocup-dinero{grid-template-columns:1fr;gap:12px;}
  .dinero-card .dinero-num{font-size:44px;}

  /* Galerías */
  .galeria{grid-template-columns:1fr;}
  .gal-head{flex-direction:column;align-items:stretch;gap:14px;}
  .gal-buscar{min-width:0;width:100%;}
  .gal-title{font-size:36px;}

  /* Botones de acción a ancho completo */
  .acciones{flex-direction:column-reverse;align-items:stretch;}
  .acciones .btn{width:100%;}

  /* Gráfico más bajo */
  .chartbox{height:260px;}
}

@media (max-width:480px){
  .title-wrap h1{font-size:28px;}
  .acto-num.grande{font-size:50px;}
  .band{font-size:17px;}
}