@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; font-style: normal; }



:root {
  --bg:#0a0a0a; --surface:#111111; --surface2:#181818; --surface3:#202020; --surface4:#2a2a2a;
  --border:#2a2a2a; --border2:#333333; --text:#f5f5f5; --text2:#888888; --text3:#444444;
  --blue:#4a7aff; --blue-dim:#0d1a3d; --blue-mid:#1a3060;
  --unlit:#434ea1; --unlit-dim:#0d0f1e;
  --arlab:#c7872b; --arlab-dim:#1e1508;
  --kye:#9aa0a8; --kye-dim:#1a1b1d;
  --shared:#888888; --shared-dim:#1a1a1a;
  --danger:#e05555; --danger-dim:#2a0a0a;
  --success:#4a9e6a; --warn:#c8a84b;
  --radius:6px; --radius-lg:10px; --nav-h:52px; --green:#4ade80; --red:#f87171; --amber:#f59e0b;
  --font:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;font-weight:400;min-height:100vh;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 600px 400px at 20% 50%,rgba(74,122,255,.06) 0%,transparent 70%),radial-gradient(ellipse 400px 300px at 80% 80%,rgba(199,135,43,.04) 0%,transparent 70%);}

/* LOGIN */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-box{width:100%;max-width:360px;padding:40px 36px;background:linear-gradient(160deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);}
.login-logo{margin-bottom:32px;}
.login-wordmark{font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--text);margin-bottom:4px;}
.login-sub{font-size:12px;font-weight:300;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;}
.login-brands{display:flex;gap:8px;margin-top:10px;}
.login-brand{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:3px;}
.login-brand.u{background:var(--unlit-dim);color:var(--unlit);border:1px solid rgba(67,78,161,.3);}
.login-brand.a{background:var(--arlab-dim);color:var(--arlab);border:1px solid rgba(199,135,43,.3);}
.login-brand.k{background:var(--kye-dim);color:var(--kye);border:1px solid rgba(154,160,168,.3);}
.login-divider{height:1px;background:var(--border);margin:28px 0;}
.login-box .form-group{margin-bottom:14px;}
.login-box label{display:block;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.login-box input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:14px;padding:11px 14px;outline:none;transition:border-color .15s;}
.login-box input:focus{border-color:var(--blue);}
.btn-login{width:100%;background:var(--blue);color:#fff;border:none;border-radius:var(--radius);font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:13px;cursor:pointer;transition:background .15s;margin-top:4px;}
.btn-login:hover{background:#5a88ff;}
#login-err{color:var(--danger);font-size:12px;text-align:center;margin-top:10px;min-height:16px;}

/* APP */
#app-screen{display:none;flex-direction:column;min-height:100vh;}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:var(--nav-h);background:rgba(10,10,10,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:100;}
.header-left{display:flex;align-items:center;gap:12px;}
.header-wordmark{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--text);}
.header-wordmark span{color:var(--text3);font-weight:300;}
.header-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:2px;display:inline-block;}
.header-right{display:flex;align-items:center;gap:10px;}
#user-email{font-size:12px;color:var(--text3);}
.hamburger{display:none;background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;padding:6px;}
.app-body{display:flex;flex:1;}

/* SIDEBAR */
.sidebar{width:196px;min-width:196px;background:rgba(14,14,14,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.06);padding:16px 10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;}
.nav-section{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:14px 10px 6px;}
.nav-btn{display:flex;align-items:center;gap:10px;font-family:var(--font);font-size:13px;font-weight:400;color:var(--text2);background:none;border:none;padding:9px 10px;border-radius:var(--radius);cursor:pointer;transition:all .12s;text-align:left;width:100%;letter-spacing:-0.01em;}
.nav-btn:hover{color:var(--text);background:var(--surface2);}
.nav-btn.active{color:var(--text);background:var(--surface3);font-weight:500;}
.nav-btn.active .nav-dot{background:var(--blue);}
.nav-dot{width:5px;height:5px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background .12s;}
main{flex:1;padding:28px 24px;max-width:960px;overflow-x:hidden;}

/* MOBILE NAV */
#mobile-nav{display:none;position:fixed;inset:0;z-index:300;}
#mobile-nav.open{display:block;}
.mobile-nav-overlay{position:absolute;inset:0;background:rgba(0,0,0,.8);}
.mobile-nav-drawer{position:absolute;left:0;top:0;bottom:0;width:220px;background:var(--surface);border-right:1px solid var(--border);padding:16px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.mobile-nav-close{align-self:flex-end;background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;padding:4px 8px;margin-bottom:8px;}

/* PAGES */
.page{display:none;}
.page.active{display:block;}

/* SECTION HEADER */
.section-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:12px;flex-wrap:wrap;}
.section-title{font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--text);}
.section-sub{font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--text3);margin-top:3px;}

/* KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px;}
@media(min-width:600px){.kpi-grid{grid-template-columns:repeat(4,1fr);}}
.kpi-card{background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:18px 16px;position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);}
.kpi-card::before{content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;border-radius:50%;opacity:.12;filter:blur(24px);pointer-events:none;}
.kpi-card:nth-child(1)::before{background:var(--unlit);}
.kpi-card:nth-child(2)::before{background:var(--arlab);}
.kpi-card:nth-child(3)::before{background:var(--blue);}
.kpi-card:nth-child(4)::before{background:var(--danger);}
.kpi-label{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.kpi-value{font-size:28px;font-weight:600;letter-spacing:-0.03em;color:var(--text);line-height:1;}
.kpi-sub{font-size:11px;color:var(--text3);margin-top:4px;font-weight:300;}
.kpi-bar{position:absolute;bottom:0;left:0;right:0;height:2px;}
.kpi-bar.blue{background:linear-gradient(90deg,var(--blue),transparent);}
.kpi-bar.unlit{background:linear-gradient(90deg,var(--unlit),transparent);}
.kpi-bar.arlab{background:linear-gradient(90deg,var(--arlab),transparent);}
.kpi-bar.kye{background:linear-gradient(90deg,var(--kye),transparent);}
.kpi-bar.danger{background:linear-gradient(90deg,var(--danger),transparent);}

/* DASH */
.dash-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:700px){.dash-grid{grid-template-columns:1fr 1fr;}}
.dash-section-label{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:12px;}
.dash-panel{background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:16px;box-shadow:0 2px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);}
.of-row{display:grid;grid-template-columns:52px 1fr auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--surface3);font-size:13px;}
.of-row:last-child{border-bottom:none;}
.empty-ok{font-size:13px;color:var(--success);padding:4px 0;font-weight:300;}

/* CARDS */
.items-grid{display:grid;grid-template-columns:1fr;gap:8px;}
@media(min-width:600px){.items-grid{grid-template-columns:repeat(2,1fr);}}
.item-card{background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:16px;transition:border-color .15s,box-shadow .2s;position:relative;box-shadow:0 2px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);}
.item-card:hover{border-color:rgba(255,255,255,.12);box-shadow:0 4px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);}
.item-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.item-name{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--text);margin-bottom:2px;}
.item-sub{font-size:11px;font-weight:300;color:var(--text3);}
.item-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;}
.stat-box{}
.stat-label{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:2px;}
.stat-val{font-size:13px;font-weight:500;color:var(--text);letter-spacing:-0.01em;}
.stat-val.danger{color:var(--danger);}
.stat-val.muted{color:var(--text2);font-weight:300;}
.stat-val.success{color:var(--success);}
.stat-val.blue{color:var(--blue);}
.stat-val.warn{color:var(--warn);}
.progress-wrap{height:2px;background:var(--surface3);border-radius:1px;margin-bottom:12px;overflow:hidden;}
.progress-bar{height:100%;border-radius:1px;transition:width .4s;}
.item-actions{display:flex;gap:6px;flex-wrap:wrap;}

/* RECIPE CARDS */
.recipe-card{background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:18px;position:relative;overflow:hidden;transition:border-color .15s,box-shadow .2s;box-shadow:0 2px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);}
.recipe-card:hover{border-color:rgba(255,255,255,.12);}
.recipe-card.unlit-glow::after,.recipe-card.arlab-glow::after{content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;border-radius:50%;opacity:.08;filter:blur(24px);pointer-events:none;}
.recipe-card.unlit-glow::after{background:var(--unlit);}
.recipe-card.arlab-glow::after{background:var(--arlab);}
.recipe-card.kye-glow::after{background:var(--kye);}
.recipe-stripe{position:absolute;top:0;left:0;right:0;height:2px;}
.recipe-stripe.unlit{background:var(--unlit);}
.recipe-stripe.arlab{background:var(--arlab);}
.recipe-stripe.kye{background:var(--kye);}
.recipe-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.recipe-name{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--text);}
.recipe-meta{font-size:11px;font-weight:300;color:var(--text3);margin-top:2px;}
.ing-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--surface3);font-size:13px;color:var(--text2);font-weight:300;}
.ing-row:last-child{border-bottom:none;}
.ing-val{font-size:12px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;}
.recipe-footer{display:flex;gap:8px;margin-top:14px;}
.recipe-notes{font-size:11px;color:var(--text3);font-weight:300;margin-top:8px;font-style:italic;}
.recipe-costs{background:var(--surface2);border-radius:var(--radius);padding:10px 12px;margin-top:10px;}

/* OF CARDS */
.of-card{background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:16px;transition:border-color .15s,box-shadow .2s;box-shadow:0 2px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);}
.of-card:hover{border-color:rgba(255,255,255,.12);}
.of-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.of-num{font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;}
.of-name{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--text);margin-top:2px;}
.of-note{font-size:11px;font-weight:300;color:var(--text3);margin-top:2px;}
.of-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.of-btns{display:flex;gap:6px;flex-wrap:wrap;}

/* BUTTONS */
.btn{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:.03em;padding:8px 14px;border-radius:var(--radius);border:1px solid var(--border2);cursor:pointer;transition:all .12s;background:var(--surface2);color:var(--text2);}
.btn:hover{background:var(--surface3);color:var(--text);}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-blue:hover{background:#5a88ff;border-color:#5a88ff;}
.btn-outline-blue{background:var(--blue-dim);color:var(--blue);border-color:rgba(74,122,255,.3);}
.btn-outline-blue:hover{background:var(--blue-mid);}
.btn-green{background:var(--arlab-dim);color:var(--arlab);border-color:rgba(199,135,43,.3);}
.btn-green:hover{background:#2a1e08;}
.btn-danger{background:var(--danger-dim);color:var(--danger);border-color:rgba(224,85,85,.2);}
.btn-danger:hover{background:#3d1010;}
.btn-sm{padding:5px 10px;font-size:11px;}

/* TAGS & BADGES */
.tag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;white-space:nowrap;}
.tag.unlit{background:var(--unlit-dim);color:var(--unlit);}
.tag.arlab{background:var(--arlab-dim);color:var(--arlab);}
.tag.kye{background:var(--kye-dim);color:var(--kye);}
.tag.shared{background:var(--surface3);color:var(--text2);}
.tag.low{background:var(--danger-dim);color:var(--danger);}
.badge{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;}
.badge.pendiente{background:rgba(200,168,75,.12);color:var(--warn);}
.badge.en_proceso{background:var(--blue-dim);color:var(--blue);}
.badge.completada{background:rgba(74,158,106,.12);color:var(--success);}
.badge.cancelada{background:var(--danger-dim);color:var(--danger);}

/* ALERTS */
.alert{background:var(--danger-dim);border:1px solid rgba(224,85,85,.2);border-radius:var(--radius);padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--danger);}

/* FILTERS */
.filter-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.filter-bar input{width:180px;}
.filter-bar select{width:150px;}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal{background:linear-gradient(160deg,rgba(28,28,28,.95) 0%,rgba(14,14,14,.98) 100%);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);}
.modal-title{font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--text);margin-bottom:20px;}
.form-group{margin-bottom:14px;}
label{display:block;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
input,select,textarea{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:14px;font-weight:400;padding:10px 12px;outline:none;transition:border-color .12s;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);}
select option{background:var(--surface2);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}

/* ING LINES */
.ing-line{display:grid;grid-template-columns:1fr 80px 60px 26px;gap:6px;margin-bottom:8px;align-items:center;}
.remove-btn{background:none;border:none;color:var(--danger);cursor:pointer;font-size:16px;padding:0;}

/* FASE BLOCK */
.fase-block{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:8px;}

/* OF PREVIEW */
.of-preview-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-top:12px;}

/* EMPTY STATES */
.empty-state{text-align:center;padding:48px 20px;}
.es-icon{font-size:32px;margin-bottom:12px;opacity:.4;}
.es-text{font-size:16px;font-weight:500;color:var(--text2);letter-spacing:-0.01em;}
.es-sub{font-size:12px;color:var(--text3);margin-top:4px;font-weight:300;}

/* MISC */
.divider{height:1px;background:var(--border);margin:12px 0;}
.codigo-tag{font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--surface3);color:var(--blue);padding:2px 7px;border-radius:3px;border:1px solid rgba(74,122,255,.2);}

/* RESPONSIVE */
@media(max-width:700px){
  .sidebar{display:none;}
  .hamburger{display:block;}
  main{padding:16px;}
  .kpi-value{font-size:22px;}
  .form-row{grid-template-columns:1fr;}
  .item-stats{grid-template-columns:repeat(2,1fr);}
  #user-email{display:none;}
}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

a.nav-btn{text-decoration:none;}