/* FZ Loperena · estilo neomorfismo blanco con verde jade (el mismo del inventario).
   Se carga DESPUÉS de app.css y solo cambia colores, sombras y formas; la estructura no se toca.
   El botón de diseño (junto al de modo oscuro) lo apaga o enciende desactivando este archivo.
   Modo oscuro: fondo rgb(29,29,29) neutro, con acentos jade. */

:root{
  --bg:#f4f7f5; --ink:#3f524a; --muted:#7d8f86; --line:rgba(63,82,74,.10); --sunk:rgba(63,82,74,.07);
  --sh-d:#d0d9d4; --sh-l:#ffffff;
  --jade:#00a86b; --jade-claro:#2fbf8a; --jade-fuerte:#007a4d; --jade-suave:#dcf2e8;
  --btn-a:#2fbf8a; --btn-b:#00a86b;
  --accent:#00a86b; --accent-ink:#ffffff; --pos:#00875a; --neg:#c96f6f; --neg-bg:rgba(217,138,138,.18);
  --glass:#f4f7f5; --glass-strong:#f4f7f5; --edge:transparent; --hi:rgba(255,255,255,.9);
  --shadow:6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l);
  --orb-op:0; --hero-a:#2fbf8a; --hero-b:#00a06a;
  --solid:#f4f7f5; --solid-2:#e9f0ec; --cur-col:rgba(0,168,107,.10); --fut:rgba(0,168,107,.04);
  --f-round:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --raised:6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l);
  --raised-sm:3px 3px 7px var(--sh-d), -3px -3px 7px var(--sh-l);
  --pressed:inset 3px 3px 7px var(--sh-d), inset -3px -3px 7px var(--sh-l);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:rgb(29,29,29); --ink:#e4e4e4; --muted:#9a9a9a; --line:rgba(255,255,255,.10); --sunk:rgba(255,255,255,.06);
  --sh-d:#0f0f0f; --sh-l:#2c2c2c;
  --jade:#1fa377; --jade-claro:#35c28f; --jade-fuerte:#5fd9ab; --jade-suave:#24382f;
  --btn-a:#1fa377; --btn-b:#0b8a5c;
  --accent:#35c28f; --accent-ink:#06261a; --pos:#5fd9ab; --neg:#e69a9a; --neg-bg:rgba(230,154,154,.16);
  --glass:rgb(29,29,29); --glass-strong:rgb(29,29,29); --hi:rgba(255,255,255,.05);
  --hero-a:#1b8c64; --hero-b:#0b7a52; --solid:rgb(29,29,29); --solid-2:#262626;
  --cur-col:rgba(53,194,143,.14); --fut:rgba(53,194,143,.05); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:rgb(29,29,29); --ink:#e4e4e4; --muted:#9a9a9a; --line:rgba(255,255,255,.10); --sunk:rgba(255,255,255,.06);
  --sh-d:#0f0f0f; --sh-l:#2c2c2c;
  --jade:#1fa377; --jade-claro:#35c28f; --jade-fuerte:#5fd9ab; --jade-suave:#24382f;
  --btn-a:#1fa377; --btn-b:#0b8a5c;
  --accent:#35c28f; --accent-ink:#06261a; --pos:#5fd9ab; --neg:#e69a9a; --neg-bg:rgba(230,154,154,.16);
  --glass:rgb(29,29,29); --glass-strong:rgb(29,29,29); --hi:rgba(255,255,255,.05);
  --hero-a:#1b8c64; --hero-b:#0b7a52; --solid:rgb(29,29,29); --solid-2:#262626;
  --cur-col:rgba(53,194,143,.14); --fut:rgba(53,194,143,.05); color-scheme:dark}

html,body{background:var(--bg)}
.orbs{display:none}
h1,h2{color:var(--ink)}
h1{color:var(--jade-fuerte)}

/* tarjetas y superficies elevadas */
.glass{background:var(--bg);border:0;box-shadow:var(--raised);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass::before{display:none}
.card{border-radius:28px}
.hero{background:linear-gradient(145deg,var(--hero-a),var(--hero-b));color:#fff}
.hero.glass{box-shadow:var(--raised)}
.weeknav button{background:rgba(255,255,255,.2);border:0;box-shadow:inset 2px 2px 5px color-mix(in srgb,var(--hero-b) 55%,#000 45%), inset -2px -2px 5px rgba(255,255,255,.25)}
.trio>div{background:rgba(255,255,255,.16);border:0;box-shadow:inset 2px 2px 5px color-mix(in srgb,var(--hero-b) 60%,#000 40%), inset -2px -2px 5px rgba(255,255,255,.2)}
.chip-state{background:rgba(255,255,255,.25)}

/* campos: hundidos */
input,select,textarea{background:var(--bg);border:2px solid transparent;border-radius:16px;box-shadow:var(--pressed);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--jade-claro)}
button:focus-visible{outline:2px solid var(--jade-claro)}
.amt input,.sheet td input{box-shadow:none;border:0;background:transparent}
.sheet td input{background:var(--bg);box-shadow:var(--pressed)}
.dates input{border-radius:999px}
.pw-eye:hover{background:transparent;color:var(--jade-fuerte)}

/* botones y etiquetas: elevados; el elegido se hunde en verde */
.btn{background:linear-gradient(145deg,var(--btn-a),var(--btn-b));color:var(--btn-ink,#fff);border:0;box-shadow:4px 4px 10px var(--sh-d), -4px -4px 10px var(--sh-l)}
.btn:active{box-shadow:inset 3px 3px 7px color-mix(in srgb,var(--btn-b) 55%,#000), inset -3px -3px 7px color-mix(in srgb,var(--btn-a) 70%,#fff)}
.btn.ghost,.dlg-no{background:var(--bg);color:var(--ink);border:0;box-shadow:var(--raised-sm)}
.btn.ghost:active,.dlg-no:active{box-shadow:var(--pressed)}
.chips button,.tags button,.dates button,.mini,.onb-add{background:var(--bg);border:0;color:var(--ink);box-shadow:var(--raised-sm)}
.tags .tag-more,.onb-add{background:transparent;border:1px dashed var(--line);box-shadow:none;color:var(--muted)}
.chips button:active,.tags button:active,.dates button:active,.mini:active{box-shadow:var(--pressed)}
.chips button.ready,.chips button[aria-pressed="true"],.tags button[aria-pressed="true"],.dates button[aria-pressed="true"]{
  background:var(--jade-suave);color:var(--jade-fuerte);border:0;box-shadow:var(--pressed)}
.mini.danger{background:var(--bg);color:var(--neg);box-shadow:var(--raised-sm)}
.seg{background:var(--bg);box-shadow:var(--pressed);padding:4px}
.seg button{color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--jade-fuerte);box-shadow:var(--raised-sm)}
.theme-btn{background:var(--bg);border:0;box-shadow:var(--raised-sm);color:var(--ink)}
.theme-btn:active{box-shadow:var(--pressed)}
#diseno-btn[aria-pressed="true"]{color:var(--jade-fuerte)}

/* barra de pestañas en computadora (lateral) */
nav.tabs{background:var(--bg);box-shadow:var(--raised);padding:7px}
nav.tabs button{color:var(--muted)}
nav.tabs button[aria-current="page"]{background:var(--jade-suave);color:var(--jade-fuerte);box-shadow:var(--pressed)}
@media (min-width:1024px){ nav.tabs button:hover:not([aria-current="page"]){background:var(--bg);color:var(--ink);box-shadow:var(--raised-sm)} }
.toast{background:var(--bg);box-shadow:var(--raised);color:var(--ink)}
.toast button{color:var(--jade-fuerte)}

/* piezas internas */
.kpis>div,.sim-hero,.dif-f{background:var(--bg);box-shadow:var(--pressed);border:0}
.dif-f{border:0}
#gate-msg{background:var(--bg);box-shadow:var(--pressed)}
.bar{background:var(--bg);box-shadow:var(--pressed);height:9px}
.bar i{background:linear-gradient(90deg,var(--jade-claro),var(--jade))}
.bar i.over{background:linear-gradient(90deg,#e0a3a3,var(--neg))}
.sw{background:var(--bg);box-shadow:var(--pressed)}
.sw::after{background:var(--bg);box-shadow:var(--raised-sm)}
.sw[aria-checked="true"]{background:var(--jade-suave)}
.sw[aria-checked="true"]::after{background:var(--jade)}
.tag{background:var(--jade-suave);color:var(--jade-fuerte)}
.alert{background:var(--bg);box-shadow:var(--pressed);color:var(--neg)}
.atraso{background:var(--bg);box-shadow:var(--pressed)}
.item,.pers,.tg,.taxline.tot,.tbl td,.tbl th{border-color:var(--line)}
.tbl tr.cur td{background:var(--jade-suave)}
.sheet-wrap{background:var(--bg);box-shadow:var(--pressed);border:0}
.sheet thead th.cur{color:var(--jade-fuerte);background:var(--jade-suave)}
.sheet td.edit:hover{outline-color:var(--jade-claro)}
.sheet thead th.fut{background:color-mix(in srgb,var(--solid-2) 90%,var(--jade))}
.card.viendo{background:var(--bg);border:0;box-shadow:var(--raised);outline:2px solid var(--jade-claro)}

/* hojas, avisos y pantalla de acceso */
.sheet-ov{background:rgba(0,0,0,.4)}
.sheet-card{background:var(--bg)}
.gate-logo{background:linear-gradient(145deg,var(--btn-a),var(--btn-b));box-shadow:4px 4px 10px var(--sh-d), -4px -4px 10px var(--sh-l)}
.loader{background:var(--bg);background-image:none}
.ld-bg{stroke:var(--sh-d)}
.ld-fill{stroke:var(--jade)}
.alerta{box-shadow:var(--raised)}
.alerta .al-btn{color:#a8323e}

/* el logo trae fondo claro: se mezcla con la tarjeta para que no se vea una caja */
.logo,.logo-full{mix-blend-mode:multiply}
:root[data-theme="dark"] .logo,:root[data-theme="dark"] .logo-full{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo,:root:not([data-theme="light"]) .logo-full{mix-blend-mode:screen}}

/* Tu dinero hoy: bloque "Invertido" */
.dinero .din-inv{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:12px 14px;border-radius:18px;background:var(--bg);box-shadow:var(--pressed)}
.dinero .din-inv .num{color:var(--jade-fuerte)}
.din-ver{align-self:flex-start;border:0;background:transparent;color:var(--jade-fuerte);font-weight:700;padding:2px 0}

/* Pregunta "¿Es un producto nuevo?" */
.dlg-fondo{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:20px}
.dlg{width:min(420px,100%);background:var(--bg);border-radius:28px;padding:24px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:10px 10px 28px rgba(0,0,0,.28), -4px -4px 14px rgba(255,255,255,.08)}
.dlg h2{color:var(--jade-fuerte);font-size:21px}
.dlg p{margin:0}
.dlg .btn{width:100%}
.dlg-no{width:100%;padding:12px 20px;font-weight:600;border-radius:999px;font:inherit}

/* Pestaña Stock (el inventario) */
#stock-host{display:block;min-height:40vh}

/* Barra del teléfono (muesca + bola): ya no se usan aquí: la barra está en nav-bulto.css */
:root{
  --nav-fill:var(--bg); --nav-filter:drop-shadow(5px 5px 6px var(--sh-d)) drop-shadow(-4px -4px 6px var(--sh-l));
  --nav-act:var(--jade-fuerte); --ball-ink:var(--btn-ink,#fff); --ball-bg:linear-gradient(145deg,var(--btn-a),var(--btn-b));
  --ball-sh:3px 3px 7px var(--sh-d), -3px -3px 7px var(--sh-l), inset 1px 1px 2px rgba(255,255,255,.35);
}

/* Imprimir la etiqueta del inventario: solo la etiqueta */
@media print{
  body[data-tab="stock"] > :not(#app){display:none!important}
  body[data-tab="stock"] #app > :not(#stock-host){display:none!important}
  nav.tabs{display:none!important}
}

@media (prefers-reduced-motion:no-preference){
  .chips button,.tags button,.dates button,.mini,.btn,.dlg-no,nav.tabs button{transition:box-shadow .15s ease, transform .12s ease}
}