/* ── Diseño de la app de clientes (mandados.html) ─────────────────────────
   El mismo lenguaje del panel de Catálogo Smart, con el naranja de Parallevar:
   nebulosas quietas de fondo, tarjetas sólidas con sombra doble, campos
   "tallados", barra de arriba transparente que se vuelve vidrio al bajar y la
   carga con cuatro rayitas. Solo estética: todo cuelga de body.cliente, así
   el panel del comercio, el del delivery y el admin no cambian.
   Esta app sigue el tema del teléfono: lo oscuro es lo de base y lo claro va
   en @media (prefers-color-scheme: light), como en app.css. */

/* 0) Paleta: la de Catálogo Smart, con la marca naranja. Las tarjetas se separan bien del fondo
   (en oscuro #1f2937 sobre #111827, en claro blanco sobre #f2f2f7): es lo que da el aspecto prolijo. */
body.cliente{
  --fondo:#111827; --sup:#1f2937; --sup2:#273244; --borde-tarjeta:rgba(255,255,255,.06);
  --linea:rgba(255,255,255,.08); --borde-campo:rgba(255,255,255,.14);
  --urgente-fondo:#1f2937; --hero-card:#1f2937; --hero-borde:rgba(255,255,255,.06);
  --vidrio-pie:color-mix(in srgb,#111827 82%,transparent);
  --btn2:transparent; --btn2-abajo:rgba(255,255,255,.06); --btn2-borde:rgba(255,255,255,.14);
  --btn2-sombra:none; --btn2-sombra-abajo:none;
}
@media (prefers-color-scheme:light){
  body.cliente{
    --fondo:#f2f2f7; --sup:#ffffff; --sup2:#f7f7fa; --borde-tarjeta:rgba(16,24,40,.05);
    --urgente-fondo:#ffffff; --hero-card:#ffffff;
    --vidrio-pie:color-mix(in srgb,#f2f2f7 85%,transparent);
    --btn2:#ffffff; --btn2-abajo:#f2f2f7; --btn2-borde:rgba(16,24,40,.12);
  }
}

/* 1) Nebulosas de fondo: una sola imagen fija, sin desenfoque ni animación.
   Son degradados radiales pintados una vez: el celular no recalcula nada al bajar. El alto es el
   de la pantalla grande (lvh), así no se corren cuando la barra del navegador aparece o se esconde. */
body.cliente{isolation:isolate}
body.cliente::before{display:none}          /* el resplandor de app.css lo reemplazan las nebulosas */
.aura{--r1:400px;--r2:380px;--r3:330px;--r4:340px;position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(var(--r1) var(--r1) at 140px 120px,rgba(251,115,24,.14),transparent 70%),
    radial-gradient(var(--r2) var(--r2) at calc(100% - 70px) calc(28% + 270px),rgba(76,95,213,.14),transparent 70%),
    radial-gradient(var(--r3) var(--r3) at calc(18% + 230px) calc(100% - 60px),rgba(255,178,122,.12),transparent 70%),
    radial-gradient(var(--r4) var(--r4) at 20px calc(58% + 240px),rgba(59,74,143,.16),transparent 70%),
    var(--fondo)}
.aura i{display:none}
@media (max-width:767px){.aura{--r1:270px;--r2:250px;--r3:220px;--r4:230px}}
.aura::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 40%,transparent 55%,rgba(8,10,16,.6) 100%)}
@media (prefers-color-scheme:light){
  .aura{background:
    radial-gradient(var(--r1) var(--r1) at 140px 120px,rgba(251,115,24,.08),transparent 70%),
    radial-gradient(var(--r2) var(--r2) at calc(100% - 70px) calc(28% + 270px),rgba(242,106,15,.07),transparent 70%),
    radial-gradient(var(--r3) var(--r3) at calc(18% + 230px) calc(100% - 60px),rgba(255,178,122,.09),transparent 70%),
    radial-gradient(var(--r4) var(--r4) at 20px calc(58% + 240px),rgba(255,154,60,.07),transparent 70%),
    var(--fondo)}
  .aura::after{display:none}
}

/* 2) Tarjetas sólidas con sombra doble */
body.cliente .tarjeta{border-radius:26px;border-color:rgba(255,255,255,.06);padding:18px 20px;
  box-shadow:0 2px 8px rgba(0,0,0,.35),0 22px 52px rgba(0,0,0,.5)}
body.cliente #lista-mandados .tarjeta,body.cliente #lista-historial .tarjeta,
body.cliente .contacto{box-shadow:0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.45)}
/* Las urgentes conservan su borde y su brillo naranja: dicen "esto es ahora". */
body.cliente .tarjeta--act,body.cliente .tarjeta.urgente{border-radius:26px;border:1.5px solid rgba(251,115,24,.55);
  box-shadow:0 2px 8px rgba(0,0,0,.35),0 22px 52px rgba(0,0,0,.5)}
body.cliente .oscura,body.cliente .nota-caja{border-radius:26px}
body.cliente .mapa-caja{border-radius:26px}
@media (prefers-color-scheme:light){
  body.cliente .tarjeta{border-color:var(--borde-tarjeta);
    box-shadow:0 2px 6px rgba(30,27,75,.06),0 18px 44px rgba(120,60,20,.12)}
  body.cliente #lista-mandados .tarjeta,body.cliente #lista-historial .tarjeta,
  body.cliente .contacto{box-shadow:0 2px 5px rgba(30,27,75,.05),0 12px 30px rgba(120,60,20,.10)}
  body.cliente .tarjeta--act,body.cliente .tarjeta.urgente{
    box-shadow:0 2px 6px rgba(30,27,75,.06),0 18px 44px rgba(120,60,20,.12)}
}

/* 3) Campos "tallados": sin borde ni fondo propio, hundidos con una sombra interior */
body.cliente input:not([type=checkbox]):not([type=radio]),body.cliente textarea,body.cliente select{
  background:transparent;border:1.5px solid transparent;border-radius:22px;
  box-shadow:inset 2px 5px 10px rgba(0,0,0,.6),inset -1px -1px 2px rgba(255,255,255,.04)}
body.cliente input:not([type=checkbox]):not([type=radio]):focus,body.cliente textarea:focus,body.cliente select:focus{
  outline:none;background:transparent;border-color:#FB7318;
  box-shadow:inset 2px 5px 10px rgba(0,0,0,.6),0 0 0 4px rgba(251,115,24,.2)}
body.cliente select option{background:var(--sup);color:var(--tinta)}
@media (prefers-color-scheme:light){
  body.cliente input:not([type=checkbox]):not([type=radio]),body.cliente textarea,body.cliente select{
    box-shadow:inset 2px 4px 10px rgba(30,27,75,.17),inset -1px -1px 2px rgba(255,255,255,.8)}
  body.cliente input:not([type=checkbox]):not([type=radio]):focus,body.cliente textarea:focus,body.cliente select:focus{
    box-shadow:inset 2px 4px 10px rgba(30,27,75,.17),0 0 0 4px rgba(251,115,24,.14)}
}

/* 7) Barra de arriba sin corte: transparente arriba de todo; al bajar, vidrio de borde a borde.
   Sin backdrop-filter en la barra misma: si no, el ::before fijo se mediría contra ella. */
body.cliente .barra{isolation:isolate;background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:border-color .25s}
body.cliente .barra::before{content:'';position:fixed;top:0;left:0;right:0;height:var(--alto-barra,62px);z-index:-1;
  background:color-mix(in srgb,var(--fondo) 78%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 6px 18px rgba(0,0,0,.10);opacity:0;transition:opacity .25s;pointer-events:none}
body.cliente.pegada .barra::before{opacity:1}

/* 8) Pantalla de carga: la misma de Catálogo Smart (cuatro rayitas que se dan vuelta,
   uiverse.io/NlghtM4re/young-swan-89, MIT), con el degradado naranja de Parallevar. */
.cargador{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.rayitas{display:flex;height:60px;align-items:center}
.rayitas i{display:block;margin:0 15px;width:35px;height:15px;border-radius:8px;
  background:linear-gradient(135deg,#FF9A3C,#F26A0F);box-shadow:0 0 15px rgba(251,115,24,.75)}
.rayitas i:nth-child(1){margin-right:-18px;transform-origin:center left;animation:cargaGiro1 2s linear infinite}
.rayitas i:nth-child(2){transform-origin:center right;animation:cargaGiro2 2s linear infinite .13s}
.rayitas i:nth-child(3){transform-origin:center right;animation:cargaGiro3 2s linear infinite .2s}
.rayitas i:nth-child(4){transform-origin:center right;animation:cargaGiro4 2s linear infinite .27s}
@keyframes cargaGiro1{0%{transform:rotate(0)}25%{transform:rotate(360deg)}30%{transform:rotate(370deg)}35%,100%{transform:rotate(360deg)}}
@keyframes cargaGiro2{0%,20%{transform:rotate(0)}30%{transform:rotate(-180deg)}35%{transform:rotate(-190deg)}40%,78%{transform:rotate(-180deg)}95%{transform:rotate(-360deg)}98%{transform:rotate(-370deg)}100%{transform:rotate(-360deg)}}
@keyframes cargaGiro3{0%,27%{transform:rotate(0)}40%{transform:rotate(180deg)}45%{transform:rotate(190deg)}50%,62%{transform:rotate(180deg)}75%{transform:rotate(360deg)}80%{transform:rotate(370deg)}85%,100%{transform:rotate(360deg)}}
@keyframes cargaGiro4{0%,38%{transform:rotate(0)}60%{transform:rotate(-360deg)}65%{transform:rotate(-370deg)}75%,100%{transform:rotate(-360deg)}}
.cargador-texto{margin:0;font-size:14px;font-weight:700;color:var(--apagado);letter-spacing:.01em}

/* Movimiento reducido: todo quieto */
@media (prefers-reduced-motion:reduce){
  .rayitas i{animation:none}
  body.cliente .barra,body.cliente .barra::before{transition:none}
}

/* Los formularios van dentro de una tarjeta, como en Catálogo Smart: así los campos tallados se ven
   hundidos en algo, y no sueltos sobre el fondo. */
body.cliente .panel-form{display:flex;flex-direction:column;gap:14px}
body.cliente .panel-form label.campo{margin-bottom:8px}
/* Los botones secundarios: contorno limpio, sin relleno ni sombra (como "Entrar con Google"). */
body.cliente .btn--linea{border-width:1.5px}