/* ══════════════════════════════════════════════════════
   MI CUENTA — Especias Molucas
   Página de perfil del usuario con historial de pedidos
══════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root {
  --orange: #CC5E08;
  --orange-light: #E87818;
  --green: #3A7020;
  --green-light: #559030;
  --cream: #3A1200;
  --dark: #FFF0E4;
  --dark2: #FFE2C8;
  --warm: #FFD8B4;
  --text-muted: rgba(58,18,0,0.55);
  --saffron: #B06808;
  --turmeric: #BA7008;
  --paprika: #B02818;
  --cardamom: #1A3410;
  --cinnamon: #782A10;
}

/* ── EVITAR FLASH DE LOGIN ── */
/* Ocultar AMBOS por defecto */
#noSession,
#withSession { display: none !important; }

/* Mostrar según clase en <html> (se setea en <head> antes de pintar body) */
html.has-user #withSession { display: block !important; }
html.no-user #noSession { display: block !important; }

html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--cream);font-family:'Nunito',sans-serif;overflow-x:hidden;min-height:100vh}

/* ── ANIMATED BACKGROUND ── */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:orbFloat 18s ease-in-out infinite}
.bg-orb:nth-child(1){width:400px;height:400px;background:var(--orange);top:-100px;left:-100px;animation-duration:20s}
.bg-orb:nth-child(2){width:300px;height:300px;background:var(--green);bottom:-80px;right:-80px;animation-duration:24s;animation-delay:-5s}
.bg-orb:nth-child(3){width:250px;height:250px;background:var(--saffron);top:40%;left:60%;animation-duration:22s;animation-delay:-10s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(30px,-40px) scale(1.05)}
  50%{transform:translate(-20px,30px) scale(.95)}
  75%{transform:translate(40px,20px) scale(1.03)}
}

/* ── PARTICLES ── */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0}
.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--orange-light);opacity:0;animation:particleFade 4s ease-in-out infinite}
@keyframes particleFade{
  0%,100%{opacity:0;transform:translateY(0)}
  50%{opacity:.3;transform:translateY(-30px)}
}


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Variables reutilizan las de mi-cuenta.css (--orange, --orange-light, --warm, --cream, --text-muted) */



#authContainer {
  font-family: 'Montserrat', sans-serif;
  
}

#authContainer .container{
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
    margin: 2rem auto;
    
}

#authContainer .container p{
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    margin: 20px 0;
}

#authContainer .container span{
    font-size: 12px;
}

#authContainer .container a{
    color: #333;
    font-size: 13px;
    text-decoration: none;
    margin: 15px 0 10px;
}

#authContainer .container button{
    background-color: var(--orange);
    color: #fff;
    font-size: 12px;
    padding: 10px 45px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 10px;
    cursor: pointer;
}

#authContainer .container button.hidden{
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

#authContainer .container form{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    height: 100%;
}

.terminos {
    display: flex;
    align-items: flex-start; /* evita que el checkbox quede centrado verticalmente */
    gap: 10px;
    width: 100%;
}

.terminos input[type="checkbox"] {
    margin: 3px 0 0 0;
    flex-shrink: 0;
}

.terminos label {
    line-height: 1.5;
    cursor: pointer;
}

#authContainer .container input{
    background-color: #eee;
    border: none;
    margin: 8px 0;
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 8px;
    width: 100%;
    outline: none;
}

#authContainer .form-container{
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

#authContainer .sign-in{
    left: 0;
    width: 50%;
    z-index: 2;
}

#authContainer .container.active .sign-in{
    transform: translateX(100%);
}

#authContainer .sign-up{
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

#authContainer .container.active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: move 0.6s;
}

@keyframes move{
    0%, 49.99%{
        opacity: 0;
        z-index: 1;
    }
    50%, 100%{
        opacity: 1;
        z-index: 5;
    }
}

#authContainer .social-icons{
    margin: 20px 0;
}

#authContainer .social-icons a{
    border: 1px solid #ccc;
    border-radius: 20%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 3px;
    width: 40px;
    height: 40px;
}

#authContainer .toggle-container{
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    border-radius: 150px 0 0 100px;
    z-index: 1000;
}

#authContainer .container.active .toggle-container{
    transform: translateX(-100%);
    border-radius: 0 150px 100px 0;
}

#authContainer .toggle{
    background-color: var(--warm);
    height: 100%;
    background: linear-gradient(to right, var(--warm), var(--orange));
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

#authContainer .container.active .toggle{
    transform: translateX(50%);
}

#authContainer .toggle-panel{
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 30px;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

#authContainer .toggle-left{
    transform: translateX(-200%);
}

#authContainer .container.active .toggle-left{
    transform: translateX(0);
}

#authContainer .toggle-right{
    right: 0;
    transform: translateX(0);
}

#authContainer .container.active .toggle-right{
    transform: translateX(200%);
}


/* Ocultar botones móviles por defecto en escritorio */
.mobile-switch {
  display: none;
}

/* =========================================================
   RESPONSIVE DESIGN: Pantallas Medianas y Pequeñas (<= 768px)
   ========================================================= */
@media screen and (max-width: 768px) {
  #authContainer {
    padding: 20px 10px;
  }

  #authContainer .container {
    width: 100%;
    max-width: 420px;
    min-height: 520px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
  }

  /* Ocultar la barra lateral con degradado en dispositivos móviles */
  #authContainer .toggle-container {
    display: none;
  }

  /* Formularios ocupan el 100% del contenedor */
  #authContainer .form-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
  }

  /* Estado por defecto: Mostrar Sign In, Ocultar Sign Up */
  #authContainer .sign-in {
    opacity: 1;
    z-index: 5;
    transform: translateY(0);
    visibility: visible;
  }

  #authContainer .sign-up {
    opacity: 0;
    z-index: 1;
    transform: translateY(30px);
    visibility: hidden;
  }

  /* Estado activo: Ocultar Sign In, Mostrar Sign Up con animación */
  #authContainer .container.active .sign-in {
    opacity: 0;
    z-index: 1;
    transform: translateY(-30px);
    visibility: hidden;
  }

  #authContainer .container.active .sign-up {
    opacity: 1;
    z-index: 5;
    transform: translateY(0);
    visibility: visible;
    animation: fadeInSlide 0.5s ease forwards;
  }

  #authContainer .container form {
    padding: 30px 25px;
  }

  /* Estilos para el conmutador inferior en pantallas pequeñas */
  .mobile-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    width: 100%;
  }

  .mobile-switch span {
    color: var(--text-muted);
    font-size: 13px;
  }

  .btn-switch-mobile {
    background: transparent !important;
    color: var(--orange) !important;
    border: 1.5px solid var(--orange) !important;
    padding: 8px 24px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn-switch-mobile:hover {
    background-color: var(--orange) !important;
    color: #fff !important;
  }
}

/* Animación suave para móvil */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── NAV ── */
nav{position:fixed;top:0;width:100%;z-index:100;padding:16px 60px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(255,240,228,.97),transparent);transition:padding .4s,background .4s}
nav.scrolled{padding:12px 60px;background:rgba(255,240,228,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(200,102,10,.18)}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo-icon img{height:45px;width:auto;border-radius:8px;object-fit:cover}
.nav-actions{display:flex;align-items:center;gap:16px}
.nav-link{color:var(--cream);text-decoration:none;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;opacity:.65;transition:all .3s;display:flex;align-items:center;gap:6px}
.nav-link:hover{opacity:1;color:var(--orange-light)}
.nav-link.active{opacity:1;color:var(--orange-light)}
.btn-nav{display:flex;align-items:center;gap:8px;background:rgba(200,102,10,.15);border:1px solid rgba(200,102,10,.35);color:var(--orange-light);padding:9px 20px;border-radius:8px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:all .3s;font-family:'Nunito',sans-serif;text-decoration:none}
.btn-nav:hover{background:rgba(200,102,10,.3);transform:translateY(-1px)}
.nav-hamburger, .nav-close-btn { display: none; }

/* ── PAGE HERO ── */
.page-hero{
  padding:140px 60px 50px;
  text-align:center;
  position:relative;
  z-index:2;
  background:radial-gradient(ellipse at 50% 0%,rgba(200,102,10,.15),transparent 60%);
}
.page-hero .greeting{
  font-size:1rem;color:var(--text-muted);letter-spacing:.1em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:12px;opacity:0;animation:fadeSlideUp .6s .2s forwards;
}
.page-hero h1{
  font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:900;line-height:1.1;margin-bottom:8px;
  opacity:0;animation:fadeSlideUp .6s .3s forwards;
}
.page-hero h1 em{color:var(--saffron);font-style:italic}
.page-hero .member-since{
  font-size:.82rem;color:var(--text-muted);
  opacity:0;animation:fadeSlideUp .6s .4s forwards;
}

@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── STATS BAR ── */
.stats-bar{
  display:flex;align-items:center;justify-content:center;gap:40px;
  padding:30px 60px;position:relative;z-index:2;
  opacity:0;animation:fadeSlideUp .6s .5s forwards;
}
.stat-card{
  text-align:center;padding:20px 30px;
  background:rgba(200,102,10,.04);border:1px solid rgba(200,102,10,.12);
  border-radius:14px;transition:all .35s;min-width:140px;
}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(200,102,10,.35);box-shadow:0 15px 40px rgba(200,102,10,.12)}
.stat-number{font-family:'Bebas Neue',cursive;font-size:2.5rem;color:var(--orange-light);letter-spacing:.06em;line-height:1}
.stat-label{font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}

/* ── USER INFO PANEL ── */
.user-panel{
  max-width:1200px;margin:40px auto;padding:0 60px;
  position:relative;z-index:2;
  opacity:0;animation:fadeSlideUp .6s .6s forwards;
}
.user-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;
  background:linear-gradient(135deg,rgba(200,102,10,.06),rgba(74,124,47,.04));
  border:1px solid rgba(200,102,10,.15);border-radius:20px;
  padding:30px;position:relative;overflow:hidden;
  transition:all .4s;
}
.user-card:hover{border-color:rgba(200,102,10,.3);box-shadow:0 20px 60px rgba(200,102,10,.08)}
.user-card::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(to bottom,var(--orange),var(--green-light));border-radius:4px 0 0 4px;
}
.user-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',cursive;font-size:2.2rem;color:var(--dark);
  border:3px solid rgba(255,255,255,.2);
  animation:avatarPulse 3s ease-in-out infinite;
}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,102,10,.3)}
  50%{box-shadow:0 0 0 12px rgba(200,102,10,0)}
}
.user-details h3{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;margin-bottom:4px}
.user-details p{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.user-details p i{color:var(--orange-light);font-size:.9rem;width:18px}
.user-actions{display:flex;flex-direction:column;gap:8px}
.btn-action{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:8px;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;cursor:pointer;transition:all .3s;
  font-family:'Nunito',sans-serif;border:none;text-decoration:none;
}
.btn-action.primary{
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  color:var(--dark);
}
.btn-action.primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(200,102,10,.35)}
.btn-action.wa{
  background:linear-gradient(135deg,#25D366,#128C7E);color:white;
}
.btn-action.wa:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,211,102,.3)}
.btn-action.outline{
  background:transparent;border:1px solid rgba(200,102,10,.25);color:var(--text-muted);
}
.btn-action.outline:hover{border-color:var(--orange);color:var(--orange-light)}
.btn-action.danger{
  background:transparent;border:1px solid rgba(192,57,43,.25);color:rgba(192,57,43,.7);
}
.btn-action.danger:hover{border-color:#E74C3C;color:#E74C3C;background:rgba(192,57,43,.05)}

/* ── SECTION HEADING ── */
.section-head{
  max-width:1200px;margin:50px auto 25px;padding:0 60px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:2;
}
.section-head h2{
  font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;
  display:flex;align-items:center;gap:12px;
}
.section-head h2 i{color:var(--orange-light);font-size:1.3rem}
.section-head h2 em{color:var(--saffron);font-style:italic;font-weight:400}
.filter-pills{display:flex;gap:8px}
.pill{
  padding:6px 16px;border:1px solid rgba(200,102,10,.2);border-radius:20px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);cursor:pointer;transition:all .3s;
  background:transparent;font-family:'Nunito',sans-serif;
}
.pill:hover,.pill.active{border-color:var(--orange);color:var(--orange-light);background:rgba(200,102,10,.08)}

/* ── ORDERS LIST ── */
.orders-container{
  max-width:1200px;margin:0 auto 80px;padding:0 60px;
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:20px;
}

.order-card{
  background:rgba(200,102,10,.03);
  border:1px solid rgba(200,102,10,.12);
  border-radius:16px;overflow:hidden;
  transition:all .4s cubic-bezier(.23,1,.32,1);
  animation:orderIn .5s ease forwards;
  opacity:0;
}
.order-card:hover{border-color:rgba(200,102,10,.35);box-shadow:0 20px 60px rgba(200,102,10,.1);transform:translateY(-3px)}

@keyframes orderIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* Order Header */
.order-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 25px;cursor:pointer;
  background:linear-gradient(135deg,rgba(200,102,10,.05),transparent);
  transition:background .3s;
}
.order-header:hover{background:rgba(200,102,10,.08)}
.order-header-left{display:flex;align-items:center;gap:16px}
.order-id-badge{
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  color:var(--dark);padding:8px 14px;border-radius:10px;
  font-family:'Bebas Neue',cursive;font-size:1.1rem;letter-spacing:.12em;
  min-width:90px;text-align:center;
}
.order-meta h4{font-size:1rem;font-weight:700;margin-bottom:2px}
.order-meta span{font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.order-meta span i{font-size:.7rem}
.order-header-right{display:flex;align-items:center;gap:16px}
.order-total{text-align:right}
.order-total .amount{font-family:'Bebas Neue',cursive;font-size:1.8rem;color:var(--orange-light);letter-spacing:.06em;line-height:1}
.order-total .envio-label{font-size:.68rem;color:var(--text-muted);letter-spacing:.1em}
.order-status{
  padding:6px 14px;border-radius:20px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  white-space:nowrap;
}
.status-pendiente{background:rgba(186,112,8,.15);border:1px solid rgba(186,112,8,.3);color:var(--turmeric)}
.status-confirmada{background:rgba(74,124,47,.15);border:1px solid rgba(74,124,47,.3);color:var(--green-light)}
.status-en_camino{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.3);color:#25D366}
.status-entregado{background:rgba(85,144,48,.2);border:1px solid rgba(85,144,48,.4);color:var(--green-light)}
.status-cancelada{background:rgba(192,57,43,.12);border:1px solid rgba(192,57,43,.3);color:var(--paprika)}
.expand-icon{
  font-size:1rem;color:var(--text-muted);transition:transform .3s;
}
.order-card.open .expand-icon{transform:rotate(180deg)}

/* Order Body (expandable) */
.order-body{
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.23,1,.32,1);
}
.order-card.open .order-body{max-height:none}

.order-body-inner{padding:0 25px 25px}

/* Order Detail Sections */
.order-detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  margin-bottom:20px;
}
.detail-box{
  background:rgba(200,102,10,.03);border:1px solid rgba(200,102,10,.08);
  border-radius:12px;padding:18px;
}
.detail-box.full{grid-column:1/-1}
.detail-box h5{
  font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.detail-box h5 i{color:var(--orange-light);font-size:.85rem}
.detail-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;border-bottom:1px solid rgba(200,102,10,.05);
  font-size:.85rem;
}
.detail-row:last-child{border-bottom:none}
.detail-row .label{color:var(--text-muted)}
.detail-row .value{font-weight:600;color:var(--cream)}
.detail-row.highlight .value{color:var(--orange-light);font-weight:800}
.detail-row .value-su{margin-left: 25%;}

/* Products in Order */
.order-products{
  margin-bottom:20px;
  max-height:340px;
  overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(200,102,10,.3) transparent;
}
.order-products::-webkit-scrollbar{width:5px}
.order-products::-webkit-scrollbar-track{background:transparent}
.order-products::-webkit-scrollbar-thumb{background:rgba(200,102,10,.3);border-radius:4px}
.order-product-item{
  display:flex;align-items:center;gap:14px;
  padding:12px;background:rgba(200,102,10,.02);
  border:1px solid rgba(200,102,10,.06);border-radius:10px;
  margin-bottom:8px;transition:all .3s;
}
.order-product-item:hover{background:rgba(200,102,10,.06);border-color:rgba(200,102,10,.15)}
.order-product-img{
  width:50px;height:50px;border-radius:8px;
  background:rgba(200,102,10,.1);display:flex;
  align-items:center;justify-content:center;
  font-size:1.3rem;overflow:hidden;flex-shrink:0;
}
.order-product-img img{width:100%;height:100%;object-fit:cover}
.order-product-info{flex:1;min-width:0}
.order-product-name{font-size:.9rem;font-weight:700;margin-bottom:2px}
.order-product-qty{font-size:.75rem;color:var(--text-muted)}
.order-product-subtotal{
  font-family:'Bebas Neue',cursive;font-size:1.2rem;
  color:var(--orange-light);letter-spacing:.04em;flex-shrink:0;
}

/* Order Totals */
.order-totals{
  background:rgba(200,102,10,.05);border:1px solid rgba(200,102,10,.12);
  border-radius:12px;padding:16px 18px;margin-bottom:20px;
}
.order-total-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;font-size:.85rem;color:var(--text-muted);
}
.order-total-row.envio{color:var(--green-light)}
.order-total-row.envio i{margin-right:6px}
.order-total-row.final{
  border-top:2px solid rgba(200,102,10,.15);
  margin-top:8px;padding-top:12px;
  font-weight:800;font-size:1rem;color:var(--orange-light);
}
.order-total-row.final span:last-child{
  font-family:'Bebas Neue',cursive;font-size:1.5rem;letter-spacing:.06em;
}

/* Order Actions */
.order-actions{
  display:flex;gap:10px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid rgba(200,102,10,.08);
}
.btn-order{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:8px;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;cursor:pointer;transition:all .3s;
  font-family:'Nunito',sans-serif;border:none;text-decoration:none;
}
.btn-order.wa{background:linear-gradient(135deg,#25D366,#128C7E);color:white}
.btn-order.wa:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,211,102,.3)}
.btn-order.secondary{
  background:transparent;border:1px solid rgba(200,102,10,.25);color:var(--text-muted);
}
.btn-order.secondary-cancelar {
  background: transparent;
  border: 1px solid var(--paprika);
  color: var(--paprika);
}
.btn-order.secondary-cancelar:hover {
  background: var(--paprika);
  color: white;
}
.btn-order.secondary:hover{border-color:var(--orange);color:var(--orange-light)}

/* ── EMPTY STATE ── */
.empty-state{
  text-align:center;padding:80px 40px;
  background:rgba(200,102,10,.03);border:1px dashed rgba(200,102,10,.15);
  border-radius:20px;
}
.empty-state i{font-size:4rem;color:var(--orange-light);opacity:.3;display:block;margin-bottom:16px}
.empty-state h3{font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:8px}
.empty-state p{color:var(--text-muted);font-size:.9rem;margin-bottom:24px}
.empty-state .btn-action{display:inline-flex}

/* ── NOT LOGGED IN STATE ── */
.login-prompt{
  max-width:500px;margin:40px auto 80px;padding:60px 40px;
  background:linear-gradient(145deg,rgba(200,102,10,.06),rgba(74,124,47,.04));
  border:1px solid rgba(200,102,10,.15);border-radius:24px;
  text-align:center;position:relative;z-index:2;
  animation:fadeSlideUp .6s .3s forwards;opacity:0;
}
.login-prompt i.main-icon{font-size:4rem;color:var(--orange-light);opacity:.5;display:block;margin-bottom:20px}
.login-prompt h2{font-family:'Playfair Display',serif;font-size:1.8rem;margin-bottom:10px}
.login-prompt h2 em{color:var(--saffron);font-style:italic}
.login-prompt p{color:var(--text-muted);margin-bottom:30px;font-size:.92rem;line-height:1.7}
.login-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.login-form .field{position:relative}
.login-form .field label{
  display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;font-weight:600;
}
.login-form .input-wrap{
  display:flex;align-items:center;gap:10px;
  background:rgba(58,18,0,.04);border:1px solid rgba(200,102,10,.18);
  border-radius:10px;padding:0 14px;transition:all .3s;
}
.login-form .input-wrap:focus-within{border-color:var(--orange-light);background:rgba(200,102,10,.06);box-shadow:0 0 0 3px rgba(200,102,10,.1)}
.login-form .input-wrap i{color:var(--orange-light);opacity:.5;font-size:.9rem}
.login-form .input-wrap:focus-within i{opacity:1}
.login-form .input-wrap input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--cream);font-family:'Nunito',sans-serif;font-size:.9rem;padding:12px 0;
}
.login-form .input-wrap input::placeholder{color:rgba(58,18,0,.25)}
.login-form .submit-btn{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  color:var(--dark);font-weight:800;font-size:.85rem;letter-spacing:.15em;
  text-transform:uppercase;border:none;border-radius:10px;cursor:pointer;
  transition:all .3s;font-family:'Nunito',sans-serif;margin-top:8px;
}
.login-form .submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,102,10,.4)}
.login-form .switch-link{
  text-align:center;font-size:.82rem;color:var(--text-muted);margin-top:8px;
}
.login-form .switch-link a{color:var(--orange-light);text-decoration:none;font-weight:600;cursor:pointer}
.login-form .switch-link a:hover{text-decoration:underline}

/* ── FOOTER ── */
.page-footer{
  padding:30px 60px;text-align:center;
  border-top:1px solid rgba(200,102,10,.08);
  color:var(--text-muted);font-size:.78rem;
  position:relative;z-index:2;
}
.page-footer a{color:var(--orange-light);text-decoration:none}
.page-footer a:hover{text-decoration:underline}

/* ── TOAST ── */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(58,18,0,.92);border:1px solid rgba(200,102,10,.4);color:#FFF0E4;padding:14px 26px;border-radius:10px;font-size:.88rem;z-index:9000;opacity:0;transition:opacity .4s,transform .4s;backdrop-filter:blur(12px);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(74,124,47,.6)}
.toast.error{border-color:rgba(192,57,43,.6)}

/* ── SPIN ── */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   Breakpoints: 480px (móvil) · 768px (tablet) · 1024px (desktop)
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE GLOBAL (aplica a todos los tamaños) ── */
img { max-width:100%; height:auto; display:block; }

html, body {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

* {
    box-sizing: border-box !important;
}

/* ── HAMBURGER MENU (móvil) ── */
.nav-hamburger {
  display:flex;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid rgba(200,102,10,.3);
}
.nav-hamburger span {
  display:block;
  width:22px;
  height:2px;
  background:var(--orange-light);
  border-radius:2px;
  transition:transform .3s, opacity .3s;
}

.nav-hamburger {
    display: none !important;
}

@media (max-width: 479px) {
    .nav-hamburger {
        display: flex !important;
    }

  .nav-actions {
    background:#FFE2C8;
    transition: 0.4s ease-in-out;
  }
  body, html {
    overflow-x: hidden;
    width: 100%;
  }
  .container, section, .user-panel, .section-head, .orders-container, .page-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
}

.nav-hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity:0; }
.nav-hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 480px) {
  /* NAV */
  nav { padding:12px 16px; }
  nav.scrolled { padding:10px 16px; }
  .nav-logo-icon img { width:36px !important; }
  .nav-brand-name { font-size:1.2rem; }
  .nav-brand-tagline { font-size:.52rem; }
  .nav-brand-text { margin-left:8px; }
  .nav-hamburger { display:flex; }

  .nav-actions {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background:#FFE2C8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: 0.5s ease;
    z-index: 999;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  }

  .nav-actions.open {
    right: 0;
  }

  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
  }

  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .nav-actions a {
    font-size: 1.5rem;
    color: var(--cream) !important;
  }

  .nav-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--orange-light);
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 10px;
    display: block;
    z-index: 1001;
  }
}

/* ── ORIGINAL MI-CUENTA RESPONSIVE OVERRIDES ── */
@media(max-width:900px){
  nav{padding:14px 24px}
  nav.scrolled{padding:10px 24px}
  .page-hero{padding:110px 24px 40px}
  .stats-bar{flex-wrap:wrap;gap:15px;padding:20px 24px}
  .stat-card{min-width:100px;padding:14px 18px}
  .stat-number{font-size:1.8rem}
  .user-panel,.section-head,.orders-container{padding:0 24px}
  .user-card{grid-template-columns:1fr;gap:20px;text-align:center}
  .user-avatar{margin:0 auto}
  .user-actions{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .order-detail-grid{grid-template-columns:1fr}
  .order-header{flex-direction:column;gap:12px;align-items:flex-start}
  .order-header-right{width:100%;justify-content:space-between}
  .page-footer{padding:30px 24px}
  .section-head{flex-direction:column;gap:12px;align-items:flex-start}
}
@media(max-width:640px){
  .nav-actions{gap:10px}
  .stat-card{flex:1;min-width:0;padding:12px 10px}
  .stat-number{font-size:1.4rem}
  .stat-label{font-size:.58rem;letter-spacing:.15em}
  .order-actions{flex-direction:column}
.btn-order,.btn-action{width:100%;justify-content:center}
}

/* ═════════════════════════════════════════════
   GLOBAL MODAL — MÁXIMA PRIORIDAD VISUAL
   Para verificación de correo y futuras alertas críticas
═════════════════════════════════════════════ */

:root {
  --modal-z: 2147483647;
  --modal-backdrop: rgba(18, 6, 0, 0.55);
  --modal-bg: #FAF3E8;
  --modal-border: #EAD5C1;
  --modal-radius: 24px;
  --modal-padding: 3rem 2rem 2.5rem;
  --modal-max-w: 480px;
  --modal-shadow: 0 40px 100px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.15), 0 0 60px rgba(210,108,28,.15);
  --modal-duration: 0.4s;
  --modal-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.verif-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--modal-duration) ease, visibility var(--modal-duration) ease;
  padding: 1rem;
  /* Prevent any layout shift from affecting page */
  contain: layout style paint;
  isolation: isolate;
}

.verif-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.verif-overlay.closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.verif-overlay .verif-box {
  max-width: var(--modal-max-w);
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
  background: var(--modal-bg);
  border: 2px solid var(--modal-border);
  border-radius: var(--modal-radius);
  padding: var(--modal-padding);
  box-shadow: var(--modal-shadow);
  transform: scale(0.92) translateY(16px);
  opacity: 0;
  transition:
    transform var(--modal-duration) var(--modal-easing),
    opacity calc(var(--modal-duration) * 0.8) ease;
  will-change: transform, opacity;
  position: relative;
  z-index: 1;
}

.verif-overlay.open .verif-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.verif-overlay.closing .verif-box {
  transform: scale(0.92) translateY(-16px);
  opacity: 0;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* ── Responsive: Mobile bottom sheet ───────────────────── */
@media (max-width: 520px) {
  .verif-overlay {
    padding: 0.75rem;
    align-items: flex-end;
  }
  .verif-overlay .verif-box {
    max-height: calc(100vh - 1.5rem);
    border-radius: 20px 20px 0 0;
    padding: 2.5rem 1.5rem 2rem;
    transform: scale(0.95) translateY(100%);
    box-shadow:
      0 -20px 60px rgba(0,0,0,.25),
      0 0 40px rgba(210,108,28,.1);
  }
  .verif-overlay.open .verif-box {
    transform: scale(1) translateY(0);
  }
  .verif-overlay.closing .verif-box {
    transform: scale(0.95) translateY(100%);
  }
}

/* ── Icon & Checkmark ───────────────────────────────────── */
.verif-img-container {
  position: relative;
  margin: 0 auto 1.5rem;
  width: 120px;
  height: 120px;
}
.verif-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #F2E4D4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: #D26C1C;
  box-shadow:
    0 16px 32px rgba(210,108,28,.18),
    inset 0 0 20px rgba(0,0,0,.03);
  position: relative;
  z-index: 2;
}
.verif-check {
  position: absolute;
  top: 0;
  right: -6px;
  background: #426B22;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: bold;
  border: 4px solid #FAF3E8;
  z-index: 3;
  box-shadow: 0 6px 14px rgba(66,107,34,.45);
}

/* ── Typography ─────────────────────────────────────────── */
.verif-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0.5rem;
}
.verif-flourish {
  color: #D26C1C;
  opacity: 0.6;
  font-size: 1.2rem;
}
.verif-title {
  font-family: 'Playfair Display', serif;
  color: #3A1E04;
  font-size: 2rem;
  margin: 0;
  font-weight: 800;
}
.verif-body {
  color: #6D4C31;
  margin: 0 0 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
}
.verif-email {
  color: #AF511B;
  font-weight: 800;
  word-break: break-all;
}

/* ── Note box ───────────────────────────────────────────── */
.verif-note {
  margin: 0 auto 1.5rem;
  padding: 1rem;
  border-radius: 16px;
  background: #FFF;
  border: 1px dashed #EAD5C1;
  color: #3A1E04;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(210,108,28,.06);
  text-align: left;
  line-height: 1.4;
}
.verif-note i {
  font-size: 1.4rem;
  color: #D26C1C;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ── Button ─────────────────────────────────────────────── */
.verif-btn {
  margin-top: 1rem;
  padding: 1rem 3rem;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(to bottom, #D26C1C, #A74507);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  font-family: 'Nunito', sans-serif;
  box-shadow:
    0 10px 28px rgba(167,69,7,.45),
    inset 0 2px 0 rgba(255,255,255,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.verif-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 36px rgba(167,69,7,.55),
    inset 0 2px 0 rgba(255,255,255,0.2);
}
.verif-btn:active {
  transform: translateY(0);
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}