/* NOI Bar Control 4.7 · Renovación visual. Interfaz de operaciones, no plantilla.
   Identidad: verde bosque / marfil / cobre. Componentes táctiles y contraste estable. */
:root{
 color-scheme:light;
 --bg:#f4f6f2;--brand:#17392b;--panel:#fff;--panel2:#edf2ed;--line:#dce4dc;
 --text:#17271f;--muted:#607166;--accent:#214c38;--accent-text:#fff;--cream:#fffaf2;
 --brass:#8e673f;--amber:#9d6729;--red:#ac3f4a;--green:#246a48;
 --good-bg:#e8f4eb;--bad-bg:#fbecee;--pending-bg:#fff3e2;--pill-bg:#f0f4f0;--focus:#b77b45;
 --surface-shadow:0 2px 9px rgba(22,51,35,.035),0 12px 28px rgba(22,51,35,.025)
}
html{background:var(--bg)}
body{
 color:var(--text);background:var(--bg);background-image:none;
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 font-size:14px;line-height:1.55;letter-spacing:-.008em;
}
body::before{display:none!important}
body.has-fallback-dialog::before{display:block!important;background:rgba(10,24,16,.58)}
main{background:var(--bg);padding-top:28px}
.content{max-width:1140px}
h1,h2,h3{
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 font-weight:680;letter-spacing:-.045em;line-height:1.2;color:var(--text)
}
h1{font-size:clamp(28px,3vw,38px);margin:0 0 6px}
h2{font-size:clamp(20px,2.4vw,26px)}
h3{font-size:20px}
b,strong{font-weight:650}
.muted,small{color:var(--muted)}
a{color:#215641}
a:hover{color:#0d3522}
.eyebrow{color:#6b826f;font-size:10px;font-weight:750;letter-spacing:1.5px}
.top{padding:4px 0 8px;border:0;background:transparent!important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin-bottom:19px;align-items:center}
.top h1{color:var(--text);font-size:clamp(27px,3vw,36px)}
#subtitle{color:var(--muted);font-size:13px}
.build-stamp{background:#e6ece6;border:0;border-radius:6px;color:#47604e;font-size:10px;vertical-align:middle;padding:3px 8px}
.photo-banner{height:clamp(124px,13.5vw,160px);background:linear-gradient(90deg,rgba(13,34,24,.12),rgba(13,34,24,.06)),url('./assets/noi-barra.webp') center 50%/cover no-repeat;border:0;border-radius:18px;margin:0 0 24px;box-shadow:var(--surface-shadow)}
.sidebar{width:242px;background:#153526;color:#eff6ef;border:0;border-right:1px solid #224b36;box-shadow:none;padding:25px 13px 18px}
.brand{padding:6px 16px 29px}
.sidebar .brand-caption small{color:#b1caba}
.sidebar .brand-caption>span{font-size:10px;letter-spacing:1.7px}
.sidebar .nav{gap:5px}
.sidebar .navbtn{min-height:49px;gap:13px;padding:10px 14px;border:0;border-radius:11px;font-size:14px;font-weight:550;color:#d0ddd1;transition:background-color .15s,color .15s}
.sidebar .navbtn.active{background:#e8f2e9;color:#173b2a;box-shadow:none;border:0;font-weight:750}
.sidebar .navbtn:not(.active):hover{background:#244834;color:#fff}
.sidebar .nav-icon{color:inherit}
.sidebar .sidefoot{border-top:1px solid #335941;color:#a9c5b2;padding-left:16px;font-size:11px}
#syncbar{background:#fff;border:0;border-bottom:1px solid var(--line);color:var(--muted);padding:8px clamp(16px,3.8vw,56px);font-size:11px;gap:10px}
.syncdot{height:7px;width:7px;background:#b68042}
.syncdot.online{background:#268451}
.syncbtn{background:#f3f6f2;color:var(--text);border-color:var(--line);border-radius:10px;padding:7px 11px;min-height:39px;font-size:11px;font-weight:600}
.btn{min-height:44px;border-radius:10px;padding:10px 15px;background:#fff;color:#234434;border:1px solid #d6e0d6;font-size:12px;font-weight:680;box-shadow:none;transition:background-color .15s,border-color .15s,transform .15s}
.btn.primary{background:#214c38;border-color:#214c38;color:#fff;box-shadow:none}
.btn.primary:active{background:#173c2b;color:#fff}
.btn.danger{background:#fff0f1;border-color:#f1c9cf;color:#9a2e3d}
.btn.sm{min-height:40px}
.btn:hover{background:#f3f6f2;border-color:#b9cabc;filter:none}
.btn.primary:hover{background:#173e2b;border-color:#173e2b}
.btn:active,.service-shortcut:active,.tile:active{transform:translateY(1px)}
.field,.filters input,.filters select{background:#fff;color:var(--text);border:1px solid #d5dfd6;border-radius:10px;min-height:46px;font-size:14px;box-shadow:0 1px 0 rgba(0,0,0,.01)}
.field::placeholder{color:#849489}
.field:focus{border-color:#7da28a}
.filters{gap:10px;margin-bottom:18px}
.filters .search{background:#fff}
.stat,.panel,.tile,.readiness-list,.stock,.prep-shortcut,.activity-row,.quick-bottle-card,.prep-recipe-card{
 background:#fff;border:1px solid var(--line);border-radius:15px;
 backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--surface-shadow)
}
.panel{padding:21px}
.stat{padding:19px}
.stat strong{font-weight:730;color:#233b2c;font-size:30px;letter-spacing:-.045em}
.stat span{font-size:11px}
.section-heading{margin:25px 0 12px}
.section-heading h2,.section-heading h3{font-size:20px;font-weight:700}
.stats{gap:10px}
.duo{gap:13px}
.line{border-color:#e9ede7}
.pill{border:0;border-radius:7px;padding:5px 9px;background:#edf2ed;color:#52675a;font-weight:650;font-size:10px;letter-spacing:.005em}
.pill.good{background:var(--good-bg);color:#206a45;border:0}
.pill.bad{background:var(--bad-bg);color:#ac4250;border:0}
.pill.pending{background:var(--pending-bg);color:#95601f;border:0}
.note{color:#758479}
.text-link{color:#24533c;font-weight:700}
.empty{border-radius:14px;border-color:#cbd9ce;background:#fbfdfb;color:#6d8172}
.cards{gap:13px}
.tile{border:1px solid var(--line);padding:14px;gap:9px;min-height:165px;transition:border-color .15s,transform .15s,box-shadow .15s}
.tile h3{font-size:18px;font-weight:720;letter-spacing:-.025em;line-height:1.25}
.tile small{color:#6f8074;font-size:11px}
.tile:hover{border-color:#9fbba7;background:#fff;box-shadow:0 8px 26px rgba(20,55,34,.07)}
.recipe-photo-wrap,.recipe-photo-placeholder{border-radius:12px;background:#f5f6f2}
.recipe-photo{background:#f8f9f6;object-fit:contain}
.recipe-image-label{background:#fffffff0;font-weight:600;font-size:10px}
.recipe-photo-detail{border-radius:12px;border-color:var(--line)}
.stock{padding:14px 16px}
.stock .name{font-size:14px;font-weight:700}
.stock .qty{font-weight:730;font-size:20px;color:#1e402c}
.stock-image-frame{background:#f3f6f1;border:1px solid var(--line);border-radius:11px}
.stock-image-frame .stock-photo-img{background:#fff}
.activity-row{box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
.activity-icon{border-radius:10px;background:#eaf2eb;color:#2b684a}
.modal,#syncDialog{background:#fff;border:1px solid var(--line);color:var(--text);border-radius:18px;box-shadow:0 30px 80px #10241745}
.modal::backdrop,#syncDialog::backdrop{background:#0d241aa3}
.modal .modalheader h3,.modal h3,#syncDialog h3{color:var(--text)}
.modal .close{color:#2c4835}
footer{border-top:1px solid #e1e8e0;margin-top:30px;color:#758579}
footer span{font-family:inherit;font-style:normal;font-size:11px}
.service-overview{background:#183d2d;border:0;border-radius:20px;box-shadow:0 9px 25px #183d2d18;padding:26px}
.service-overline{color:#bfe1c9;font-size:10px;font-weight:750;letter-spacing:1.6px}
.service-overview h2{font-family:inherit;color:#fff;font-weight:750;font-size:clamp(25px,3vw,33px);line-height:1.13;letter-spacing:-.035em}
.service-overview p{color:#d3e1d6;font-size:13px}
.service-pulse{gap:8px}
.service-pulse-card{background:#ffffff0f;border:1px solid #ffffff2d;border-radius:13px;min-height:98px}
.service-pulse-card strong{color:#fff;font-size:clamp(28px,3vw,32px);font-weight:780}
.service-pulse-card span{color:#d9e9de;font-size:11px}
.service-pulse-card.needs-attention strong{color:#ffd4d3}
.service-pulse-card.needs-count strong{color:#f9ddb5}
.service-pulse-card:focus-visible{outline-color:#fff}
.service-shortcuts.service-actions{gap:10px;margin:13px 0 22px}
.service-shortcut,.service-shortcut-accent{background:#fff;border:1px solid var(--line);border-radius:15px;color:var(--text);min-height:84px;padding:14px;box-shadow:var(--surface-shadow)}
.service-shortcut-accent{background:#edf4ed;border-color:#cadfcd}
.service-shortcut strong{color:#223b2c;font-weight:730;font-size:13px}
.service-shortcut small{color:#728276;font-size:11px}
.service-shortcut>.ui-icon:first-child{color:#2b6446}
.service-shortcut>.ui-icon:last-child{color:#7a9b86}
.service-shortcut:hover,.service-shortcut:focus-visible{background:#f4f8f4;border-color:#a7c2ae}
.readiness-list{overflow:hidden}
.readiness-row{border-color:var(--line)}
.readiness-row .name{color:#213d2a;font-weight:690}
.service-pending{background:#fff6e9;border:1px solid #eddab8;border-radius:13px}
.service-pending strong{color:#996228}
.service-pending span{color:#705a40}
.service-pending>.btn{background:#fff}
.today-schedule{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--surface-shadow);color:var(--text);padding:20px 22px}
.today-schedule-kicker{color:#6a8671;font-weight:750}
.today-schedule h2{font-family:inherit;color:#1e3b2b;font-weight:760;font-size:24px;letter-spacing:-.03em}
.today-schedule-count{color:#728177;font-size:12px}
.today-schedule-table{border:1px solid var(--line);border-radius:12px}
.today-schedule-columns{background:#eef3ef;color:#6e806f;font-weight:750}
.today-schedule-row{background:#fff;border-top:1px solid var(--line)}
.today-person{color:#1d3729;font-weight:720}
.today-shift{background:#eaf2e9;color:#2b5b40;border:1px solid #cddfd0;border-radius:7px}
.today-off{color:#91a197}
.today-hours{color:#2a5b40;font-weight:700}
.today-schedule-foot{color:#87958a}
.today-schedule-missing{border-color:#cbd7ce;background:#f9fbf8}
.today-schedule-missing p{color:#637566}
.menu-intro{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px;box-shadow:var(--surface-shadow)}
.menu-intro-eyebrow{color:#698572;font-size:10px;font-weight:750}
.menu-intro-head strong{font-family:inherit;font-size:24px;font-weight:770;color:#1b3627;letter-spacing:-.04em}
.menu-intro-head small{color:#728377}
.menu-intro-head a{color:#285a41;font-weight:600}
.menu-filter-bar{gap:7px}
.menu-filter-btn{background:#f0f4f0;border:1px solid #e0e6df;color:#4e6656;border-radius:10px;font-weight:620}
.menu-filter-btn.selected{background:#214d38;color:#fff;border-color:#214d38}
.menu-recipe-cards .tile .pill.good{background:#e3f2e5;color:#216a40}
.prep-ingredient-link{color:#255b3b;border-bottom-color:#7ba88a}
.prep-ingredient-link:hover{color:#103e28}
.stock-switch{background:#eaf0e9;border:1px solid #dee7dd;border-radius:12px;padding:4px;gap:4px}
.stock-switch-btn{border-radius:9px;color:#546b59;font-weight:630}
.stock-switch-btn.selected{background:#fff;color:#183d2a;box-shadow:0 2px 7px #1d39200d}
.stock-switch-btn span{color:#214d38;background:#dceedd}
.order-summary>div{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--surface-shadow)}
.order-summary strong{color:#224532;font-weight:750}
.order-item{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--surface-shadow)}
.order-item-main>strong{font-weight:720;color:#244030}
.order-notice{background:#fff7e9;border:1px solid #f0d7af;border-left:4px solid #c38b44;border-radius:11px;color:#795b34}
.order-heading{font-family:inherit;font-weight:730;font-size:21px}
.schedule-weekbar{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--surface-shadow)}
.schedule-overline{color:#708777;font-weight:740}
.schedule-weekbar strong{color:#1d3b2b;font-weight:770}
.schedule-employee{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--surface-shadow)}
.schedule-employee>span{color:#627767;font-weight:680}
.schedule-employee strong{color:#244c34;font-weight:770}
.schedule-employee small{color:#809285}
.schedule-help{background:#f0f5f0;color:#657568;border-left:3px solid #8aa994;border-radius:10px}
.schedule-day{background:#fff;border:1px solid var(--line);border-radius:14px}
.schedule-day[open]{border-color:#9bbcaa}
.schedule-day-title{color:#203a29;font-weight:735}
.schedule-day-count{color:#74877a}
.schedule-chevron{color:#3d7551}
.schedule-day-body{border-top:1px solid var(--line)}
.schedule-staff-row{border-bottom:1px solid #edf1eb}
.schedule-staff-name{color:#284534;font-weight:690}
.schedule-shift{background:#e9f2ea;border:1px solid #d2e3d5;border-radius:8px;color:#315d41}
.schedule-free{color:#829388}
.schedule-staff-duration{color:#365945;font-weight:730}
.schedule-day-body h4{color:#526e58;font-weight:750}
.schedule-coverage-row{background:#f4f7f3;border:1px solid #e1e8df;border-radius:8px}
.schedule-coverage-row span{color:#465e4a}
.schedule-coverage-row strong{color:#2c5337;font-weight:720}
.schedule-coverage-row.cover-0{background:#fbeeee}
.schedule-coverage-row.cover-1{border-left:3px solid #e0ad62}
.schedule-coverage-row.cover-2{border-left:3px solid #84b899}
.schedule-coverage-row.cover-3{border-left:3px solid #377853;background:#edf4ed}
.schedule-coverage-row.cover-estimated{background:#fff6e5;border-style:dashed;border-color:#cda46a}
.schedule-coverage-row.cover-estimated strong{color:#966b2e}
.schedule-no-coverage,.schedule-empty p{color:#6b8072}
.quiz-scope-btn{background:#fff;border-color:var(--line);color:#445c48;border-radius:11px}
.quiz-scope-btn.selected{background:#204b35;color:#fff;border-color:#204b35}
.quiz-scope-btn.selected span{color:#1b482f;background:#eff6ef}
.study-panel{background:#fff}
.study-title h3{font-family:inherit;font-size:clamp(25px,4vw,34px);color:#193e2b;font-weight:770;letter-spacing:-.05em}
.study-title p{color:#6c8572}
.study-kicker{color:#6b8e72;font-weight:750}
.study-instruction{color:#65786b}
.study-row{background:#fbfcfa;border:1px solid var(--line);border-radius:11px}
.study-row-number{color:#54785d;font-weight:750}
.study-feedback.ok{color:#216940}
.study-feedback.bad{color:#ab4650}
.study-hint{background:#edf3ed;color:#47644e}
.study-result-ok{background:#eff7ef;border-color:#a8cfb5}
.study-result-error{background:#fff0ee;border-color:#e8b2ac}
.study-solution{background:#f7faf6;border-color:var(--line)}
.study-voice{background:#f5f8f4;border-color:var(--line)}
.study-voice-header small,.study-voice-status{color:#718174}
.quick-capture{background:#f4f8f3}
.quick-bottle-card{background:#fff}
.quick-progress{background:#eaf1e8}
.quick-photo-row{background:#fff;border-color:var(--line)}
.quick-manual{background:#fbfcfa;border-color:#a2bda3}
.quick-summary-line{border-color:var(--line)}
.cocktail-lab-card{background:#f7faf7}
.cocktail-lab-choice{background:#f1f5f0;color:#3c5843;border-color:var(--line);border-radius:9px}
.cocktail-lab-choice.selected{background:#1b4b34;color:#fff}
.cocktail-lab-flair{color:#5e9066}
.modal .cocktail-lab-kicker{color:#708976}
.noi-guide-launch{background:#1d5338;border-color:#1d5338;color:#fff;box-shadow:0 5px 18px #0a34213d}
.noi-guide-dialog,.noi-assistant-results{background:#fff;border:1px solid var(--line);color:var(--text);box-shadow:0 28px 70px #152a1645}
.noi-guide-dialog::backdrop,.noi-assistant-results::backdrop{background:#0d241a94}
.noi-guide-dialog .noi-guide-status{color:#6b8170}
.noi-assistant-hit{background:#f7faf7;color:#244230;border:1px solid var(--line);border-radius:11px}
.noi-assistant-hit small{color:#657b6b}
.noi-assistant-hit:hover,.noi-assistant-hit:focus-visible{border-color:#95b99f;background:#eff7ef}
.access-gate{
 background:linear-gradient(120deg,#091a11b0,#0c2517ab 46%,#08190fce),url('./assets/noi-barra.webp') center/cover no-repeat,#10271a
}
.access-card{background:rgba(17,44,29,.94);border:1px solid #ffffff35;border-radius:20px;box-shadow:0 28px 90px #0007}
.access-content{padding:30px clamp(22px,5vw,34px) 34px}
.access-content h1{font-family:inherit;color:#fff;font-weight:760;font-size:34px;letter-spacing:-.045em}
.access-content p{color:#e0e9df}
.access-overline{color:#d8e6d8;font-weight:730}
.access-buttons .btn.primary{background:#fff;color:#1b3c2b;border-color:#fff;border-radius:11px;font-weight:760}
#syncDialog{background:#fff;color:var(--text)}
@media(max-width:960px){.sidebar{width:208px}.service-shortcuts.service-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){
 main{padding:17px 16px 113px;background:var(--bg)}
 .mobile-brand{display:flex;min-height:69px;gap:14px;padding:10px 17px;padding-top:max(10px,env(safe-area-inset-top));background:#173b2b;color:#fff;border:0;box-shadow:none}
 .mobile-brand .brand-logo{width:74px;height:42px}
 .mobile-brand .brand-caption{gap:2px;border-left:1px solid #ffffff36;padding-left:14px}
 .mobile-brand .brand-caption>span{font-size:9px;letter-spacing:1.45px}
 .mobile-brand .brand-caption small{font-size:10px;color:#c8d9cb}
 .mobile{background:#fff;border-top:1px solid #e0e7e0;box-shadow:0 -6px 26px #233b2a12;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:6px 7px max(9px,env(safe-area-inset-bottom))}
 .mobile .navbtn{min-height:55px;border-radius:11px;padding:7px 2px;gap:5px;font-size:10px;font-weight:650;color:#77887b}
 .mobile .navbtn.active{background:#edf4ed;color:#1c5436;font-weight:770;border:0}
 .mobile .nav-icon{width:21px;height:21px}
 .mobile .ui-icon{width:21px;height:21px;stroke-width:1.9}
 .top{padding:0;margin-bottom:18px}
 .top h1{font-size:29px}
 .tools{gap:7px;margin-top:15px}
 .photo-banner{height:118px;border-radius:15px;margin-bottom:19px}
 .service-overview{padding:20px;border-radius:17px}
 .service-overview h2{font-size:29px}
 .service-pulse-card{min-height:84px}
 .service-shortcuts.service-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service-shortcut{padding:13px;min-height:79px}
 .today-schedule{padding:16px 13px}
 .today-schedule h2{font-size:20px}
 .today-schedule-columns,.today-schedule-row{grid-template-columns:72px minmax(0,1fr) 68px}
 .tile{min-height:155px}
 .panel{padding:17px}
 .noi-guide-launch{right:12px;bottom:calc(86px + env(safe-area-inset-bottom));padding:11px 14px}
}
@media(max-width:490px){
 .photo-banner{height:104px}
 .cards{grid-template-columns:minmax(0,1fr)}
 .tile{grid-template-columns:85px minmax(0,1fr);gap:7px 11px;padding:11px;min-height:145px}
 .tile>.recipe-photo-wrap,.tile>.recipe-photo-placeholder{width:85px;height:113px;min-height:113px}
 .tile h3{font-size:16px;line-height:1.2}
 .tile .pill{font-size:9px;padding:4px 7px}
 .tile .between:last-child small{font-size:10px}
 .service-shortcut strong{font-size:12px}
 .service-shortcut small{font-size:10px}
 .service-shortcut>.ui-icon:first-child{width:23px;height:23px}
 .service-overview h2{font-size:26px}
 .service-pulse-card strong{font-size:26px}
 .today-schedule-head{align-items:flex-start}
 .today-schedule-head .btn{font-size:11px;white-space:normal;padding:8px;min-width:95px}
 .today-schedule-row,.today-schedule-columns{grid-template-columns:65px minmax(0,1fr) 61px;gap:7px}
 .today-shift{padding:4px 5px;font-size:10px}
 .today-person,.today-hours{font-size:11px}
 .stock-switch{width:100%}
 .stock-switch-btn{flex:1;min-width:0;padding:9px 6px;font-size:11px}
 .order-summary>div{padding:13px 8px}
 .order-summary strong{font-size:25px}
 .order-summary span{font-size:10px}
 .order-item{border-radius:13px}
 .schedule-weekbar{padding:14px}
}
@media(max-width:350px){
 .mobile .navbtn{font-size:9px}
 .service-shortcuts.service-actions{gap:7px}
 .service-shortcut{padding:10px}
 .service-shortcut small{display:none}
 .today-schedule-head{flex-wrap:wrap}
}
@media(hover:none){.btn:hover{background:#fff;border-color:#d6e0d6}.btn.primary:hover{background:#214c38;border-color:#214c38}}
@media(prefers-reduced-motion:reduce){.btn,.tile,.service-shortcut,.sidebar .navbtn{transition:none!important}}

/* 4.7.6: readable text on light surfaces and dark actions. */
:root{--muted:#526359}
.prep-inline-section h4,.prep-inline-table td:first-child,.container-stock,
.prep-shortcut-arrow{color:#234434}
.prep-ingredient-link:focus-visible{color:#103e28}
.note,.tile small,.service-shortcut small,.menu-intro-head small,
.schedule-employee small,.schedule-day-count,.schedule-free,
.today-off,.today-schedule-foot,footer,.eyebrow,.today-schedule-kicker,
.menu-intro-eyebrow,.schedule-overline,.study-row-number,
.study-voice-header small,.study-voice-status{color:#526359}
.field::placeholder{color:#637269;opacity:1}
.mobile .navbtn{color:#526359}
.btn.primary:hover,.btn.primary:focus-visible{color:#fff}
.access-buttons .btn.primary:hover,.access-buttons .btn.primary:focus-visible{
 background:#edf4ed;color:#17392b;border-color:#edf4ed
}
.quick-capture-button{background:#214c38;color:#fff}
.prep-shortcut:hover{background:#edf4ed;color:#17271f}