/* Marca y movimiento compartidos por el sistema y la tienda. */
:root{--ft-surface:#fff;--ft-ink:#18382b;--ft-muted:#68776e;--ft-line:#dfe8e1;--ft-canvas:#f5f7f3;--ft-accent:#15744b;--ft-soft:#e9f4ed;--ft-topbar:84px;--ft-ease:cubic-bezier(.2,.7,.2,1)}
html.dark{--ft-surface:#202620;--ft-ink:#edf5ed;--ft-muted:#b6c5b8;--ft-line:#3a483c;--ft-canvas:#161c18;--ft-accent:#86ddb0;--ft-soft:#253c2e}
body{background:var(--ft-canvas);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
.app-topbar{position:fixed;inset:0 0 auto;z-index:150;height:var(--ft-topbar);display:flex;align-items:center;gap:20px;padding:12px 28px;background:var(--ft-surface);border-bottom:1px solid var(--ft-line);box-shadow:0 3px 18px #17352308}
.ft-brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--ft-ink)}
.ft-brand-logo{width:64px;height:55px;object-fit:contain;flex:none}
.ft-brand-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.ft-brand-name{font-size:21px;font-weight:800;letter-spacing:-.6px;line-height:1.1}
.ft-brand-caption{font-size:12px;color:var(--ft-muted);font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-topbar .ft-brand{flex:1}
.ft-icon-btn,.app-topbar .fab-menu-trigger,.app-topbar .fab-tema-trigger{position:static;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid var(--ft-line);border-radius:13px;background:var(--ft-surface);color:var(--ft-ink);box-shadow:none;flex:none;cursor:pointer}
.ft-icon-btn svg,.app-topbar button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ft-sun{display:none}html.dark .ft-sun{display:block}html.dark .ft-moon{display:none}
html.dark .ft-brand-logo,html.dark .ft-loading-logo{filter:invert(1)}
.main{padding:calc(var(--ft-topbar) + 26px) 28px 28px}
.page-header{padding-inline:0;min-height:48px;margin-bottom:24px}
.page-title{font-size:24px;letter-spacing:-.55px}
.page-title-icon{display:none}
.page-subtitle{color:var(--ft-muted);line-height:1.5}
.mobile-page-title{display:none!important}
.panel-flotante,.submenu-flotante{top:calc(var(--ft-topbar) + 8px);left:24px;max-height:calc(100dvh - var(--ft-topbar) - 28px);border:1px solid var(--ft-line)}
.auth-logo{justify-content:center;text-align:center;flex-direction:column;gap:10px}
.auth-logo .ft-brand-logo{width:156px;height:134px}
.auth-logo h1{display:none}.auth-logo span{color:var(--ft-muted)}
.auth-card{border:1px solid var(--ft-line);box-shadow:0 16px 60px #17352312;border-radius:24px}
.sidebar-logo img{filter:invert(1);width:110px!important;height:auto!important}

/* Una misma cabecera alineada con el menú público. */
body.ft-public{--gray-400:#768378}
.ft-public .header{padding:0;background:var(--ft-surface);color:var(--ft-ink);border-bottom:1px solid var(--ft-line);box-shadow:0 3px 18px #17352308;z-index:100}
.header-inner{width:100%;max-width:1160px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:24px;min-height:84px}
.header-inner .ft-brand{flex:1}
.header-order{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border:1px solid var(--ft-line);background:var(--ft-canvas);border-radius:14px;max-width:55%}
.header-order p{font-size:12px!important;margin:0!important;line-height:1.45;overflow-wrap:anywhere;color:var(--ft-ink);opacity:1!important}
.ft-public .cambiar-tipo-btn{background:var(--ft-surface);color:var(--ft-ink);border:1px solid var(--ft-line);border-radius:9px;min-height:38px;padding:9px 12px;font-weight:600;font-size:12px}
.ft-public .layout{max-width:1160px;grid-template-columns:minmax(0,1fr) 350px;gap:24px;padding:28px 20px}
.ft-public .pedido-columna{top:110px}.ft-public .pedido-footer{max-width:1160px}
.ft-public .paso-badge{background:var(--ft-soft);color:var(--ft-accent);letter-spacing:.06em;font-size:10px;padding:5px 10px}
.ft-public .crea-card{display:block;width:100%;text-align:left;color:#fff;background:#173d2b;border:1px solid #28553d;border-radius:20px;padding:26px;margin-bottom:24px;cursor:pointer;box-shadow:0 8px 24px #173d2b14}
.crea-card-tag{display:inline-block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:#b7e6c6}
.crea-card-title{display:block;font-size:27px;font-weight:700;letter-spacing:-.7px;margin-top:10px}
.crea-card-description{display:block;font-size:14px;line-height:1.6;color:#d2e4d7;margin-top:7px;max-width:330px}
.crea-card-cta{display:inline-block;margin-top:20px;padding:11px 16px;border-radius:10px;background:#ecf7e8;color:#173d2b;font-size:13px;font-weight:700}
.ft-public .carrito,.ft-public .armador-panel,.ft-public .producto-card{box-shadow:0 3px 12px #17352308}
.ft-public .producto-card.selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green-light)}
html.dark body.ft-public{--gray-50:#161c18;--gray-100:#252e27;--gray-200:#3a483c;--gray-400:#b6c5b8;--gray-600:#c6d4c8;--gray-900:#edf5ed;--green:#86ddb0;--green-mid:#238a58;--green-light:#253c2e;--red:#ff9c95;--red-light:#472825;color-scheme:dark}
html.dark .ft-public :is(.carrito,.carrito-header,.carrito-item,.carrito-footer,.armador-panel,.seccion-armador-box,.tipo-btn,.producto-card,.combi-card-ped,.exito-card,.ci-qty button,.ci-edit,.btn-agregar-vaso){background:var(--ft-surface);color:var(--ft-ink);border-color:var(--ft-line)}
html.dark .ft-public #toast{background:var(--ft-ink);color:var(--ft-surface)}
html.dark .ft-public :is(.field input,.field textarea){background:var(--ft-canvas);color:var(--ft-ink)}
html.dark .ft-public :is(.btn-pedido,.btn-nuevo){background:#18794c;color:white}
html.dark .ft-public .producto-card.selected{background:var(--ft-soft);border-color:var(--ft-accent)}
html.dark .ft-public .crea-card{background:#183c2a;color:#fff}

/* Respuestas suaves, sin bloquear clics ni esperar a que termine la animación. */
button,[role=button],.producto-card,.tipo-btn,.destino-btn{transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s var(--ft-ease)}
button:active:not(:disabled),[role=button]:active,.producto-card:active{transform:scale(.975)}
@media(hover:hover){button:hover:not(:disabled),.producto-card:hover{filter:brightness(1.025)}.ft-icon-btn:hover,.app-topbar button:hover{background:var(--ft-soft)}}
button:focus-visible,[role=button]:focus-visible,.producto-card:focus-visible{outline:3px solid var(--ft-accent);outline-offset:3px}
.page.active,#pantalla-principal,#pantalla-tipo-pedido,#pantalla-exito{animation:ft-appear .22s ease both}
.modal-overlay.open .modal{animation:ft-dialog .2s var(--ft-ease) both}
.carrito-item{animation:ft-appear .18s ease}
@keyframes ft-appear{from{opacity:.35}to{opacity:1}}
@keyframes ft-dialog{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes ft-turn{to{transform:rotate(360deg)}}
@keyframes ft-progress{from{transform:translateX(-100%)}to{transform:translateX(330%)}}
.ft-loading[hidden]{display:none!important}
.ft-loading{position:fixed;left:0;right:0;top:var(--ft-topbar);z-index:180;pointer-events:none;display:flex;justify-content:center;padding-top:12px}
.ft-loading-card{display:flex;align-items:center;gap:10px;background:var(--ft-surface);color:var(--ft-ink);border:1px solid var(--ft-line);border-radius:14px;padding:12px 18px;box-shadow:0 6px 22px #15382616;font-size:13px;font-weight:600}
.ft-loading-logo{display:none}.ft-loading-spinner{display:inline-block;width:19px;height:19px;flex:none;border:2px solid var(--ft-line);border-top-color:var(--ft-accent);border-radius:50%;animation:ft-turn .85s linear infinite}
.ft-loading-track{position:absolute;top:0;left:0;width:100%;height:3px;overflow:hidden;background:var(--ft-soft)}
.ft-loading-track:after{content:'';display:block;width:30%;height:100%;background:var(--ft-accent);animation:ft-progress 1.25s ease-in-out infinite}
.ft-loading-screen{inset:0;background:var(--ft-canvas);align-items:center;z-index:950;pointer-events:auto;padding:24px}
.ft-loading-screen .ft-loading-card{flex-direction:column;gap:20px;border:0;box-shadow:none;background:none;padding:32px;text-align:center}
.ft-loading-screen .ft-loading-logo{display:block;width:150px;height:130px;object-fit:contain}
.ft-loading-screen .ft-loading-track{top:auto;bottom:0}
.ft-inline-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:36px 18px;color:var(--ft-muted);font-size:13px;grid-column:1/-1}
#pantalla-carga{color:var(--ft-muted)}
@media(max-width:768px){
 :root{--ft-topbar:76px}.app-topbar{padding:10px 14px;gap:12px}.ft-brand-logo{width:48px;height:42px}.ft-brand{gap:9px}.ft-brand-name{font-size:19px}.ft-brand-caption{font-size:11px}
 .main{padding:calc(var(--ft-topbar) + 20px) 16px 24px}.page-header{padding:0;gap:12px}.page-header .page-title{display:block;font-size:23px}.page-header .page-title-icon{display:none}.page-header>:not(:first-child){width:100%}
 .panel-flotante,.submenu-flotante{left:12px;right:12px;top:calc(var(--ft-topbar) + 8px)}
 .header-inner{gap:12px;padding:12px 16px;flex-wrap:wrap}.header-order{order:3;max-width:none;width:100%;justify-content:space-between;padding:7px 8px 7px 12px}.header-order p{flex:1}.header-inner .ft-brand{min-width:180px}
 .ft-public .layout{grid-template-columns:1fr;padding:22px 16px;gap:24px}.ft-public .pedido-columna{position:static}.ft-public .pedido-footer{margin-top:12px}
 .ft-loading-card{max-width:calc(100vw - 32px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active:not(:disabled),[role=button]:active,.producto-card:active{transform:none}}
@media print{.app-topbar,.header,.ft-loading{display:none!important}.main{padding:0}}