/* Shared working surfaces. Operational status colors remain in their modules. */
:root {
  --bg-canvas:#1b1b1a; --bg-surface:#252523; --bg-highlight:#32312e;
  --border-dim:#44423e; --border-light:#65615a;
  --txt-main:#f4f1eb; --txt-dim:#c1bcb3; --txt-dark:#a39c91;
  --accent:#c3b29a; --accent-glow:transparent;
  --font-ui:'Manrope',system-ui,sans-serif;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-data:'Manrope',system-ui,sans-serif;
}
body,html.is-web-shell body {background:var(--bg-canvas)!important}
html.is-web-shell body::before {display:none}
#app-shell #top-bar {background:var(--bg-surface)!important;box-shadow:none!important;border-color:var(--border-dim)!important;border-radius:12px!important}
#top-bar #page-title {letter-spacing:.04em!important;font-size:.85rem!important}
#app-shell #top-bar{padding-left:max(12px,var(--safe-area-left,0px))!important;padding-right:max(12px,var(--safe-area-right,0px))!important;gap:8px!important}
#app-shell #header-title{flex:0 1 auto!important;min-width:0;max-width:26%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.035em;font-size:.78rem}
#app-shell #header-actions{display:flex!important;flex:1 1 0!important;min-width:0!important;max-width:100%;gap:6px!important;overflow:visible!important;justify-content:flex-end!important}
#app-shell #header-actions #operator-chip{flex:0 1 auto!important;min-width:44px!important;max-width:160px!important;overflow:hidden!important}
#app-shell #header-actions #operator-chip span{display:inline-block!important;min-width:0;max-width:100%!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app-shell #header-actions #operator-chip{margin-left:0!important;min-height:44px!important}
#app-shell #header-actions #role-chip{flex:0 0 44px!important;width:44px!important;min-width:44px!important;padding:0!important;justify-content:center!important}
#app-shell #header-actions #role-chip span{display:none!important}
#app-shell #header-actions #cloud-sync-chip{position:static!important;inset:auto!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important}
#app-shell #header-actions #ra-help{flex:0 0 auto;min-height:44px;margin:0;padding:6px 10px;white-space:nowrap;border-radius:8px;background:transparent;color:var(--txt-main);border-color:var(--border-light)}
@media(max-width:600px){#app-shell #header-actions #operator-chip{max-width:110px!important}#app-shell #header-title{max-width:22%;font-size:.72rem}#app-shell #top-bar{gap:6px!important}#app-shell #header-actions{gap:4px!important}}
#viewport .rh {font-family:var(--font-ui);padding-top:24px}
#viewport .rh-hero {background:var(--bg-surface)!important;min-height:156px!important;border-radius:12px!important;box-shadow:none!important;border:1px solid var(--border-dim);padding:24px!important}
#viewport .rh-hero::before,#viewport .rh-hero::after {display:none!important}
#viewport .rh-biz {font-family:var(--font-ui)!important;font-size:clamp(1.4rem,2.7vw,2rem);font-weight:800;line-height:1.2}
#viewport .rh-eye {font-family:var(--font-ui)!important;letter-spacing:.09em;font-size:.68rem}
#viewport .rh-sec {font-family:var(--font-ui)!important;font-weight:800;letter-spacing:0!important;font-size:.94rem;padding-left:0;margin-top:28px}
#viewport .rh-sec::before {display:none}
#viewport .rh-card,#viewport .rh-kpi {background:var(--bg-surface)!important;box-shadow:none!important;border:1px solid var(--border-dim)!important;border-radius:12px!important}
#viewport .rh-kpi {padding:20px!important}
#viewport .rh-kv {font-family:var(--font-ui)!important;font-variant-numeric:tabular-nums;font-size:1.9rem;font-weight:800;letter-spacing:-.04em}
#viewport .rh-kv.gold {color:var(--accent)!important}
#viewport .rh-kl {font-family:var(--font-ui)!important;letter-spacing:.045em;font-size:.69rem}
#viewport .rh-kbar {display:none}
#viewport .rh-empty {color:var(--txt-dim);line-height:1.7}
.gestion-tile,.biz-card {box-shadow:none!important}
.ra-help {position:static;flex-shrink:0;min-height:36px;margin-left:8px;box-shadow:none;font-size:.72rem;white-space:nowrap}
.ra-demo #cloud-sync-chip {display:flex!important}
.ra-demo-banner {position:static;width:auto;margin:12px 16px 0;padding:10px 14px;background:#283b2e;color:#dcecd4;border-color:#526b4b;box-shadow:none;flex-wrap:wrap}
.ra-demo-banner button {background:#b5d4a3;color:#162414;min-height:38px}
#auth-screen {background:#17211c!important;overflow-y:auto;justify-content:flex-start;padding:clamp(24px,5vh,56px) 24px 32px}
#auth-screen .auth-logo {width:76px!important;border-radius:0!important;box-shadow:none!important;margin-bottom:16px!important}
.auth-intro-title {font:800 clamp(1.6rem,3.2vw,2.6rem)/1.15 var(--font-ui);max-width:520px;text-align:center;letter-spacing:-.045em;margin:18px 0 16px;color:#f1f4ec}
.auth-intro-copy {max-width:440px;text-align:center;color:#b9c8bb;font-size:.9rem;line-height:1.7;margin:0 0 24px}
#auth-screen .auth-buttons {max-width:390px;width:100%;gap:10px}
#auth-screen .auth-btn {min-height:48px;border-radius:10px;box-shadow:none}
#auth-screen .auth-btn--demo {background:#b5d4a3!important;color:#132010!important;border:0;font-weight:800;margin-bottom:8px}
#auth-screen .auth-seal-line {letter-spacing:.1em;font-size:.62rem;color:#b9c8bb}
#auth-screen .auth-footer {margin-top:22px}
@media(max-width:600px) {
  #viewport .rh {padding:16px 12px 32px}
  #viewport .rh-hero {padding:18px!important;min-height:142px!important}
  #viewport .rh-kpi {padding:15px!important}
  .ra-help {padding:6px 9px;min-height:36px;margin-left:4px}
  .ra-demo-banner {margin:10px 12px 0;font-size:.72rem}
  #auth-screen .auth-logo {width:60px!important}
}

/* Working modules share quiet surfaces and readable, stable controls. */
#viewport :is(.tech-card,.fx-card,.fin-card,.gestion-tile,.biz-card){background:var(--bg-surface)!important;background-image:none!important;border:1px solid var(--border-dim)!important;border-radius:12px!important;box-shadow:none!important;filter:none!important}
#viewport :is(.tech-card,.fx-card,.gestion-tile):hover{box-shadow:none!important;transform:none!important}
#viewport :is(.btn-arch,.btn-primary,button.primary){min-height:44px;white-space:normal;overflow-wrap:anywhere;letter-spacing:0!important;font-weight:700;box-shadow:none!important;transform:none!important;background-image:none!important;transition:background-color .15s ease,border-color .15s ease!important}
#viewport :is(.btn-arch.primary,.btn-primary,button.primary){background:#d7c8b1!important;color:#25211c!important}
#viewport :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){box-sizing:border-box;max-width:100%;min-width:0;font-size:16px;line-height:1.4;min-height:44px}
#viewport :is(.biz-hero-row,.fin-toolbar,.fin-actions){flex-wrap:wrap;gap:12px}
#viewport :is(.biz-hero-row,.fin-toolbar)>*{min-width:0;max-width:100%}
#viewport :is(.biz-help,.fin-row-meta,.empty-state,.fin-empty){color:var(--txt-dim);line-height:1.6;overflow-wrap:anywhere}
#viewport :is(.biz-field,.fin-field,.fin-mini-field){min-width:0}
#viewport :is(h1,h2,h3,.section-title,.page-title){text-wrap:balance;overflow-wrap:anywhere}
#viewport :is(.fin-grow,.fin-row-title,.biz-docs-main){min-width:0;overflow-wrap:anywhere}
#viewport :is(.chip,.pill,.ztab.on){box-shadow:none!important}
#viewport .view.fade-in{animation:none!important}
#app-shell #header-actions #operator-chip{background:#34332f!important;border-color:var(--border-light)!important;border-radius:8px!important;color:var(--txt-main)!important}
#app-shell #header-actions #role-chip{background:transparent!important;border-color:var(--border-light)!important;border-radius:8px!important}
.ra-demo-banner{background:#292824;color:#f4f1eb;border-color:var(--border-light)}
.ra-demo-banner button,#auth-screen .auth-btn--demo{background:#d7c8b1!important;color:#25211c!important}
#auth-screen{background:var(--bg-canvas)!important}
@media(max-width:600px){
  #viewport{padding-left:12px;padding-right:12px;padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important}
  #viewport :is(.biz-grid,.fin-payment-grid){grid-template-columns:1fr!important}
  #viewport :is(.biz-hero-row,.fin-toolbar)>.btn-arch{flex:1 1 140px}
}
@media(prefers-reduced-motion:reduce){#viewport *,#app-shell #top-bar *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
#viewport .finance-view .fin-category-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#viewport .finance-view .fin-category-row .chip{width:100%;min-height:44px;justify-content:center;border-radius:8px;font-weight:600;white-space:normal}
#viewport .finance-view .fin-title{font-weight:750;letter-spacing:.02em}
#viewport .finance-view .fin-section-title{font-weight:750;line-height:1.4}
@media(max-width:600px){#viewport .finance-view .fin-category-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
#viewport :is(#crm-tabs,.register-tabs){display:flex;flex-wrap:wrap;overflow:visible!important;gap:8px}
#viewport :is(#crm-tabs,.register-tabs) .chip{min-height:44px;border-radius:8px;white-space:normal;font-weight:600;text-align:center;justify-content:center}
#viewport :is(#crm-tabs,.register-tabs,.fin-category-row) .chip.active{background:#3b3730!important;border-color:#84725a!important;color:var(--txt-main)!important}
@media(max-width:600px){#viewport :is(#crm-tabs,.register-tabs){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#viewport :is(#crm-tabs,.register-tabs) .chip{width:100%;margin:0}}
#app-shell #top-bar{display:flex!important}
#app-shell #header-title{text-shadow:none!important;letter-spacing:.035em!important;text-align:left}
@media(min-width:1080px){#app-shell #header-title{max-width:40%;flex:0 1 auto!important}#app-shell #header-actions{flex:1 1 auto!important}}
@media(max-width:600px){#viewport .register-tabs{display:grid!important}}
/* Device management and staff forms stay within narrow working areas. */
#viewport .device-management-view :is(section,article){min-width:0;overflow-wrap:anywhere}
#viewport .device-management-view section>div:first-child{flex-wrap:wrap}
#viewport .device-management-view article>div:first-child>div{flex:1 1 150px}
#viewport .device-management-view article>div:first-child{flex-wrap:wrap}
#viewport .staff-view :is(.staff-rowx,.rep-row){flex-wrap:wrap}
#viewport .staff-view .staff-editor .biz-field>span{font-size:.8rem;color:var(--txt-dim);margin-bottom:5px}
.ra-device-overlay [data-modal-panel]{box-sizing:border-box;background:var(--bg-surface,#252523)!important;color:var(--txt-main,#f4f1eb);border-radius:16px 16px 0 0!important;max-width:100%;padding-top:16px!important}
.ra-device-overlay :is(input:not([type=checkbox]),select,textarea){box-sizing:border-box;max-width:100%;min-width:0;font-size:16px;min-height:44px}
.ra-device-overlay [data-body]{overflow-wrap:anywhere}
.ra-device-overlay button{white-space:normal;min-height:44px}
.ra-device-overlay :focus-visible{outline:2px solid #c3b29a;outline-offset:2px}

#viewport .staff-view .biz-field:has(>input[type=checkbox]){flex-direction:row!important;align-items:center;justify-content:flex-start;gap:10px}
#viewport :is(.staff-view,#dl-root,.device-management-view) :is(.pantry-hero-title,h1,h2,h3){font-weight:650!important;letter-spacing:-.02em}
#viewport :is(.staff-view,#dl-root,.device-management-view) .btn-arch{text-transform:none!important;font-weight:650!important;letter-spacing:0!important}
#staff-save-error,#dl-save-error{padding:12px;border:1px solid #b97864;border-radius:10px;color:#f1baab;line-height:1.5}

#viewport #ops-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible}
#viewport #ops-tabs .chip{white-space:normal;min-height:44px;text-align:center;justify-content:center;border-radius:8px}
@media(max-width:600px){#viewport #ops-tabs{grid-template-columns:1fr}}

@media(max-width:600px){#dl-root .dl-platform-row{display:grid!important;grid-template-columns:20px minmax(0,1fr) 44px!important}#dl-root .dl-platform-row>div{white-space:normal!important;overflow-wrap:anywhere}#dl-root .dl-platform-row>label{grid-column:1/3}#dl-root .dl-platform-row>button{grid-column:3;grid-row:1/3}}

/* Catalog category controls remain readable and keyboard reachable. */
#viewport :is(#food-chips,#drink-cat-scroll){display:flex!important;flex-wrap:wrap;overflow:visible!important;gap:8px!important}
#viewport :is(#food-chips .chip,#drink-cat-scroll .cat-chip-premium){min-height:44px;white-space:normal!important;border-radius:8px!important;font:inherit;font-size:.82rem;box-shadow:none!important;transform:none!important;text-align:left}
#viewport #drink-cat-scroll .cat-chip-icon{display:none}
#viewport :is(.pantry-hero-title,.food-title){font-weight:650!important;text-transform:none!important;letter-spacing:-.02em!important}

.catalog-dialog .modal-card{background:var(--bg-surface,#252523)!important;border:1px solid var(--border-light,#49473f);border-radius:14px!important;max-width:100%;box-sizing:border-box}
.catalog-dialog :is(input:not([type=checkbox]),select,textarea){font-size:16px!important;min-height:44px;min-width:0;max-width:100%;box-sizing:border-box}
.catalog-dialog button{min-height:44px;white-space:normal!important;border-radius:8px!important;box-shadow:none!important}
.catalog-dialog :is(.pantry-form-grid,.form-grid)>*{min-width:0}
.catalog-dialog :focus-visible{outline:2px solid #c3b29a;outline-offset:2px}
@media(max-width:600px){.catalog-dialog .pantry-form-grid{grid-template-columns:1fr!important}}

.catalog-dialog :is(#modal-close,#myfood-close,#mydrink-close){width:auto!important;flex:0 0 auto;min-width:72px;font-weight:600;text-transform:none!important;letter-spacing:0}
.catalog-dialog .pantry-modal-actions{position:static;background:var(--bg-surface,#252523);box-shadow:none}
.catalog-save-error,#set-save-error{padding:10px;border:1px solid #b97864;border-radius:8px;color:#f1baab;line-height:1.5}
#viewport .settings-stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#viewport .settings-stats-row>*{min-width:0}
#viewport .settings-stat-l{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
@media(max-width:360px){#viewport .settings-stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

body.is-ios .catalog-dialog .modal-card{border-radius:14px!important;max-width:100%!important}
body.is-ios .catalog-dialog .modal-card>div:first-child{background:transparent;border-radius:0}
.catalog-dialog .modal-card>div:first-child>div{min-width:0;flex:1}

.catalog-dialog input[type=checkbox]{appearance:checkbox;-webkit-appearance:checkbox;position:static;display:block;opacity:1;visibility:visible;width:24px;height:24px;min-height:24px;flex:0 0 24px;accent-color:var(--accent);clip:auto;clip-path:none}
.catalog-dialog label:has(>input[type=checkbox]){min-height:44px;align-items:center!important}

/* Production actions stay visible beside the batch on narrow screens. */
.ops-production-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.ops-production-toolbar input { max-width:100%; min-width:0; }
@media (max-width: 640px) {
  .ops-production-table, .ops-production-table tbody { display:block; min-width:0!important; }
  .ops-production-table thead { display:none; }
  .ops-production-table tr { display:grid; gap:8px; padding:14px 0; border-bottom:1px solid var(--border-dim); }
  .ops-production-table td { display:block; width:auto!important; padding:0!important; border:0!important; white-space:normal!important; overflow-wrap:anywhere; }
  .ops-production-table td[data-label]::before { content:attr(data-label) ': '; color:var(--txt-dim); }
  .ops-production-table td.ops-production-actions { display:flex; justify-content:flex-start; }
  .ops-production-actions button { white-space:normal; max-width:100%; }
}

/* September owner review: neutral surfaces, readable glass and stable controls. */
#app-shell #top-bar,#app-shell #bottom-dock{background:linear-gradient(125deg,#ffffff14,transparent 48%),#252523db!important;border:1px solid #ffffff30!important;box-shadow:inset 0 1px 0 #ffffff20,0 8px 24px #0003!important;-webkit-backdrop-filter:blur(24px) saturate(100%);backdrop-filter:blur(24px) saturate(100%)}
#app-shell #top-bar{border-radius:0 0 26px 26px!important}
#app-shell #header-actions{justify-content:center!important;align-items:center!important}
#app-shell #header-actions :is(#operator-chip,#role-chip,#ra-help,#cloud-sync-chip){border-radius:999px!important;background:#ffffff0c!important;border:1px solid #ffffff38!important;box-shadow:inset 0 1px 0 #ffffff16!important;min-height:44px!important;height:44px!important}
#app-shell #header-actions #operator-chip{background:#ffffff10!important;max-width:190px!important}
#app-shell #header-actions #cloud-sync-chip{display:flex!important;align-items:center;justify-content:center}
#app-shell #header-actions #cloud-sync-chip-dot{width:9px!important;height:9px!important;box-shadow:0 0 0 5px #ffffff0a}
#app-shell #bottom-dock{border-radius:30px!important}
#app-shell #bottom-nav .nav-item,#app-shell #bottom-nav .nav-item.active{border-radius:24px!important}
#app-shell #bottom-nav .nav-item.active{background:#ffffff1a!important;border-color:#ffffff32!important;color:#fff!important}
#viewport :is(.tech-card,.fx-card,.fin-card,.gestion-tile,.biz-card,.rh-kpi,.rh-card){background:linear-gradient(135deg,#ffffff06,transparent 70%),var(--bg-surface)!important;border-radius:18px!important;border-color:#ffffff1d!important}
#viewport .rh-hero{background:var(--bg-surface)!important;border-radius:24px!important;border-color:#ffffff20!important}
.ra-demo-banner{margin:10px 0!important;background:var(--bg-surface)!important;border-color:var(--border-dim)!important;border-radius:18px;font-size:.8rem;line-height:1.5}
.ra-demo-banner button{border-radius:999px;background:#eeeae3!important;color:#252523!important}
.ra-brand-preview b{border:0!important;border-radius:0!important;border-left:4px solid var(--preview-accent)!important;padding:8px 12px!important;font-size:.85rem;background:transparent!important;cursor:default}
.ra-sample-note{padding:14px;border-radius:14px;background:#ffffff05;border:1px solid #ffffff26;line-height:1.55;font-size:.9rem}
#ra-setup .ra-actions{display:block}#ra-setup .ra-actions button{width:100%;border-radius:999px;background:#eeeae3;color:#252523;min-height:50px}
.ra-workflow{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:24px;margin:14px 0 20px;background:var(--bg-surface);color:var(--txt-main);border:1px solid #ffffff22}
.ra-workflow-copy{position:relative;z-index:1;max-width:740px}
.ra-workflow h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:700;letter-spacing:-.03em;margin:8px 0;line-height:1.2}
.ra-workflow p{max-width:570px;line-height:1.65;color:var(--txt-dim);margin:12px 0 18px;font-size:.9rem}
.ra-workflow .ra-eyebrow{color:var(--txt-dim);font-size:.65rem}
.ra-workflow nav{display:flex;flex-wrap:wrap;gap:8px}
.ra-workflow button{min-height:44px;border-radius:999px;padding:10px 16px;background:#ffffff0d;border:1px solid #ffffff44;color:var(--txt-main);font:600 .82rem var(--font-ui);white-space:normal}
.ra-workflow button[aria-current],.ra-workflow button:hover{background:#eeeae3;color:#252523}

/* One 58px toolbar below the hardware safe area, including landscape cutouts. */
@media(max-width:1079px){
 :root,body.is-ios,html.is-ios,html.is-ios body{--header-height:calc(var(--safe-area-top,0px) + 58px)}
 #app-shell #top-bar{box-sizing:border-box;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;padding-top:var(--safe-area-top,0px)!important;padding-bottom:0!important;height:var(--header-height)!important;min-height:var(--header-height)!important;border-radius:0 0 18px 18px!important}
 #app-shell #header-title{width:auto!important;max-width:21%!important;flex:0 1 auto!important;text-align:left;font-size:.65rem!important;line-height:16px!important;transform:none!important}
 #app-shell #header-actions{width:auto;flex:1 1 0!important;gap:5px!important;justify-content:flex-end!important}
 #app-shell #header-actions #operator-chip{flex:0 1 140px!important;max-width:140px!important;min-width:44px!important;font-size:.78rem!important;padding:6px 9px!important}
 #app-shell #header-actions #ra-help{padding:6px 9px!important;font-size:.75rem!important}
}
@media(max-width:600px){
 .ra-workflow{padding:20px;border-radius:22px}
 .ra-workflow nav{gap:7px}.ra-workflow button{flex:1 1 115px;padding:10px;font-size:.75rem}
}
@supports not (backdrop-filter:blur(1px)){#app-shell #top-bar,#app-shell #bottom-dock{background:#252523!important}}
@media(prefers-reduced-transparency:reduce){#app-shell #top-bar,#app-shell #bottom-dock{background:#252523!important;backdrop-filter:none;-webkit-backdrop-filter:none}}

.ra-workflow-compact{padding:14px 18px;margin-bottom:12px}.ra-workflow-compact :is(.ra-ambient,.ra-eyebrow,h2,p){display:none}.ra-workflow-compact .ra-workflow-copy{max-width:none}
/* Higgsfield atmosphere spans each module; cards remain readable above it. */
#app-shell>#viewport{z-index:1;background:transparent!important}
#app-shell>.ra-ambient{position:absolute;top:var(--header-height);bottom:calc(var(--nav-base-height) + var(--safe-area-bottom,0px));left:var(--safe-area-left,0px);right:var(--safe-area-right,0px);z-index:0;overflow:hidden;pointer-events:none;contain:strict;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.ra-ambient video{display:block;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.55}
.ra-ambient[data-route=finanzas] video,.ra-ambient[data-route=caja] video,.ra-ambient[data-route=business] video{opacity:.3}
.ra-ambient[data-route=menu] video,.ra-ambient[data-route=gestion] video{transform:scaleX(-1)}
@media(min-width:1080px) and (hover:hover) and (pointer:fine){html.is-web-shell #app-shell>.ra-ambient{left:calc(var(--web-gap) + var(--web-rail-width) + 18px);right:var(--web-gap);bottom:0}}
@media(prefers-reduced-motion:reduce){.ra-ambient{display:none}}
@media print{.ra-ambient{display:none}}