/* =========================================================
   ORIGAMI EXPRESS — identidad visual
   Fondo: blanco washi · Acentos: oro origami + tinta sumi
   Verde firma (grulla del logo) solo para estados positivos
   Firma de marca: la esquina de cada tarjeta se "dobla" como
   papel — el mismo gesto que dobla una grulla de origami.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root{
  --blanco:     #ffffff;
  --washi:      #fbf9f4;   /* blanco cálido, papel */
  --washi-2:    #f4f0e6;
  --tinta:      #15130f;   /* negro sumi, para header/texto fuerte */
  --tinta-2:    #35322b;
  --gris-texto: #6b6558;
  --oro:        #b6863c;   /* oro origami, acento principal */
  --oro-oscuro: #8a6427;
  --oro-luz:    #e9cf9a;
  --oro-brumo:  #f7ecd8;
  --jade:       #3d7a3a;   /* verde de la grulla, uso puntual */
  --jade-luz:   #e5f1e1;
  --hanko:      #a53328;   /* rojo sello, alertas/cancelado */
  --hanko-luz:  #f9e6e3;
  /* paleta de la promo de verano: sol → naranja → selva */
  --sol:        #ffd400;
  --naranja:    #e2790a;
  --terra:      #8a4508;
  --selva:      #1f8b1a;
  --selva-oscura:#0b4d09;
  --claro:      #fff6e6;  /* texto claro sobre el fondo de color */
  --claro-suave:rgba(255,246,230,.86);
  --linea:      rgba(21,19,15,.10);
  --linea-suave:rgba(21,19,15,.06);
  --sombra:     0 18px 40px rgba(21,19,15,.10);
  --sombra-sm:  0 6px 18px rgba(21,19,15,.08);
  --radio:      16px;
  --f-display:  'Shippori Mincho', serif;
  --f-texto:    'Zen Kaku Gothic New', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--selva-oscura);
  color:var(--tinta-2);
  font-family:var(--f-texto);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.f-display{font-family:var(--f-display);}
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%;display:block;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- fondo: el degradado del volante, de verdad ----------
   Sol arriba, naranja de tarde, selva abajo — igual que la promo.
   Se mueve muy despacio, como tela colgando al viento. */
body::before{
  content:"";
  position:fixed; top:-16%; left:-16%; width:132%; height:132%; z-index:-1;
  background:
    radial-gradient(60% 46% at 38% 4%,  var(--sol)   0%, transparent 62%),
    radial-gradient(65% 55% at 82% 10%, var(--naranja) 0%, transparent 66%),
    linear-gradient(200deg,
      var(--sol) 0%,
      var(--naranja) 20%,
      var(--terra) 38%,
      #2c4a12 52%,
      var(--selva) 72%,
      var(--selva-oscura) 100%);
  animation:fondoVivo 30s ease-in-out infinite;
  will-change:transform;
}
@keyframes fondoVivo{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }
  25%{     transform:translate(-1.6%,1.4%) rotate(.5deg) scale(1.015); }
  50%{     transform:translate(1.4%,-1.2%) rotate(-.5deg) scale(1.03); }
  75%{     transform:translate(-1%,-1.6%) rotate(.35deg) scale(1.015); }
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none;}
}

/* ---------- doblez de esquina: firma de marca ----------
   Cada tarjeta "clave" lleva una pequeña esquina doblada,
   como si fuera papel de origami recién plegado. */
.ox-card-sucursal, .ox-producto, .ox-modal-caja, .px-card, .px-stat{
  position:relative;
}
.ox-card-sucursal::after, .ox-producto::after, .ox-modal-caja::after{
  content:"";
  position:absolute; top:0; right:0; z-index:2;
  width:0; height:0;
  border-style:solid;
  border-width:0 22px 22px 0;
  border-color:transparent var(--oro-luz) transparent transparent;
  filter:drop-shadow(-2px 2px 2px rgba(21,19,15,.14));
  transition:border-width .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease;
  pointer-events:none;
  border-radius:0 var(--radio) 0 0;
}
.ox-card-sucursal:hover::after, .ox-producto:hover::after{
  border-width:0 30px 30px 0;
  border-color:transparent var(--oro) transparent transparent;
}

/* ---------- header ---------- */
.ox-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 5vw;
  background:rgba(21,19,15,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(182,134,60,.28);
}
.ox-brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.ox-brand img{width:42px; height:42px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}
.ox-brand span{font-family:var(--f-display); font-weight:700; letter-spacing:.04em; font-size:1.15rem; color:var(--oro-luz);}
.ox-sucursal-tag{
  font-size:.78rem; color:var(--oro-luz); border:1px solid rgba(233,207,154,.3);
  padding:6px 14px; border-radius:999px; letter-spacing:.03em;
}

/* ---------- botón carrito flotante ---------- */
.ox-cart-btn{
  position:fixed; right:24px; bottom:24px; z-index:50;
  background:linear-gradient(135deg, var(--oro-luz), var(--oro));
  color:var(--tinta); border:none; border-radius:999px;
  padding:16px 22px; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--sombra); cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.ox-cart-btn:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 22px 46px rgba(21,19,15,.18);}
.ox-cart-btn:active{transform:translateY(-1px) scale(.99);}
.ox-cart-count{
  background:var(--hanko); color:#fff; border-radius:999px;
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  font-size:.75rem; transition:transform .2s ease;
}
.ox-cart-count.bump{animation:bump .35s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.45);}100%{transform:scale(1);}}

/* ---------- hero / selección de sucursal ---------- */
.ox-hero{
  padding:72px 6vw 44px; text-align:center; position:relative; overflow:hidden;
}
.ox-hero .crane{
  width:118px; margin:0 auto 18px; animation:desplegar 1.15s cubic-bezier(.2,.8,.2,1) both;
  transform-origin:50% 100%;
  filter:drop-shadow(0 10px 18px rgba(21,19,15,.14));
}
@keyframes desplegar{
  0%{ transform:scaleY(.15) scaleX(.7) rotate(-6deg); opacity:0; filter:blur(2px);}
  60%{ transform:scaleY(1.06) scaleX(1.02) rotate(1deg); opacity:1;}
  100%{ transform:scaleY(1) scaleX(1) rotate(0deg);}
}
.ox-hero h1{
  font-size:clamp(2rem,4.4vw,3.4rem); margin:0 0 10px; color:var(--claro);
  letter-spacing:.01em; text-shadow:0 2px 14px rgba(11,10,7,.35);
  opacity:0; animation:subir .7s .15s cubic-bezier(.2,.8,.2,1) both;
}
.ox-hero p{
  color:var(--claro-suave); max-width:560px; margin:0 auto; font-size:1.02rem;
  text-shadow:0 1px 8px rgba(11,10,7,.3);
  opacity:0; animation:subir .7s .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes subir{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.ox-eyebrow{
  display:inline-block; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--claro); border-top:1px solid rgba(255,246,230,.45); border-bottom:1px solid rgba(255,246,230,.45);
  padding:7px 4px; margin-bottom:20px; text-shadow:0 1px 6px rgba(11,10,7,.3);
  opacity:0; animation:subir .6s cubic-bezier(.2,.8,.2,1) both;
}

.ox-sucursales{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px; max-width:1100px; margin:40px auto 0; padding:0 6vw;
}
.ox-card-sucursal{
  background:var(--washi);
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 22px; cursor:pointer; text-align:left;
  opacity:0; transform:scaleY(.6) translateY(10px); transform-origin:top center;
  animation:pliegue .6s ease forwards;
  transition:border-color .25s, transform .25s, box-shadow .25s;
  overflow:hidden;
}
.ox-card-sucursal:hover{border-color:var(--oro); transform:translateY(-6px); box-shadow:var(--sombra-sm);}
.ox-card-sucursal h3{margin:0 0 6px; color:var(--tinta); font-size:1.25rem;}
.ox-card-sucursal p{margin:0; color:var(--gris-texto); font-size:.9rem;}
.ox-card-sucursal .ir{
  margin-top:14px; font-size:.82rem; color:var(--oro-oscuro); letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:4px;
}
.ox-card-sucursal .ir::after{content:"→"; transition:transform .2s ease; display:inline-block;}
.ox-card-sucursal:hover .ir::after{transform:translateX(4px);}
@keyframes pliegue{
  from{opacity:0; transform:scaleY(.5) translateY(14px);}
  to{opacity:1; transform:scaleY(1) translateY(0);}
}
.ox-sucursales .ox-card-sucursal:nth-child(1){animation-delay:.05s;}
.ox-sucursales .ox-card-sucursal:nth-child(2){animation-delay:.11s;}
.ox-sucursales .ox-card-sucursal:nth-child(3){animation-delay:.17s;}
.ox-sucursales .ox-card-sucursal:nth-child(4){animation-delay:.23s;}
.ox-sucursales .ox-card-sucursal:nth-child(5){animation-delay:.29s;}
.ox-sucursales .ox-card-sucursal:nth-child(6){animation-delay:.35s;}
.ox-sucursales .ox-card-sucursal:nth-child(n+7){animation-delay:.4s;}

/* ---------- menú ---------- */
.ox-menu-wrap{padding:30px 6vw 120px; max-width:1200px; margin:0 auto;}
.ox-volver{
  display:inline-flex; align-items:center; gap:6px; color:var(--claro);
  text-decoration:none; font-size:.9rem; margin-bottom:18px; cursor:pointer; background:none; border:none;
  transition:gap .2s ease; text-shadow:0 1px 6px rgba(11,10,7,.3);
}
.ox-volver:hover{gap:10px;}
.ox-cats{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; margin-bottom:26px;
  scrollbar-width:thin;
}
.ox-cat-btn{
  white-space:nowrap; background:var(--washi); border:1px solid var(--linea); color:var(--tinta-2);
  padding:9px 18px; border-radius:999px; cursor:pointer; font-size:.88rem; transition:.2s;
}
.ox-cat-btn.activo, .ox-cat-btn:hover{background:var(--tinta); color:var(--oro-luz); border-color:var(--tinta);}

.ox-productos{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;}
.ox-producto{
  background:var(--washi); border:1px solid var(--linea); border-radius:var(--radio);
  padding:20px; display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:scaleY(.6); transform-origin:top center; animation:pliegue .45s ease forwards;
  transition:box-shadow .25s, transform .25s;
}
.ox-producto:hover{box-shadow:var(--sombra-sm); transform:translateY(-3px);}
.ox-producto h4{margin:0; color:var(--tinta); font-size:1.05rem;}
.ox-producto p{margin:0; color:var(--gris-texto); font-size:.85rem; flex:1;}
.ox-producto .precio{color:var(--oro-oscuro); font-weight:700; font-size:1.05rem; font-family:var(--f-display);}
.ox-fila-agregar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;}
.ox-stepper{display:flex; align-items:center; gap:10px; background:var(--blanco); border:1px solid var(--linea); border-radius:999px; padding:4px 10px;}
.ox-stepper button{background:none; border:none; color:var(--oro-oscuro); font-size:1.1rem; cursor:pointer; width:22px; transition:transform .15s;}
.ox-stepper button:active{transform:scale(.85);}
.ox-btn-agregar{
  background:linear-gradient(135deg, var(--oro-luz), var(--oro)); color:var(--tinta); border:none; border-radius:999px;
  padding:9px 18px; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.ox-btn-agregar:hover{transform:scale(1.05); box-shadow:0 8px 18px rgba(182,134,60,.35);}
.ox-btn-agregar:active{transform:scale(.97);}
.ox-agotado{color:var(--hanko); font-size:.8rem; font-weight:700;}

/* ---------- carrito lateral ---------- */
.ox-overlay{
  position:fixed; inset:0; background:rgba(21,19,15,.45); backdrop-filter:blur(2px);
  z-index:60; opacity:0; pointer-events:none; transition:opacity .25s;
}
.ox-overlay.activo{opacity:1; pointer-events:auto;}
.ox-panel{
  position:fixed; top:0; right:0; height:100%; width:min(420px,92vw);
  background:var(--blanco); border-left:1px solid var(--linea);
  z-index:70; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; box-shadow:-24px 0 60px rgba(21,19,15,.12);
}
.ox-panel.activo{transform:translateX(0);}
.ox-panel-header{padding:20px; border-bottom:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center;}
.ox-panel-header h3{margin:0; color:var(--tinta); font-family:var(--f-display);}
.ox-panel-cerrar{background:none; border:none; color:var(--tinta-2); font-size:1.3rem; cursor:pointer; transition:transform .2s;}
.ox-panel-cerrar:hover{transform:rotate(90deg);}
.ox-panel-body{padding:16px 20px; overflow-y:auto; flex:1;}
.ox-item-carrito{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px dashed var(--linea);}
.ox-item-carrito .nombre{font-weight:700; color:var(--tinta); font-size:.92rem;}
.ox-item-carrito .sub{color:var(--gris-texto); font-size:.8rem;}
.ox-item-carrito .quitar{color:var(--hanko); background:none; border:none; cursor:pointer; font-size:.8rem;}
.ox-panel-footer{padding:20px; border-top:1px solid var(--linea);}
.ox-total-row{display:flex; justify-content:space-between; font-size:1.15rem; margin-bottom:14px; color:var(--tinta); font-family:var(--f-display);}
.ox-btn-primario{
  width:100%; background:linear-gradient(135deg,var(--oro-luz),var(--oro)); color:var(--tinta);
  border:none; border-radius:12px; padding:14px; font-weight:700; font-size:1rem; cursor:pointer;
  transition:transform .2s, box-shadow .2s; position:relative; overflow:hidden;
}
.ox-btn-primario::before{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transition:transform .5s ease;
}
.ox-btn-primario:hover::before{transform:translateX(120%);}
.ox-btn-primario:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(182,134,60,.3);}
.ox-btn-primario:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;}
.ox-btn-primario:disabled::before{display:none;}
.ox-vacio{color:#9c9382; text-align:center; padding:40px 0; font-size:.9rem;}

/* ---------- modal checkout ---------- */
.ox-modal{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(21,19,15,.5); opacity:0; pointer-events:none; transition:opacity .25s; padding:20px;
}
.ox-modal.activo{opacity:1; pointer-events:auto;}
.ox-modal-caja{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:30px; max-width:440px; width:100%; max-height:90vh; overflow-y:auto;
  transform:scale(.92); transition:transform .25s; box-shadow:var(--sombra);
}
.ox-modal.activo .ox-modal-caja{transform:scale(1);}
.ox-modal-caja h3{margin:0 0 6px; color:var(--tinta); font-family:var(--f-display);}
.ox-modal-caja .sub{color:var(--gris-texto); font-size:.85rem; margin-bottom:20px;}
.ox-campo{margin-bottom:14px;}
.ox-campo label{display:block; font-size:.8rem; color:var(--oro-oscuro); margin-bottom:6px; letter-spacing:.03em;}
.ox-campo input, .ox-campo select, .ox-campo textarea{
  width:100%; background:var(--washi); border:1px solid var(--linea); color:var(--tinta-2);
  border-radius:10px; padding:11px 13px; font-size:.95rem; font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.ox-campo input:focus, .ox-campo select:focus, .ox-campo textarea:focus{
  outline:none; border-color:var(--oro); box-shadow:0 0 0 3px rgba(182,134,60,.16);
}
.ox-tipo-entrega{display:flex; gap:10px; margin-bottom:16px;}
.ox-tipo-entrega label{
  flex:1; text-align:center; border:1px solid var(--linea); border-radius:10px; padding:10px; cursor:pointer; font-size:.88rem;
  transition:border-color .2s, background .2s;
}
.ox-tipo-entrega input{display:none;}
.ox-tipo-entrega input:checked + span{color:var(--tinta);}
.ox-tipo-entrega label:has(input:checked){background:linear-gradient(135deg,var(--oro-luz),var(--oro)); border-color:var(--oro); color:var(--tinta);}
.ox-msg{font-size:.85rem; padding:10px 12px; border-radius:8px; margin-bottom:14px;}
.ox-msg.error{background:var(--hanko-luz); color:var(--hanko); border:1px solid rgba(165,51,40,.25);}
.ox-msg.ok{background:var(--jade-luz); color:var(--jade); border:1px solid rgba(61,122,58,.22);}

/* ---------- confirmación ---------- */
.ox-confirmacion{text-align:center; padding:20px 0;}
.ox-confirmacion .sello{
  width:78px; height:78px; border-radius:50%; background:var(--jade); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 16px;
  animation:desplegar .6s ease both;
  box-shadow:0 10px 24px rgba(61,122,58,.28);
}

/* =========================================================
   PANEL DE SUCURSAL / ADMIN — estilos compartidos
   ========================================================= */
.px-shell{min-height:100vh; padding-bottom:60px;}
.px-topbar{
  display:flex; justify-content:space-between; align-items:center; padding:18px 4vw;
  border-bottom:1px solid rgba(182,134,60,.28); background:var(--tinta); flex-wrap:wrap; gap:12px;
}
.px-topbar h1{margin:0; font-size:1.3rem; color:var(--oro-luz);}
.px-topbar .tag{color:var(--oro-luz); font-size:.85rem; opacity:.85;}
.px-tabs{display:flex; gap:8px; padding:16px 4vw 0; flex-wrap:wrap;}
.px-tab{
  background:var(--washi); border:1px solid var(--linea); color:var(--tinta-2);
  padding:9px 18px; border-radius:10px 10px 0 0; cursor:pointer; font-size:.88rem; transition:.2s;
}
.px-tab.activo{background:var(--tinta); color:var(--oro-luz); border-color:var(--tinta);}
.px-content{padding:24px 4vw;}
.px-card{background:var(--washi); border:1px solid var(--linea); border-radius:14px; padding:20px; margin-bottom:16px;}
.px-grid-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px;}
.px-stat{background:var(--washi); border:1px solid var(--linea); border-radius:14px; padding:18px; text-align:center; transition:transform .2s, box-shadow .2s;}
.px-stat:hover{transform:translateY(-3px); box-shadow:var(--sombra-sm);}
.px-stat .num{font-family:var(--f-display); font-size:1.9rem; color:var(--oro-oscuro);}
.px-stat .lbl{font-size:.78rem; color:var(--gris-texto); text-transform:uppercase; letter-spacing:.05em;}

table.px-tabla{width:100%; border-collapse:collapse; font-size:.9rem;}
table.px-tabla th{text-align:left; color:var(--oro-oscuro); border-bottom:1px solid var(--linea); padding:10px 8px; font-weight:600;}
table.px-tabla td{padding:10px 8px; border-bottom:1px solid var(--linea-suave); vertical-align:top;}
table.px-tabla tr:hover td{background:var(--oro-brumo);}

.px-badge{display:inline-block; padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:700;}
.badge-nuevo{background:var(--oro-brumo); color:var(--oro-oscuro);}
.badge-preparando{background:var(--hanko-luz); color:var(--hanko);}
.badge-en_camino{background:#e4eefb; color:#2f6fb0;}
.badge-listo{background:var(--jade-luz); color:var(--jade);}
.badge-entregado{background:#eceae5; color:#6b6558;}
.badge-cancelado{background:#f3d8d4; color:#8a281e;}

.px-btn{background:linear-gradient(135deg,var(--oro-luz),var(--oro)); color:var(--tinta); border:none; border-radius:8px; padding:8px 14px; font-weight:700; cursor:pointer; font-size:.85rem; transition:transform .15s, box-shadow .15s;}
.px-btn:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(182,134,60,.3);}
.px-btn.secundario{background:none; border:1px solid var(--linea); color:var(--tinta-2); box-shadow:none;}
.px-btn.secundario:hover{border-color:var(--oro); box-shadow:none;}
.px-btn.peligro{background:var(--hanko); color:#fff;}
.px-form-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.px-form-row .ox-campo{flex:1; min-width:160px; margin-bottom:0;}
select.px-select{background:var(--blanco); color:var(--tinta-2); border:1px solid var(--linea); border-radius:8px; padding:6px 10px;}

.px-empty{text-align:center; color:#9c9382; padding:40px 0;}
.px-note{font-size:.8rem; color:var(--gris-texto); margin-top:6px;}

@media (max-width:640px){
  .ox-hero{padding:50px 5vw 30px;}
  .px-content{padding:18px 4vw;}
}