/* ROKA 2026 — capa de interfaz unificada. Mantener después de hojas heredadas. */
:root{--roka-navy:#082F61;--roka-navy-2:#0B467E;--roka-red:#FF1735;--roka-yellow:#FFCB05;--roka-bg:#F5F8FC;--roka-surface:#fff;--roka-text:#172033;--roka-muted:#64748b;--roka-border:#DFE7F1;--roka-radius:16px;--roka-shadow:0 8px 26px rgba(8,47,97,.09);--roka-burgundy:#082F61;--roka-burgundy-2:#0B467E;--roka-gold:#FFCB05;--roka-cream:#fff;--roka-ink:#172033;--roka-red-hover:#D90E2A}
html{accent-color:var(--roka-red);scroll-padding-top:80px}body{background:#F5F8FC;color:var(--roka-text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}img{max-width:100%}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #FFCB05!important;outline-offset:3px}
.roka-card,.roka-commerce-card,.order-card,.metric,.roka-internal .bg-white.rounded-lg.shadow,.roka-admin-panel .bg-white.rounded-lg.shadow{border:1px solid var(--roka-border)!important;border-radius:16px!important;background:#fff;box-shadow:var(--roka-shadow)!important}
.roka-primary,.roka-cta-primary,.roka-checkout-cta,.btn-verde,.btn-primary,button.bg-green-600,a.bg-green-600{background:#FF1735!important;border-color:#FF1735!important;color:#fff!important;border-radius:14px!important;min-height:46px;font-weight:800;box-shadow:0 8px 20px rgba(255,23,53,.16)!important}
.roka-primary:hover,.roka-cta-primary:hover,.btn-verde:hover,.btn-primary:hover{background:#D90E2A!important}
.roka-secondary{border-radius:14px!important;border:1px solid var(--roka-border)!important;background:#fff!important;color:var(--roka-navy)!important;min-height:44px}
.roka-page-cart input:not([type=radio]):not([type=checkbox]),.roka-page-checkout input:not([type=radio]):not([type=checkbox]),.roka-page-checkout textarea,.roka-page-checkout select{border-radius:12px!important}
.roka-page-cart input[type=radio],.roka-page-checkout input[type=radio]{accent-color:#FF1735}
.roka-page-merchant #productos-grid>div,.roka-page-catalog #comercios-grid>a{border-radius:16px!important;overflow:hidden}
.roka-header,header.roka-header,.rider-top{background:linear-gradient(120deg,#082F61,#0B467E)!important;color:#fff!important;box-shadow:0 8px 22px rgba(8,47,97,.14)!important}
.rider-top .icon-btn{border-color:rgba(255,255,255,.3)!important;color:#fff!important}.rider-brand span{color:#FFCB05!important}
.rider-tab.active{background:#082F61!important;color:#fff!important;border-color:#082F61!important}.metric strong,.order-id{color:#082F61!important}.order-head{background:#F5F8FC!important;border-color:#DFE7F1!important}
.roka-sidebar,aside.roka-sidebar{background:#082F61!important}.roka-sidebar .active,.roka-sidebar [aria-current=page]{background:rgba(255,255,255,.13)!important;color:#FFCB05!important}
.roka-page-cart .bg-green-600:not(button),.roka-page-checkout .bg-green-600:not(button){background:#082F61!important}
.roka-internal main,.roka-admin-panel main,.roka-rider-panel main{min-width:0}
.roka-ui table,.roka-admin-panel table{border-collapse:separate;border-spacing:0}table.dataTable thead th{background:#F0F5FB;color:#082F61}
.roka-page-home .home-nav{background:#fff!important;border-bottom:1px solid #DFE7F1}
.roka-state,.rider-empty{border:1px dashed #C8D7E9!important;background:#fff!important;border-radius:16px!important}
button:disabled,[aria-disabled=true]{opacity:.55;cursor:not-allowed;box-shadow:none!important}
@media(max-width:640px){.roka-page-cart main,.roka-page-checkout main,.roka-page-merchant main{padding-inline:12px!important}.roka-card,.order-card{border-radius:15px!important}.rider-summary{gap:8px!important}.rider-summary .metric{padding:10px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Etapa cliente: navegación, tarjetas, detalle, carrito y checkout. */
.roka-page-merchant>div:first-of-type,.roka-page-cart>div:first-of-type,.roka-page-checkout>div:first-of-type{background:#fff!important;border-bottom:1px solid var(--roka-border);box-shadow:0 4px 18px rgba(8,47,97,.06)!important}
.roka-page-merchant>div:first-of-type>div,.roka-page-cart>div:first-of-type>div,.roka-page-checkout>div:first-of-type>div{min-height:68px}
.roka-page-merchant h1,.roka-page-cart h1,.roka-page-checkout h1{color:var(--roka-navy)!important;font-weight:850!important;letter-spacing:-.025em}
.roka-page-merchant .comercio-card{border:1px solid var(--roka-border)!important;border-radius:20px!important;box-shadow:var(--roka-shadow)!important;background:#fff}
.roka-page-merchant .comercio-media{border-radius:16px!important;overflow:hidden;background:#EFF4FA}
.roka-page-merchant .comercio-media img{object-fit:cover}
.roka-page-merchant #productos-grid{gap:12px!important}
.roka-page-merchant #productos-grid>div{border-radius:17px!important;overflow:hidden;background:#fff;box-shadow:0 5px 18px rgba(8,47,97,.07)!important;border:1px solid var(--roka-border)!important}
.roka-page-merchant #productos-grid img{object-fit:cover}
.roka-page-merchant #modal-detalle-producto>div{border-radius:22px!important;max-height:calc(100dvh - 30px);overflow:auto}
.roka-page-merchant #detalle-producto-precio,.roka-page-cart #total,.roka-page-checkout #resumen-total{color:var(--roka-navy)!important;font-weight:900}
.roka-page-merchant #detalle-producto-btn{min-height:48px}
.roka-page-cart #lista-productos,.roka-page-cart #carrito-lleno>.bg-white,.roka-page-checkout .bg-white.rounded-lg.shadow{border:1px solid var(--roka-border)!important;border-radius:17px!important;box-shadow:0 5px 18px rgba(8,47,97,.06)!important}
.roka-page-cart label:has(input[name="tipo-entrega"]){border:1px solid var(--roka-border);border-radius:13px;padding:14px;min-height:56px;gap:8px;background:#fff}
.roka-page-cart label:has(input[name="tipo-entrega"]:checked){border-color:var(--roka-red);background:#FFF8F9}
.roka-page-cart #carrito-vacio{background:#fff;border:1px dashed var(--roka-border);border-radius:20px;padding:40px 16px}
.roka-page-checkout #seccion-ubicacion{border-color:var(--roka-border)!important}
.roka-page-checkout #map-iframe{border:0;border-radius:14px}
.roka-page-checkout #btnRealizarPedido,.roka-page-cart button[onclick="confirmarPedido()"]{min-height:54px;font-size:1.03rem;border-radius:15px!important}
.roka-page-checkout .bg-green-600:not(button){background:var(--roka-navy)!important}
.roka-page-checkout input:focus,.roka-page-checkout textarea:focus{border-color:var(--roka-navy)!important;box-shadow:0 0 0 3px rgba(8,47,97,.12)!important}
.roka-flow-step{display:flex;align-items:center;justify-content:center;gap:9px;max-width:672px;margin:12px auto 0;padding:0 16px;color:#64748b;font-size:.75rem;font-weight:750}
.roka-flow-step span{display:flex;align-items:center;gap:6px;white-space:nowrap}.roka-flow-step b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#E6EEF7;color:#082F61;font-size:.7rem}.roka-flow-step .current b{background:#FF1735;color:#fff}.roka-flow-step .complete b{background:#082F61;color:#fff}.roka-flow-step i{height:1px;flex:1;min-width:6px;background:#D7E2EF}
@media(max-width:390px){.roka-flow-step{font-size:.67rem;gap:5px;padding-inline:10px}.roka-flow-step span{gap:4px}.roka-flow-step b{width:22px;height:22px}}

/* Etapa 3: operaciones — administrador/comercio y rider, sin alterar lógica. */
body.roka-ops-admin,body.roka-ops-rider{background:var(--roka-bg)!important;color:var(--roka-text)}
.roka-ops-admin>header{background:#fff!important;border-bottom:1px solid var(--roka-border)!important;box-shadow:0 4px 18px rgba(8,47,97,.06)!important}
.roka-ops-admin>header h1,.roka-ops-admin main h1,.roka-ops-admin main h2{color:var(--roka-navy)!important;letter-spacing:-.025em}
.roka-ops-admin .tab-active{background:var(--roka-navy)!important;color:#fff!important;border-color:var(--roka-navy)!important;box-shadow:0 6px 16px rgba(8,47,97,.14)!important}
.roka-ops-admin .tab-inactive{background:#fff!important;color:var(--roka-navy)!important;border-color:var(--roka-border)!important}
.roka-ops-admin .tab-active,.roka-ops-admin .tab-inactive{min-height:44px;border-radius:12px!important}
.roka-ops-admin .rounded-xl.shadow-sm,.roka-ops-admin .rounded-xl.shadow-2xl{border:1px solid var(--roka-border)!important;border-radius:18px!important;box-shadow:var(--roka-shadow)!important}
.roka-ops-admin table{width:100%;font-variant-numeric:tabular-nums}
.roka-ops-admin table thead{background:#F0F5FB!important;color:var(--roka-navy)!important}
.roka-ops-admin table tbody tr:hover{background:#F8FAFD}
.roka-ops-admin button:not(:disabled){transition:background-color .18s ease,box-shadow .18s ease}
.roka-ops-admin input,.roka-ops-admin select,.roka-ops-admin textarea{max-width:100%;border-radius:11px}
.roka-ops-admin .text-green-700:not(.badge),.roka-ops-admin .text-green-600:not(.badge){color:var(--roka-navy)!important}
.roka-ops-rider .rider-shell{max-width:780px}
.roka-ops-rider .rider-top{background:linear-gradient(125deg,#082F61,#0B467E)!important;color:#fff!important}
.roka-ops-rider .rider-summary .metric{background:#fff!important;border:1px solid var(--roka-border)!important;box-shadow:var(--roka-shadow)!important}
.roka-ops-rider .rider-tab{border-color:var(--roka-border)!important;color:var(--roka-navy)!important}
.roka-ops-rider .rider-tab.active{background:var(--roka-navy)!important;color:#fff!important}
.roka-ops-rider .order-card{border-color:var(--roka-border)!important;border-radius:19px!important;box-shadow:var(--roka-shadow)!important}
.roka-ops-rider .order-head{background:#F2F6FC!important;border-color:var(--roka-border)!important}
.roka-ops-rider .order-actions button{min-height:44px;border-radius:12px!important;font-weight:750}
.roka-ops-rider .rider-empty{background:#fff!important;color:var(--roka-muted)!important}
@media(max-width:640px){.roka-ops-admin main{min-width:0}.roka-ops-admin table{font-size:.82rem}.roka-ops-admin .overflow-x-auto{overscroll-behavior-x:contain}.roka-ops-rider .rider-top{padding-top:max(14px,env(safe-area-inset-top))}}