:root {
  --roka-burgundy: #063B73;
  --roka-burgundy-2: #0A4D8C;
  --roka-red: #E30613;
  --roka-red-hover: #B8040E;
  --roka-gold: #FFD500;
  --roka-gold-soft: #FFE45C;
  --roka-cream: #FFFFFF;
  --roka-cream-soft: #F5F9FF;
  --roka-ink: #1a1a1a;
  --roka-surface: #ffffff;
  --roka-muted: #6b7280;
  --roka-border: #D8E3EF;
  --roka-success: #16803b;
  --roka-danger: #b42318;
  --roka-radius: 18px;
  --roka-shadow: 0 12px 32px rgba(48, 0, 0, .12);
}

html { accent-color: var(--roka-red); }
body { color: var(--roka-ink); }
body.roka-ui,
html[data-app-name="Roka Delivery"] body { background-color: #F4F8FC; }

.roka-brand-shell { background: linear-gradient(135deg, var(--roka-burgundy), #0A4D8C 72%, #0E5CA5); color: var(--roka-cream); }
.roka-brand-text { color: var(--roka-red) !important; }
.roka-accent-text { color: var(--roka-gold) !important; }

.btn-verde,.btn-primary,button.bg-green-600,a.bg-green-600,button.bg-blue-600.roka-primary,a.bg-blue-600.roka-primary,.roka-cta-primary,.roka-checkout-cta {
  background: linear-gradient(135deg, var(--roka-red), #e12a18) !important;
  color: #fff !important;
  border-color: var(--roka-red) !important;
  box-shadow: 0 10px 22px rgba(192,16,0,.20) !important;
}
.btn-verde:hover,.btn-primary:hover,button.bg-green-600:hover,a.bg-green-600:hover,.roka-cta-primary:hover,.roka-checkout-cta:hover {
  background: linear-gradient(135deg, var(--roka-red-hover), var(--roka-red)) !important;
  transform: translateY(-1px);
}
.text-green-600,.text-green-500 { color: var(--roka-red) !important; }
.border-green-500 { border-color: var(--roka-red) !important; }
.focus\:border-green-500:focus { border-color: var(--roka-red) !important; }

header.roka-header,.roka-header {
  background: rgba(48,0,0,.97) !important;
  color: var(--roka-cream) !important;
  box-shadow: 0 8px 24px rgba(48, 0, 0, .24);
  backdrop-filter: blur(14px);
}
.roka-header a,.roka-header button { color: var(--roka-cream) !important; }
.roka-header a:hover { color: var(--roka-gold-soft) !important; }
.roka-header h1,.roka-header h2,.roka-header p,.roka-header label,
.roka-header .marketplace-title,.roka-header .marketplace-subtitle {
  color: var(--roka-cream) !important;
}
.roka-header .marketplace-subtitle {
  color: #f7d9a8 !important;
}
.roka-header input,.roka-header textarea,.roka-header select {
  color: var(--roka-ink) !important;
}

.roka-sidebar,aside.roka-sidebar { background: var(--roka-burgundy) !important; color: var(--roka-cream) !important; }
.roka-sidebar a:hover,.roka-sidebar .active,.roka-sidebar [aria-current="page"] { background: rgba(217, 138, 29, .16) !important; color: var(--roka-gold-soft) !important; }

.roka-card,.card.roka-card,.roka-commerce-card {
  background: var(--roka-surface);
  border: 1px solid var(--roka-border) !important;
  border-radius: var(--roka-radius) !important;
  box-shadow: var(--roka-shadow) !important;
}
.roka-commerce-card { transition: transform .2s ease, box-shadow .2s ease; }
.roka-commerce-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(48,0,0,.15) !important; }

input:focus,select:focus,textarea:focus { outline: none; border-color: var(--roka-red) !important; box-shadow: 0 0 0 3px rgba(192, 16, 0, .10) !important; }

.roka-status-pendiente { background:#fff4d6 !important; color:#7a4b00 !important; }
.roka-status-confirmado,.roka-status-preparando { background:#fff0e5 !important; color:#913c00 !important; }
.roka-status-para_entregar { background:#fff3d8 !important; color:#7a4b00 !important; }
.roka-status-en_camino,.roka-status-asignado { background:#fde7e4 !important; color:#B8040E !important; }
.roka-status-entregado { background:#e7f6ec !important; color:#126b34 !important; }
.roka-status-cancelado,.roka-status-anulado_nopago { background:#f0f0f0 !important; color:#5e5e5e !important; }

.roka-logo-lockup { display:inline-flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.04em; }
.roka-logo-lockup img,.roka-logo-lockup svg { width:48px; height:48px; object-fit:contain; }
.roka-logo-lockup .roka-word { color:var(--roka-cream); font-size:1.35rem; }
.roka-logo-lockup .roka-go { color:#ef2b1c; }
.roka-city-pill { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--roka-gold-soft); border:1px solid rgba(241,178,74,.45); background:rgba(241,178,74,.10); padding:5px 8px; border-radius:999px; }

.roka-delivery-rule { border:1px solid rgba(217,138,29,.35); background:#fff8e8; color:#6e4300; border-radius:14px; padding:13px 15px; font-size:.92rem; }
.roka-delivery-rule-strong { display:flex; gap:12px; align-items:flex-start; margin:-8px 0 24px; box-shadow:0 8px 22px rgba(217,138,29,.10); }
.roka-rule-icon { width:38px;height:38px;border-radius:12px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;background:var(--roka-gold);color:#fff; }
.roka-brand-block { background:linear-gradient(135deg,var(--roka-burgundy),#0A4D8C) !important; color:var(--roka-cream) !important; }

/* Home */
.roka-page-home .roka-home-hero {
  background: radial-gradient(circle at 80% 20%, rgba(217,138,29,.16), transparent 30%), linear-gradient(135deg, #F5F9FF 0%, #fff 52%, #f7eee4 100%) !important;
}
.roka-page-home .roka-home-hero h1 { color:var(--roka-burgundy) !important; }
.roka-highlight { color:var(--roka-red); }
.roka-hero-sub { color:var(--roka-ink); font-size:.78em; }
.roka-cta-secondary { background:#fff !important; color:var(--roka-burgundy) !important; border:2px solid var(--roka-gold) !important; }
.roka-hero-brand-card {
  position:relative; overflow:hidden; width:100%; max-width:470px; min-height:500px; padding:34px; border-radius:32px;
  background:linear-gradient(155deg,#032B55 0%,var(--roka-burgundy) 52%,#0A4D8C 100%);
  box-shadow:0 24px 60px rgba(48,0,0,.30); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.roka-hero-brand-card:before { content:"";position:absolute;inset:18px;border:2px solid rgba(217,138,29,.55);border-radius:26px;pointer-events:none; }
.roka-hero-logo { width:min(76%,330px); aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 16px 22px rgba(0,0,0,.28)); z-index:1; }
.roka-hero-card-copy { z-index:1; display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.roka-hero-card-copy strong { color:var(--roka-cream); font-size:1.4rem; }
.roka-hero-card-copy span { color:var(--roka-gold-soft); }
.roka-hero-points { z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
.roka-hero-points span { color:var(--roka-cream); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); border-radius:999px; padding:8px 11px; font-size:.82rem; }
.roka-hero-points i { color:var(--roka-gold-soft); margin-right:5px; }
.roka-promo-strip { background:linear-gradient(100deg,var(--roka-red),#8d0b03 58%,var(--roka-burgundy)) !important; border-top:3px solid var(--roka-gold); border-bottom:3px solid var(--roka-gold); }
.roka-promo-strip i { color:var(--roka-gold-soft) !important; }
.roka-promo-button { color:var(--roka-burgundy) !important; border:2px solid var(--roka-gold) !important; box-shadow:0 8px 20px rgba(0,0,0,.12); }

/* Cart + checkout */
.roka-cart-header { background:linear-gradient(135deg,var(--roka-burgundy),#0A4D8C) !important; color:var(--roka-cream) !important; box-shadow:0 8px 22px rgba(48,0,0,.20) !important; }
.roka-cart-header h1,.roka-cart-header button { color:var(--roka-cream) !important; }
.roka-cart-header > div { flex-wrap:wrap; }
.roka-mini-brand { width:100%; display:flex; justify-content:center; padding-bottom:6px; }
.roka-page-cart #lista-productos > div { background:#fff; }
.roka-page-cart #lista-productos img { border:1px solid var(--roka-border); border-radius:14px !important; }
.roka-summary-card { border-top:4px solid var(--roka-gold) !important; }
.roka-summary-card #total,.roka-summary-card #resumen-total { color:var(--roka-red) !important; font-size:1.55rem !important; }
.roka-page-cart .delivery-options { display:flex !important; flex-direction:column !important; width:100% !important; gap:12px !important; }
.roka-page-cart .delivery-options > .delivery-option { position:relative !important; display:grid !important; grid-template-columns:46px minmax(0,1fr) 24px !important; align-items:center !important; width:100% !important; max-width:none !important; min-height:78px !important; margin:0 !important; padding:13px 15px !important; gap:12px !important; overflow:hidden; box-sizing:border-box; border:1.5px solid #d8e0ea !important; border-radius:15px !important; background:#fff !important; cursor:pointer; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
.roka-page-cart .delivery-option > input { position:absolute !important; width:1px !important; height:1px !important; margin:0 !important; opacity:0 !important; pointer-events:none; }
.roka-page-cart .delivery-option-icon { display:grid !important; place-items:center !important; width:46px !important; height:46px !important; flex:none !important; border-radius:13px; background:#f1f5f9; color:#253246; font-size:1.15rem; }
.roka-page-cart .delivery-option-copy { display:flex !important; flex-direction:column !important; min-width:0 !important; color:#1f2937; line-height:1.25; }
.roka-page-cart .delivery-option-copy strong { display:block; font-size:.98rem; font-weight:800; }
.roka-page-cart .delivery-option-copy small { display:block; margin-top:4px; color:#64748b; font-size:.76rem; line-height:1.35; }
.roka-page-cart .delivery-option-check { display:grid !important; place-items:center !important; width:23px !important; height:23px !important; flex:none !important; border:1.5px solid #cbd5e1; border-radius:50%; background:#fff; color:transparent; font-size:.68rem; }
.roka-page-cart .delivery-option:has(input:checked) { border-color:#ff2038 !important; background:#fff7f8 !important; box-shadow:0 0 0 1px rgba(255,32,56,.08),0 8px 20px rgba(82,12,21,.06) !important; }
.roka-page-cart .delivery-option:has(input:checked) .delivery-option-icon { background:#ffe8ec; color:#ed1733; }
.roka-page-cart .delivery-option:has(input:checked) .delivery-option-check { border-color:#ff2038; background:#ff2038; color:#fff; }
.roka-page-cart .delivery-option:focus-within { outline:3px solid rgba(255,32,56,.16); outline-offset:2px; }
@media (hover:hover) { .roka-page-cart .delivery-option:hover { border-color:#f59aaa !important; transform:translateY(-1px); } }
.roka-checkout-cta { border-radius:14px !important; min-height:52px; }
.roka-order-mode { border-radius:16px !important; box-shadow:var(--roka-shadow); }

/* Auth */
.roka-auth-background { min-height:100vh; background:radial-gradient(circle at top right,rgba(217,138,29,.18),transparent 28%),linear-gradient(145deg,#032B55,var(--roka-burgundy) 58%,#0A4D8C) !important; }
.roka-auth-card { border-radius:22px !important; box-shadow:0 22px 50px rgba(0,0,0,.28) !important; }
.roka-auth-brand { display:flex;align-items:center;justify-content:center;gap:12px;color:var(--roka-cream);margin:0 auto 18px;text-align:left; }
.roka-auth-brand img { width:72px;height:72px; }
.roka-auth-brand strong { display:block;font-size:1.45rem;letter-spacing:-.03em; }
.roka-auth-brand span { display:block;color:var(--roka-gold-soft);font-size:.82rem; }

/* Internal panels: commerce, admin, rider */
body.roka-internal { background:#f6f1ea !important; }
.roka-internal-header {
  background:linear-gradient(110deg,#032B55,var(--roka-burgundy) 58%,#0A4D8C) !important;
  color:var(--roka-cream) !important;
  border-bottom:3px solid var(--roka-gold);
  box-shadow:0 10px 28px rgba(48,0,0,.22) !important;
}
.roka-internal-header h1,.roka-internal-header p,.roka-internal-header a,.roka-internal-header button { color:inherit !important; }
.roka-internal-header .text-red-500 { color:#fff !important; border-color:rgba(255,255,255,.28) !important; }
.roka-internal-brand { display:inline-flex;align-items:center;gap:11px;text-decoration:none; }
.roka-internal-brand img { width:72px;height:72px;object-fit:contain; }
.roka-internal-brand > span { display:flex;flex-direction:column;line-height:1; }
.roka-internal-brand strong { color:var(--roka-cream);font-size:1.35rem;letter-spacing:-.045em; }
.roka-internal-brand strong span { color:#ef2b1c; }
.roka-internal-brand small { margin-top:6px;color:var(--roka-gold-soft);font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800; }

.roka-internal-summary,.roka-internal-panel {
  background:#fff !important;
  border:1px solid var(--roka-border) !important;
  border-radius:20px !important;
  box-shadow:0 10px 28px rgba(48,0,0,.08) !important;
}
.roka-internal-summary { border-top:4px solid var(--roka-gold) !important; }
.roka-internal-panel { overflow:hidden; }
.roka-internal-panel > .px-6.py-4,.roka-internal-panel > .p-4:first-child { background:linear-gradient(180deg,#fff,#fffaf3); }
.roka-section-heading:before { content:"ROKA DELIVERY";display:inline-block;margin-bottom:5px;color:var(--roka-red);font-size:.68rem;font-weight:900;letter-spacing:.16em; }

.roka-internal-tabs,.roka-admin-nav { gap:8px !important; border-bottom:0 !important; padding:8px !important; border-radius:16px; background:#eee5da; }
.roka-internal-tabs button,.roka-admin-nav a { border-radius:12px !important; padding:10px 14px !important; transition:.18s ease; }
.roka-internal-tabs .tab-active,.roka-admin-nav .tab-active { background:var(--roka-burgundy) !important;color:var(--roka-cream) !important;box-shadow:0 6px 15px rgba(48,0,0,.16) !important;border-color:var(--roka-burgundy) !important; }
.roka-internal-tabs .tab-inactive,.roka-admin-nav .tab-inactive { background:#fff !important;color:#5c463a !important;border-color:#e6d8ca !important; }
.roka-admin-nav a:hover,.roka-internal-tabs button:hover { transform:translateY(-1px);border-color:var(--roka-gold) !important; }

.roka-kpi-card {
  position:relative;overflow:hidden;background:#fff !important;border:1px solid var(--roka-border) !important;border-radius:16px !important;box-shadow:0 7px 20px rgba(48,0,0,.07) !important;min-height:86px;
}
.roka-kpi-card:after { content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--roka-gold); }
.roka-kpi-card .estado-value { color:var(--roka-burgundy) !important; }

.roka-table { width:100%;border-collapse:separate !important;border-spacing:0; }
.roka-table-head,.roka-table thead { background:#f7eee5 !important; }
.roka-table thead th { color:#5b4032 !important;border-bottom:1px solid #e8d8c8 !important;font-size:.72rem !important;text-transform:uppercase;letter-spacing:.045em; }
.roka-table tbody tr { transition:background .15s ease; }
.roka-table tbody tr:hover { background:#fffaf3 !important; }
.roka-table td { border-bottom-color:#f1e7dc !important; }
.roka-filter-control { border:1px solid #decdbd !important;border-radius:11px !important;background:#fff !important;min-height:40px; }

.roka-admin-panel main { background:linear-gradient(180deg,#f9f5ef,#f4eee7); }
.roka-admin-panel footer,.roka-internal-footer { background:var(--roka-burgundy) !important;color:var(--roka-cream) !important;border-color:#0A4D8C !important; }
.roka-internal-footer a,.roka-internal-footer p { color:var(--roka-cream) !important; }
.roka-action-primary { background:var(--roka-red) !important;color:#fff !important; }
.roka-action-success { background:var(--roka-success) !important;color:#fff !important; }
.roka-rider-panel .roka-internal-panel,.roka-rider-panel .card { border-top:4px solid var(--roka-gold) !important; }

/* Responsive hardening across active ROKA screens */
html { width:100%; }
body { max-width:100%; overflow-x:hidden; }
img,svg,video,canvas { max-width:100%; }
button,a,input,select,textarea { min-width:0; }
.roka-auth-background .auth-wrapper { min-height:100vh; width:100%; max-width:520px; display:grid; align-items:start; justify-items:center; margin:0 auto; padding:clamp(14px,3vw,32px) 16px; }
.roka-auth-background .auth-card { width:min(100%,420px); margin:0 auto; max-height:calc(100svh - 28px); overflow-y:auto; }
.roka-page-home section,.roka-page-home header,.roka-page-home footer,
.roka-page-cart main,.roka-page-checkout main,.roka-page-catalog main,.roka-page-merchant main {
  width:100%;
}
.roka-page-home [class*="grid"],.roka-page-catalog [class*="grid"],.roka-page-merchant [class*="grid"] {
  min-width:0;
}
.roka-page-catalog #comercios-grid,.roka-page-catalog #lista-comercios,.roka-page-home .grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) !important;
}
.roka-page-merchant #productos-grid,.roka-page-merchant #lista-productos,.roka-page-cart #lista-productos {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)) !important;
}
.roka-internal header > div,.roka-admin-panel header > div,.roka-rider-panel header > div {
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
}
.roka-internal main,.roka-admin-panel main,.roka-rider-panel main {
  width:100%;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(12px,2vw,24px) !important;
  padding-right:clamp(12px,2vw,24px) !important;
}
.roka-internal .max-w-3xl,.roka-admin-panel .max-w-3xl,.roka-rider-panel .max-w-3xl {
  max-width:min(100%,1180px) !important;
}
.roka-internal-panel,.roka-internal-summary,.roka-kpi-card {
  min-width:0;
}
.roka-internal-panel .overflow-x-auto,.roka-admin-panel .overflow-x-auto,
.roka-internal-panel table,.roka-admin-panel table {
  -webkit-overflow-scrolling:touch;
}
.roka-table,table.dataTable {
  min-width:760px;
}
.roka-admin-nav,.roka-internal-tabs {
  max-width:100%;
}
.roka-internal #content-pedidos,.roka-internal #panel-liquidaciones,.roka-internal #panel-productos {
  overflow:hidden;
}
.roka-internal #content-pedidos > .grid:first-child {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr)) !important;
}
.roka-internal #content-pedidos h2 {
  min-width:min(100%,260px);
}
.roka-internal #content-pedidos h2 + div {
  display:flex !important;
  flex:1 1 520px;
  flex-wrap:wrap;
  justify-content:flex-end;
  overflow-x:visible !important;
  min-width:0;
}
.roka-internal #content-pedidos .estado-btn {
  flex:1 1 128px;
  min-height:44px;
  padding-inline:12px !important;
  text-align:center;
}
.roka-internal #lista-pedidos > div {
  min-width:0;
}
.roka-internal #lista-pedidos .flex {
  min-width:0;
}
.roka-internal #lista-pedidos h3,
.roka-internal #lista-pedidos p,
.roka-internal #lista-pedidos span {
  overflow-wrap:anywhere;
}
.roka-internal #tabla-liquidaciones {
  max-width:100%;
  overflow-x:auto;
}
.roka-internal #tabla-liquidaciones table {
  width:100%;
  min-width:980px;
}
.roka-internal #tbody-liquidaciones td,
.roka-internal #tabla-liquidaciones th {
  vertical-align:top;
}
.modal,.modal-content,.dispatch-modal {
  max-width:min(100% - 24px,720px);
  max-height:90vh;
  overflow:auto;
}
.fixed.inset-0 > .bg-white,.fixed.inset-0 > [class*="rounded"] {
  max-width:min(100% - 24px,720px);
  max-height:90vh;
  overflow:auto;
}

@media (min-width:1024px) {
  .roka-auth-background { display:grid; align-items:start; justify-items:center; }
  .roka-auth-background .auth-card {
    transform:none;
  }
}

@media (max-width:900px) {
  .roka-internal-header > div,.roka-admin-panel header > div,.roka-rider-panel header > div {
    flex-wrap:wrap;
    gap:12px;
  }
  .roka-internal-header nav,.roka-admin-panel nav,.roka-rider-panel nav {
    width:100%;
    overflow-x:auto;
    justify-content:flex-start !important;
    padding-bottom:4px;
  }
  .roka-internal-header nav a,.roka-admin-panel nav a,.roka-rider-panel nav a,
  .roka-internal-header nav button,.roka-admin-panel nav button,.roka-rider-panel nav button {
    white-space:nowrap;
  }
  .roka-kpi-card {
    min-height:78px;
  }
  .roka-internal #content-pedidos h2 + div {
    justify-content:flex-start;
  }
  .roka-internal #content-pedidos .estado-btn {
    flex:1 1 142px;
  }
}

@media (max-width:640px) {
  .roka-logo-lockup img,.roka-logo-lockup svg { width:40px;height:40px; }
  .roka-logo-lockup .roka-word { font-size:1.05rem; }
  .roka-city-pill { display:none; }
  .roka-hero-brand-card { min-height:390px;padding:24px;border-radius:26px; }
  .roka-page-home .roka-home-hero { padding-top:120px !important;padding-bottom:68px !important; }
  .roka-page-home .roka-home-hero h1 { font-size:2.35rem !important; }
  .roka-delivery-rule-strong { margin-top:0; }
  .roka-internal-brand img { width:58px;height:58px; }
  .roka-internal-brand small { display:none; }
  .roka-admin-nav,.roka-internal-tabs { overflow-x:visible;flex-wrap:wrap !important; }
  .roka-admin-nav a,.roka-internal-tabs button { white-space:normal;flex:1 1 150px;justify-content:center; }
  .roka-auth-background .auth-wrapper { min-height:100svh; padding:10px 12px; }
  .roka-auth-background .auth-card { width:100%; padding:18px 20px !important; max-height:calc(100svh - 20px); }
  .roka-auth-brand { display:none; }
  .roka-page-home .roka-home-hero h1,
  .roka-page-catalog h1,
  .roka-page-merchant h1 {
    overflow-wrap:anywhere;
  }
  .roka-page-cart main,.roka-page-checkout main,.roka-page-catalog main,.roka-page-merchant main,
  .roka-internal main,.roka-admin-panel main,.roka-rider-panel main {
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .roka-table,table.dataTable { min-width:640px; }
  .roka-internal #content-pedidos {
    padding:12px !important;
  }
  .roka-internal #content-pedidos > .grid:first-child {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .roka-internal #content-pedidos .estado-btn {
    flex:1 1 calc(50% - 8px);
    font-size:.86rem;
  }
  .roka-internal #tabla-liquidaciones table {
    min-width:760px;
  }
  .modal,.modal-content,.dispatch-modal,.fixed.inset-0 > .bg-white,.fixed.inset-0 > [class*="rounded"] {
    max-width:calc(100% - 16px);
  }
}