/* =====================================================================
   Plan de Negocio KüchenHouse — Tema financiero estratégico
   Estética: tinta grafito, marfil, acento teal y oro sobrio. Compacto.
   ===================================================================== */
:root{
  --tinta:#111820; --tinta-2:#1b2430; --grafito:#2c3846;
  --gris-700:#46525f; --gris-500:#68737f; --gris-400:#9099a3;
  --gris-300:#c4cbd2; --gris-200:#e2e6eb; --gris-100:#eef1f5;
  --marfil:#f3f5f8; --panel:#fbfcfe; --blanco:#ffffff;
  /* azul marino corporativo como acento principal (sustituye al verde/teal) */
  --teal:#1f3d63; --teal-600:#173049; --teal-bg:#e9eef5;
  --oro:#9a7b2e; --oro-bg:#f4eddc;
  --verde:#1f3d63; --verde-bg:#e9eef5;
  --rojo:#a5322b; --rojo-bg:#f8e8e6;
  --azul:#3f6493; --azul-bg:#e9eef5;
  --linea:#e2e6ec; --linea-fuerte:#cfd5dd;
  --radio:14px; --radio-sm:9px;
  --sombra:0 1px 2px rgba(18,22,27,.04), 0 12px 34px rgba(18,22,27,.06);
  --sombra-sm:0 1px 2px rgba(18,22,27,.06);
  --fuente:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--fuente);color:var(--tinta);
  background:var(--marfil);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--teal-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{letter-spacing:-.01em}

/* ---- Marca ---- */
.wordmark{font-weight:800;letter-spacing:-.02em;color:var(--tinta);font-size:1.24rem;line-height:1;display:inline-flex;align-items:baseline;gap:8px}
.wordmark .k{color:var(--teal)}
.wordmark small{display:block;font-weight:600;letter-spacing:.24em;font-size:.5rem;
  color:var(--gris-500);margin-top:6px;text-transform:uppercase}

/* ---- Topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  background:rgba(251,250,247,.86);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--linea);padding:12px 24px;position:sticky;top:0;z-index:20}
.topbar .user{display:flex;align-items:center;gap:13px;font-size:.88rem;color:var(--gris-700)}
.badge-rol{background:var(--tinta);color:#fff;padding:3px 11px;border-radius:999px;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.badge-rol.admin{background:var(--teal)}
.navtoggle{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--gris-700);
  padding:6px 9px;border-radius:8px;line-height:1}
.navtoggle:hover{background:var(--gris-100);color:var(--tinta)}

/* ---- Estructura ---- */
.layout{display:flex;min-height:calc(100vh - 56px)}
.nav{width:230px;background:var(--panel);border-right:1px solid var(--linea);
  padding:16px 12px;flex-shrink:0;transition:width .16s ease}
.nav .grupo{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-400);
  font-weight:700;margin:16px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:var(--gris-700);font-size:.9rem;font-weight:500;margin-bottom:2px;
  transition:background .12s,color .12s}
.nav a .ic{width:18px;text-align:center;font-size:1rem;opacity:.8}
.nav a:hover{background:var(--gris-100);color:var(--tinta);text-decoration:none}
.nav a.activo{background:var(--tinta);color:#fff;box-shadow:var(--sombra-sm)}
.nav a.activo .ic{opacity:1;color:#fff}
.main{flex:1;padding:22px 28px;max-width:1380px}
html.nav-col .nav{width:56px;padding:14px 7px}
html.nav-col .nav .grupo{display:none}
html.nav-col .nav a{justify-content:center;padding:10px 0}
html.nav-col .nav a span:not(.ic){display:none}

/* ---- Títulos de página ---- */
.page-h{font-size:1.42rem;margin:0 0 3px;font-weight:800;letter-spacing:-.02em}
.page-sub{color:var(--gris-500);margin:0 0 22px;font-size:.9rem}

/* ---- Tarjetas ---- */
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:15px 18px;margin-bottom:12px}
.card h2{font-size:.96rem;margin:0 0 12px;font-weight:700}
.card .card-desc{color:var(--gris-500);font-size:.84rem;margin:-8px 0 14px}

.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .nav{width:56px;padding:14px 7px}.nav .grupo{display:none}
  .nav a{justify-content:center}.nav a span:not(.ic){display:none}.main{padding:20px 16px}}

/* ---- Métricas ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--sombra-sm)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tinta)}
.stat.teal::before{background:var(--teal)} .stat.oro::before{background:var(--oro)}
.stat.verde::before{background:var(--verde)} .stat.rojo::before{background:var(--rojo)}
.stat .lbl{font-size:.72rem;color:var(--gris-500);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.stat .val{font-size:1.6rem;font-weight:800;margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .hint{font-size:.76rem;color:var(--gris-500);margin-top:3px}

/* ---- Cubos (concepto) ---- */
.mundos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:820px){.mundos{grid-template-columns:1fr}}
.mundo{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:20px 22px;box-shadow:var(--sombra);position:relative}
.mundo .eyebrow{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.mundo.b .eyebrow{color:var(--oro)}
.mundo h3{margin:6px 0 4px;font-size:1.12rem;font-weight:800}
.mundo p{color:var(--gris-600);font-size:.86rem;margin:0 0 14px;line-height:1.55}
.cubo-list{display:flex;flex-direction:column;gap:8px}
.cubo{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--linea);
  border-radius:var(--radio-sm);background:var(--panel);font-size:.86rem;font-weight:500}
.cubo .n{width:22px;height:22px;border-radius:6px;background:var(--tinta);color:#fff;
  font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.cubo .desc{color:var(--gris-500);font-weight:400;font-size:.8rem}

/* ---- Tablas ---- */
.tabla{width:100%;border-collapse:collapse;font-size:.86rem}
.tabla th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris-500);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--linea-fuerte)}
.tabla td{padding:6px 10px;border-bottom:1px solid var(--linea)}
.tabla tr:hover td{background:var(--gris-100)}
.tabla td.num,.tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla .mini{color:var(--gris-500);font-size:.78rem}

/* ---- Pills ---- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.02em}
.pill.teal{background:var(--teal-bg);color:var(--teal-600)}
.pill.oro{background:var(--oro-bg);color:var(--oro)}
.pill.verde{background:var(--verde-bg);color:var(--verde)}
.pill.rojo{background:var(--rojo-bg);color:var(--rojo)}
.pill.azul{background:var(--azul-bg);color:var(--azul)}
.pill.gris{background:var(--gris-100);color:var(--gris-700)}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  font-size:.86rem;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid var(--tinta);
  background:var(--tinta);color:#fff;transition:filter .12s,background .12s}
.btn:hover{filter:brightness(1.12);text-decoration:none}
.btn.teal{background:var(--teal);border-color:var(--teal)}
.btn.sec{background:var(--blanco);color:var(--tinta);border-color:var(--linea-fuerte)}
.btn.sec:hover{background:var(--gris-100);filter:none}
.btn.sm{padding:6px 12px;font-size:.8rem}
.btn.link{background:none;border:none;color:var(--teal-600);padding:4px 6px}

/* ---- Formularios ---- */
.form-row{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.form-row label{font-size:.8rem;font-weight:600;color:var(--grafito)}
.form-row .ayuda{font-size:.74rem;color:var(--gris-500)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  font-family:inherit;font-size:.9rem;color:var(--tinta);background:var(--blanco);
  border:1px solid var(--linea-fuerte);border-radius:10px;padding:9px 12px;width:100%;transition:border .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-bg)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* ---- Alertas ---- */
.alert{padding:11px 15px;border-radius:10px;font-size:.86rem;margin-bottom:14px;border:1px solid transparent}
.alert.ok{background:var(--verde-bg);color:var(--verde);border-color:#bfe3cc}
.alert.error{background:var(--rojo-bg);color:var(--rojo);border-color:#f0c4bf}
.alert.info{background:var(--azul-bg);color:var(--azul);border-color:#c6d6e8}

/* ---- Toolbar ---- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar .filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1100px 500px at 50% -10%, #ffffff 0%, var(--marfil) 60%)}
.login-card{width:380px;max-width:92vw;background:var(--blanco);border:1px solid var(--linea);
  border-radius:18px;box-shadow:var(--sombra);padding:34px 32px}
.login-card .brand{text-align:center;margin-bottom:22px}
.login-card .brand .big{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.login-card .brand .big .k{color:var(--teal)}
.login-card .brand .sub{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-500);margin-top:6px}
.foot{color:var(--gris-400);font-size:.74rem;text-align:center;margin-top:26px}
.empty{text-align:center;color:var(--gris-500);padding:44px 20px}
.empty .big{font-size:2rem;opacity:.5}

/* ---- Sub-navegación de un plan ---- */
.subnav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--linea);margin:0 0 20px}
.subnav a{padding:9px 15px;font-size:.86rem;font-weight:600;color:var(--gris-600);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--tinta);text-decoration:none;background:var(--gris-100);border-radius:8px 8px 0 0}
.subnav a.activo{color:var(--teal-600);border-bottom-color:var(--teal)}
.subnav .modo-toggle{margin-left:auto;display:inline-flex;align-self:center;border:1px solid var(--linea-fuerte);border-radius:999px;overflow:hidden;margin-bottom:6px}
.subnav .modo-toggle a{padding:5px 13px;font-size:.76rem;font-weight:600;color:var(--gris-600);border:none}
.subnav .modo-toggle a:hover{background:var(--gris-100);text-decoration:none;border-radius:0}
.subnav .modo-toggle a.on{background:var(--tinta);color:#fff}
body.modo-simple .avz{display:none !important}

/* ---- Cuenta de explotación ---- */
.pyg{width:100%;border-collapse:collapse;font-size:.88rem}
.pyg td{padding:5px 12px;border-bottom:1px solid var(--linea)}
.pyg td.num{text-align:right;font-variant-numeric:tabular-nums;width:150px}
.pyg .concepto{color:var(--grafito)}
.pyg tr.sub td{color:var(--gris-500);font-size:.83rem}
.pyg tr.sub td.concepto{padding-left:26px}
.pyg tr.total td{font-weight:800;border-top:2px solid var(--linea-fuerte);border-bottom:none}
.pyg tr.total.teal td{color:var(--teal-600)}
.pyg tr.total.verde td{color:var(--verde)}
.pyg tr.total.rojo td{color:var(--rojo)}
.pyg .neg{color:var(--rojo)}
.editrow input{padding:6px 8px;font-size:.85rem}
.editrow input.mini{width:90px}

/* ---- Acordeón (details/summary) ---- */
.acc{border:1px solid var(--linea);border-radius:12px;background:var(--blanco);margin-bottom:12px;overflow:hidden;box-shadow:var(--sombra-sm)}
.acc>summary{list-style:none;cursor:pointer;padding:13px 18px;display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:.92rem;user-select:none;transition:background .12s}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{background:var(--gris-100)}
.acc>summary .chev{margin-left:auto;color:var(--gris-400);transition:transform .18s;font-size:.9rem}
.acc[open]>summary{border-bottom:1px solid var(--linea)}
.acc[open]>summary .chev{transform:rotate(90deg)}
.acc>summary .sub-total{font-weight:800;color:var(--teal-600);font-variant-numeric:tabular-nums;margin-left:auto}
.acc>summary .chev+.sub-total,.acc>summary .sub-total+.chev{margin-left:14px}
.acc .acc-body{padding:6px 18px 16px}

/* ---- Ficha de producto ---- */
.prod{border:1px solid var(--linea);border-radius:14px;background:var(--blanco);box-shadow:var(--sombra);margin-bottom:14px;overflow:hidden}
.prod-head{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--linea);flex-wrap:wrap}
.prod-head .nombre{font-weight:800;font-size:1.02rem}
.prod-head input.nombre-inp{font-weight:800;font-size:1.02rem;border:1px solid transparent;background:transparent;padding:4px 8px;width:190px;border-radius:8px}
.prod-head input.nombre-inp:hover{border-color:var(--linea)}
.prod-head .live{margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.prod-head .live .kpi{text-align:right}
.prod-head .live .kpi .lbl{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris-500);font-weight:700}
.prod-head .live .kpi .v{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.prod-body{padding:16px 18px}

/* objetivo destacado */
.objetivo{display:flex;align-items:center;gap:16px;background:var(--teal-bg);border:1px solid #cfe6e2;border-radius:12px;padding:12px 16px;margin-bottom:16px}
.objetivo .txt .t{font-weight:700;font-size:.9rem;color:var(--teal-600)}
.objetivo .txt .s{font-size:.76rem;color:var(--gris-600)}
.objetivo .stepper{margin-left:auto}

/* stepper +/- */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--linea-fuerte);border-radius:10px;overflow:hidden;background:var(--blanco)}
.stepper button{border:none;background:var(--blanco);width:38px;height:40px;font-size:1.2rem;font-weight:700;color:var(--tinta);cursor:pointer;line-height:1;transition:background .1s}
.stepper button:hover{background:var(--gris-100)}
.stepper input{border:none;width:74px;text-align:center;font-size:1.05rem;font-weight:800;padding:0;background:transparent;border-radius:0}
.stepper input:focus{box-shadow:none;outline:none}
.stepper.sm button{width:30px;height:32px;font-size:1rem}
.stepper.sm input{width:52px;font-size:.9rem}

/* rejilla compacta de campos */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:.7rem;color:var(--gris-500);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.field .in-suffix{position:relative;display:flex;align-items:center}
.field .in-suffix input{padding-right:26px}
.field .in-suffix .suf{position:absolute;right:10px;color:var(--gris-400);font-size:.82rem;pointer-events:none}
.field input,.field select{padding:8px 10px;font-size:.88rem}

/* details interno (condiciones) */
.det{border-top:1px solid var(--linea);margin-top:14px}
.det>summary{list-style:none;cursor:pointer;padding:11px 2px 4px;font-size:.8rem;font-weight:700;color:var(--teal-600);display:flex;align-items:center;gap:8px}
.det>summary::-webkit-details-marker{display:none}
.det>summary .chev{transition:transform .18s}
.det[open]>summary .chev{transform:rotate(90deg)}
.det .det-body{padding:12px 2px 4px}

/* barra de guardado fija abajo */
.savebar{position:sticky;bottom:0;background:rgba(251,250,247,.94);backdrop-filter:blur(6px);
  border-top:1px solid var(--linea);padding:12px 0;margin-top:8px;display:flex;gap:10px;align-items:center;z-index:5}
.savebar .muted{color:var(--gris-500);font-size:.82rem}

/* estacionalidad 12 meses */
.season{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.season .mcell{display:flex;flex-direction:column;gap:3px;align-items:center}
.season .mcell label{font-size:.6rem;color:var(--gris-400);font-weight:700}
.season .mcell input{padding:6px 2px;text-align:center;font-size:.8rem;width:100%}
@media(max-width:760px){.season{grid-template-columns:repeat(6,1fr)}}

/* tabla mensual (12 meses) */
.mtable-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:12px}
.mtable{border-collapse:collapse;font-size:.73rem;min-width:0;width:100%}
.mtable th,.mtable td{padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;border-bottom:1px solid var(--linea)}
.mtable th:first-child,.mtable td:first-child{text-align:left;position:sticky;left:0;background:var(--blanco);z-index:1;font-weight:600;min-width:150px}
.mtable thead th{background:var(--panel);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris-500);border-bottom:2px solid var(--linea-fuerte)}
.mtable thead th:first-child{background:var(--panel)}
.mtable td.tot,.mtable th.tot{background:var(--gris-100);font-weight:800;border-left:1px solid var(--linea-fuerte)}
.mtable tr.linea-total td{font-weight:800;border-top:1px solid var(--linea-fuerte)}
.mtable tr.linea-total.teal td{color:var(--teal-600)}
.mtable tr.linea-total.verde td{color:var(--verde)}
.mtable tr.linea-sub td{color:var(--gris-500)}
.mtable .neg{color:var(--rojo)}
.mtable tr.acumulado td{background:var(--oro-bg);font-weight:700}
.mtable tr.exp{cursor:pointer}
.mtable tr.exp:hover td{background:var(--gris-100)}
.mtable tr.exp td:first-child::before{content:"▸";display:inline-block;color:var(--gris-400);font-size:.7rem;margin-right:5px;transition:transform .15s}
.mtable tr.exp.open td:first-child::before{transform:rotate(90deg)}
.mtable tr.dsub td{font-size:.66rem;color:var(--gris-600);background:var(--panel)}
.mtable tr.dsub td:first-child{padding-left:24px;font-weight:400;font-style:italic;background:var(--panel)}
.mtable tr.dsub td.tot{background:var(--gris-100);font-weight:600}

/* ---- gráficas SVG ---- */
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:var(--teal)}
.chart .bar.neg{fill:var(--rojo)}
.chart .line{fill:none;stroke:var(--oro);stroke-width:2.5}
.chart .dot{fill:var(--oro)}
.chart .axis{stroke:var(--linea-fuerte);stroke-width:1}
.chart .zero{stroke:var(--gris-300);stroke-width:1;stroke-dasharray:3 3}
.chart .lbl{fill:var(--gris-500);font-size:10px}
.chart-legend{display:flex;gap:18px;font-size:.78rem;color:var(--gris-600);margin-bottom:6px}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend .sw{width:14px;height:4px;border-radius:2px;display:inline-block}

/* ---- Info interactivo (i) ---- */
.info{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px}
.info-i{width:16px;height:16px;border-radius:50%;border:1px solid var(--gris-400);background:var(--blanco);
  color:var(--gris-600);font-size:.68rem;font-weight:800;font-style:italic;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .12s}
.info-i:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-bg)}
.info.open .info-i{background:var(--teal);color:#fff;border-color:var(--teal)}
.info-pop{display:none;position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:230px;background:var(--tinta);color:#fff;font-size:.78rem;font-weight:400;line-height:1.5;
  padding:10px 12px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;text-align:left}
.info-pop strong{color:#fff}
.info-pop::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--tinta)}
.info.open .info-pop{display:block}
.stat .info-pop,.mundo .info-pop{color:#fff}

/* clic-para-desplegar en tarjetas del panel */
.reveal-card{cursor:pointer}
.reveal-body{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);font-size:.86rem;color:var(--gris-600);line-height:1.6}
.reveal-card.open .reveal-body{display:block}
.reveal-card .reveal-hint{font-size:.72rem;color:var(--teal-600);font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:5px}
.reveal-card.open .reveal-hint .chev{transform:rotate(90deg)}
.reveal-hint .chev{transition:transform .18s;display:inline-block}