*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body{background:#1a1a1a;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px}
.app{width:100%;max-width:420px;margin:0 auto;background:var(--cream);border-radius:12px;overflow:hidden;min-height:600px}
.screen{display:none;flex-direction:column;min-height:600px}
.screen.active{display:flex}

/* HEADER */
.header{background:var(--ink);color:var(--cream);padding:20px 16px 16px;text-align:center}
.header-left{text-align:left;padding:14px 16px}
.back-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3);cursor:pointer;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line);border:none;width:100%;text-align:left}

/* LOGO SVG */
.logo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:4px}

/* BODY */
.body{flex:1;padding:20px 16px;background:var(--cream);overflow-y:auto}

/* BUTTONS */
.btn{width:100%;padding:13px;border-radius:8px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-gold{background:var(--gold);color:#fff}
.btn-brown{background:var(--ink);color:var(--cream)}
.btn-outline{background:transparent;border:1.5px solid var(--line-strong);color:var(--text-2);margin-top:10px}
.btn-outline-gold{background:transparent;border:1.5px solid var(--gold);color:var(--gold);margin-top:10px}
/* Botones del menú admin: mismos colores que la paleta de clientes (COLORES),
   uno distinto por botón, para que sea fácil ubicar cada sección de un vistazo. */
.btn-teal{background:var(--gold);color:var(--cream)}
.btn-purple{background:var(--gold);color:var(--cream)}
.btn-emerald{background:var(--gold);color:var(--cream)}
.btn-amber{background:var(--amber);color:var(--cream)}
.btn:active{opacity:.8}

/* INPUTS */
.label{font-size:13px;color:var(--text-2);margin-bottom:6px;display:block}
.input-field{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);font-size:16px;color:var(--ink);margin-bottom:14px}
.input-field:focus{outline:none;border-color:var(--gold)}
.error-msg{color:var(--err);font-size:13px;margin:-10px 0 10px;display:none}

/* CARDS */
.card{background:var(--surface);border-radius:8px;border:1px solid var(--line);padding:16px;margin-bottom:12px}
.progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress-bar{width:100%;height:8px;background:var(--sand);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .4s}
.cups{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cup{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--sand);color:var(--text-3)}
.cup.filled{background:var(--gold);color:#fff}
.cafe-banner{background:var(--gold);border-radius:8px;padding:16px;margin-bottom:12px;color:#fff;display:flex;align-items:center;gap:14px}
.cafe-num{font-size:40px;font-weight:700}

/* HISTORY */
.history-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--sand)}
.history-item:last-child{border-bottom:none}
.history-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--cream);border:1px solid var(--line);color:var(--gold);font-size:16px}
.badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:12px;margin-left:auto;white-space:nowrap}
.badge-green{background:var(--ok-soft);color:var(--ok)}
.badge-red{background:var(--err-soft);color:var(--err)}

/* STATS */
.avatar{width:56px;height:56px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:#fff;margin:0 auto 10px}
.stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.stat-box{background:var(--surface);border-radius:8px;border:1px solid var(--line);padding:10px;text-align:center}
.stat-num{font-size:24px;font-weight:700;color:var(--ink)}
.stat-lbl{font-size:11px;color:var(--text-3);margin-top:2px}

/* ADMIN */
.admin-client{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--sand)}
.admin-client:last-child{border-bottom:none}
.admin-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;flex-shrink:0}
.action-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.btn-sm{padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;gap:4px}
.btn-sm-dark{background:var(--ink);color:var(--cream)}
.btn-sm-gold{background:var(--gold);color:#fff}
.btn-sm-gray{background:var(--sand);color:var(--text-3);cursor:not-allowed}
.tab-bar{display:flex;border-bottom:1px solid var(--line);background:var(--surface)}
.tab{flex:1;padding:10px 0;text-align:center;font-size:11px;color:var(--text-3);cursor:pointer;border:none;background:transparent;font-weight:500}
.tab.active{color:var(--gold);border-bottom:2px solid var(--gold)}
.tab i{display:block;font-size:18px;margin-bottom:2px}
.pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px;background:var(--gold-soft);color:var(--amber);margin-left:auto}
.section-title{font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px}
.alert-box{background:var(--ok-soft);border:1px solid var(--ok);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--ok);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.highlight-box{background:var(--gold-soft);border-radius:8px;padding:12px 14px;margin-bottom:20px;display:flex;gap:10px;align-items:center}
.divider{display:flex;align-items:center;gap:10px;margin:14px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.divider span{font-size:12px;color:var(--text-3);white-space:nowrap}

@media(max-width:460px){body{padding:0;background:var(--ink)}.app{border-radius:0;min-height:100vh}}

/* ===== TIENDA (venta cliente) ===== */
.cat-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.cat-tab{flex-shrink:0;padding:7px 14px;border-radius:12px;font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--text-3);cursor:pointer;white-space:nowrap}
.cat-tab.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.variant-old{display:block;font-size:11px;color:var(--text-3);font-weight:500;margin-top:1px}
.cat-vista{font-size:13px;padding:9px 18px}.cat-promo{border-color:var(--gold);color:var(--gold-ink)}.cat-promo.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product-card{background:var(--surface);border-radius:8px;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.product-photo{width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--sand);position:relative}
.product-photo img{width:100%;height:100%;object-fit:cover;display:block}
.landing-flip{cursor:pointer}
.landing-flip .landing-tap-hint{position:absolute;bottom:5px;right:6px;font-size:11px;font-weight:700;color:#fff;background:rgba(60,44,28,.55);padding:2px 6px;border-radius:12px;letter-spacing:.2px}
.landing-info{position:absolute;inset:0;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;padding:10px 9px;text-align:center}
.landing-info[hidden]{display:none}
.landing-info p{font-size:11px;line-height:1.45}
.landing-info .landing-emoji{font-size:18px;display:block;margin-bottom:4px}
.product-info{padding:9px 10px 10px}
.product-var{font-size:12px;font-weight:500;color:var(--text-3);line-height:1.3;margin:-3px 0 6px}
#s-cliente-tienda .product-var,#landing-destacados .product-var{font-size:13px;margin:-6px 0 var(--sp-3,10px)}
.product-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:6px;min-height:31px}
.variant-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.variant-row:last-child{margin-bottom:0}
.variant-label{font-size:11px;color:var(--text-3);display:flex;flex-direction:column}
.variant-price{font-size:12px;font-weight:700;color:var(--gold)}
.qty-row{display:flex;align-items:center;gap:6px}
.qty-btn{width:22px;height:22px;border-radius:8px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}
.qty-add{padding:6px 10px;border-radius:8px;border:none;background:var(--gold-soft);color:var(--amber);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.qty-val{font-size:13px;font-weight:700;color:var(--ink);min-width:14px;text-align:center}
.cart-bar{background:var(--ink);color:var(--cream);border-radius:8px;padding:12px 16px;margin:0 12px 14px;display:none;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow-float);cursor:pointer;flex-shrink:0}
.cart-bar.show{display:flex}
.cart-bar-left{display:flex;flex-direction:column}
.cart-bar-count{font-size:11px;opacity:.8}
.cart-bar-total{font-size:16px;font-weight:700}
.cart-bar-cta{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gold)}
.summary-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--sand)}
.summary-item:last-child{border-bottom:none}
.summary-photo{width:40px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--sand)}
.summary-photo img{width:100%;height:100%;object-fit:cover}
.summary-name{font-size:13px;font-weight:600;color:var(--ink)}
.summary-sub{font-size:12px;color:var(--text-3);margin-top:1px}
.summary-price{font-size:13px;font-weight:700;color:var(--ink);margin-left:auto}
.summary-remove{color:var(--err);font-size:16px;cursor:pointer;padding:2px 4px}
.total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0 6px;font-size:15px;font-weight:700;color:var(--ink)}
.grind-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.grind-chip{padding:8px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer}
.grind-chip.active{background:var(--gold);border-color:var(--gold);color:#fff}
.confirm-icon{width:64px;height:64px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 14px}
.product-card.sin-stock .product-photo img{filter:grayscale(1);opacity:.55}
.product-card.sin-stock .product-info{opacity:.6}
.stock-badge{position:absolute;top:8px;left:8px;background:var(--ink);color:var(--cream);font-size:11px;font-weight:700;padding:3px 8px;border-radius:12px;z-index:2}
.stock-badge.low{background:var(--err)}
.config-stock{display:flex;align-items:center;gap:5px;flex-shrink:0}
.config-stock input{width:52px;padding:5px 6px;border-radius:8px;border:1px solid var(--line);font-size:12px;text-align:center;color:var(--ink)}
.config-stock-label{font-size:11px;color:var(--text-3);font-weight:700;text-transform:uppercase}
.config-item{flex-wrap:wrap}
.config-auto-tag{font-size:11px;font-weight:700;padding:3px 7px;border-radius:12px;flex-shrink:0}
.config-auto-tag.tag-activo{background:var(--ok-soft);color:var(--ok)}
.config-auto-tag.tag-sin_stock{background:var(--err-soft);color:var(--err)}
.config-hint{font-size:11px;color:var(--text-3);font-weight:400}

/* ===== CONFIGURACIÓN DE VENTAS (admin) ===== */
.config-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--sand)}
.config-item:last-child{border-bottom:none}
.config-photo{width:40px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--sand)}
.config-photo img{width:100%;height:100%;object-fit:cover}
.config-name{font-size:13px;font-weight:600;color:var(--ink);flex:1;line-height:1.25}
.state-toggle{display:flex;gap:4px;flex-shrink:0}
.state-btn{padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:11px;font-weight:700;color:var(--text-3);cursor:pointer}
.state-btn.active-activo{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.state-btn.active-sin_stock{background:var(--err-soft);border-color:var(--err);color:var(--err)}
.state-btn.active-oculto{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.config-cat-title{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 6px}
.config-cat-title:first-child{margin-top:0}

/* ===== VISTA DE COMPUTADORA (solo pantallas de admin) =====
   En celular todo queda exactamente igual que antes. A partir de 900px de ancho,
   si la pantalla activa es de administración, se muestra una barra fija arriba
   con el logo y un botón de color por sección (en vez del menú de admin en celular),
   y se le da más aire al contenido en vez de dejarlo angosto como en un teléfono. */
.desktop-topnav{display:none}
@media(min-width:900px){
  /* Toda la app (no solo admin) deja de verse como "la misma tarjeta angosta
     de celular" y pasa a verse como una página ancha de computadora: fondo
     claro, tarjeta blanca centrada más ancha, con más aire para el contenido. */
  body{background:var(--cream);padding:24px 20px}
  body.in-admin{padding-top:88px}
  body.in-admin .desktop-topnav{
    display:flex;position:fixed;top:0;left:0;right:0;z-index:500;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);
  }
  .desktop-topnav-inner{max-width:1140px;width:100%;margin:0 auto;display:flex;align-items:center;gap:22px;padding:10px 24px}
  .desktop-topnav-logo{height:38px;width:auto;border-radius:8px;flex-shrink:0}
  .desktop-topnav-links{display:flex;gap:8px;flex:1;flex-wrap:wrap}
  .dtn-btn{display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:8px;border:none;font-size:13px;font-weight:700;cursor:pointer;color:#fff;white-space:nowrap}
  .dtn-btn:hover{opacity:.88}
  .dtn-btn i{font-size:15px}
  .dtn-ventas{background:var(--ink)}
  .dtn-fidelizacion{background:var(--gold)}
  .dtn-informes{background:var(--gold)}
  .dtn-registro{background:var(--gold)}
  .dtn-config{background:var(--gold)}
  .dtn-catalogo{background:var(--amber)}
  .dtn-logout{flex-shrink:0;background:transparent;border:1.5px solid var(--line);color:var(--amber);padding:9px 14px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px}
  .dtn-logout:hover{background:var(--gold-soft)}

  .app{max-width:1140px;width:100%;margin:0 auto;background:transparent;border-radius:0;min-height:auto;box-shadow:none}
  /* Ninguna pantalla se comporta ya como "una sola tarjeta angosta de teléfono":
     todas (landing, login, tienda, perfil, admin, etc.) pasan a verse como una
     tarjeta ancha sobre el fondo claro, propia de una página de computadora. */
  .screen{
    border-radius:8px;background:transparent;border:1px solid transparent;overflow:hidden;
    box-shadow:none;min-height:auto;
  }
  .screen .body{max-width:640px;margin:0 auto;width:100%;background:transparent}
  #s-landing .body{max-width:920px}
  #s-cliente-tienda .body{max-width:980px}
  #s-landing .product-grid{grid-template-columns:repeat(4,1fr)}
  #s-cliente-tienda .product-grid{grid-template-columns:repeat(3,1fr)}

  /* Login: en computadora se divide en dos columnas -- una franja de marca a
     la izquierda, el formulario a la derecha -- en vez de verse como el mismo
     bloque angosto de celular nada más que estirado. */
  .screen.auth-split{flex-direction:row}
  .screen.auth-split .header{flex:0 0 380px;display:flex;flex-direction:column;justify-content:center;padding:48px 40px!important}
  .screen.auth-split .body{flex:1;max-width:440px;margin:0 auto;padding:56px 40px}

  /* Registro y acceso de administrador: formulario compacto y centrado, como
     un formulario real de computadora, no una columna de celular estirada. */
  #s-registro-cliente .body,#s-registro-ok .body,#s-admin-pass .body{max-width:440px}

  /* Menú del cliente: las 2 acciones principales, una al lado de la otra */
  .cliente-menu-body{flex-direction:row!important}
  .cliente-menu-body .btn{flex-direction:column;gap:10px;padding:32px 20px!important}
  .cliente-menu-body .btn i{font-size:28px}

  /* Landing: los pasos "¿Cómo comprar?" y el aviso de puntos, uno al lado del otro */
  .landing-info-row{display:flex;gap:16px;align-items:stretch}
  .landing-info-row>div:first-child{flex:1.4}
  .landing-highlight-card{flex:1;margin:0}

  body.in-admin #s-admin-menu{min-height:auto}
  body.in-admin #s-admin-menu .body{display:grid!important;grid-template-columns:1fr 1fr 1fr;align-content:start;gap:14px;justify-content:center;max-width:760px;margin:24px auto;background:transparent}
  body.in-admin #s-admin-menu .header{display:none} /* la barra superior ya cumple ese rol en computadora */
  /* Dashboard: las 3 tarjetas de abajo (meta, cliente frecuente, productos) en 2 columnas */
  .dash-grid-desktop{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;align-items:start}
}

/* =====================================================================
   SISTEMA DE DISEÑO — Jungle 92° (ver DESIGN_RULES.md)
   Esta capa va al final del stylesheet: define los valores base (tokens) y
   deja cada componente con estados hover / active / focus / disabled
   coherentes. Cada decisión está justificada en DESIGN_RULES.md.
   ===================================================================== */
:root{
  /* Color: tinta, papel y dorado de marca. Los textos secundarios son tonos
     cálidos con contraste AA (>= 4.5:1) sobre blanco, crema y arena. */
  --ink:#2B1F14; --cream:#ECE6D8; --paper:#fff; --line:#e8dcc8; --sand:#f0e8d8;
  --text-2:#5E5347;      /* texto descriptivo   (7.5:1 sobre blanco) */
  --text-3:#6B5F52;      /* ayudas y metadatos  (5.3:1 sobre crema)  */
  --gold:#C8A24A;        /* superficies y detalles: sobre dorado va texto oscuro (5.6:1) */
  --gold-ink:#7F5F17;    /* dorado como TEXTO sobre claro (5.9:1)    */
  --gold-soft:#FAEEDA; --amber:#854F0B;
  --ok:#3B6D11; --ok-soft:#EAF3DE; --err:#A32D2D; --err-soft:#FCEBEB;
  --forest:#2F4A24; --forest-2:#C9D8B8; --cherry:var(--err); --paper:var(--surface);

  /* Tipografía: UI en la fuente del sistema (SF en iPhone: nítida, cero carga);
     títulos y cifras clave en serif de sistema, que dialoga con el logotipo.
     Ambas pilas son locales: no hay descarga, por lo tanto no hay salto de layout. */
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  /* Escala: 10 · 11 · 12 · 13 · 14 · 16 · 18 · 20 · 24 · 28 · 32 · 40 · 48 · 56 */

  /* Espaciado: base 4px. Cercano = 4-8, mismo grupo = 12-16, grupos distintos = 24+ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* Radios: 8 controles pequeños · 12 botones e inputs · 16 tarjetas · pastilla */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* Movimiento: micro 120ms · popover 200ms · modal 260ms. Entrada ease-out, salida más corta. */
  --dur-micro:120ms; --dur-pop:200ms; --dur-modal:260ms; --dur-out:150ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{font-family:var(--font-ui)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Cifras de ancho fijo: precios, conteos y totales alinean en columna y no "bailan" al cambiar */
.app,#toast-global{font-variant-numeric:tabular-nums}
.app i[class^="ti"]{font-family:'tabler-icons'!important}

/* ---------- Tipografía con jerarquía ---------- */
.header h1{font-family:var(--font-display);font-size:24px!important;font-weight:600;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
.header p{line-height:1.4}
.stat-num,.cafe-num{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.stat-num{font-size:24px}
.stat-lbl{color:var(--text-3)}
.section-title,.config-cat-title{letter-spacing:.08em}
.config-stock-label{letter-spacing:.06em}
.label{color:var(--text-2);font-weight:500}
.variant-price{font-weight:700}
::placeholder{color:var(--text-3);opacity:1}

/* ---------- Botones: jerarquía clara entre acciones ---------- */
.btn,.btn-sm,.tab,.cat-tab,.grind-chip,.state-btn,.qty-btn,.qty-add,.back-btn,.dtn-btn,.dtn-logout,.summary-remove,.cart-bar{
  transition:background-color var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft),
             color var(--dur-micro) var(--ease-soft),box-shadow var(--dur-micro) var(--ease-soft),
             filter var(--dur-micro) var(--ease-soft),transform var(--dur-micro) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn{font-size:16px;letter-spacing:.005em}
.btn:active{opacity:1}
.btn:not(:disabled):active,.btn-sm:not(:disabled):active,.cat-tab:active,.grind-chip:active,.state-btn:active,.qty-add:active,.cart-bar:active{transform:scale(.97)}
.qty-btn:not(:disabled):active{transform:scale(.9)}
.btn-gold,.btn-sm-gold{color:var(--ink)}               /* sobre dorado: texto oscuro (5.6:1; blanco daba 2.4:1) */
.btn-outline-gold{color:var(--gold-ink);border-color:var(--gold)}
.btn-outline{color:var(--text-2);border-color:var(--line-strong)}
/* Acción poco frecuente (acceso de personal): visible pero no compite con la acción principal */
.btn-quiet{background:transparent;border:0;color:var(--text-2);font-size:13px;font-weight:600;padding:12px}
.btn-quiet:hover{text-decoration:underline;text-underline-offset:3px}
.btn:disabled,.btn-sm:disabled,.state-btn:disabled,.qty-btn:disabled{cursor:not-allowed}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

@media (hover:hover){
  .btn-gold:hover,.btn-sm-gold:hover{filter:brightness(.94)}
  .btn-brown:hover,.btn-sm-dark:hover,.btn-teal:hover,.btn-purple:hover,.btn-emerald:hover,.btn-amber:hover{filter:brightness(1.14)}
  .btn-outline:hover{border-color:var(--text-3);background:rgba(60,44,28,.04)}
  .btn-outline-gold:hover{background:var(--gold-soft)}
  .cat-tab:not(.active):hover,.grind-chip:not(.active):hover,.state-btn:not([class*="active-"]):hover{border-color:var(--gold);color:var(--ink)}
  .qty-btn:not(:disabled):hover{background:var(--gold-soft);border-color:var(--gold)}
  .qty-add:hover{background:var(--gold-line)}
  .tab:not(.active):hover{color:var(--ink)}
  .back-btn:hover{color:var(--ink)}
  .cart-bar:hover{filter:brightness(1.12)}
  .product-card:not(.sin-stock):hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
  .config-item[onclick]:hover{background:rgba(200,162,74,.07)}
  .admin-client:hover{background:rgba(200,162,74,.06)}
}
.product-card{transition:border-color var(--dur-pop) var(--ease-soft),box-shadow var(--dur-pop) var(--ease-soft)}

/* ---------- Foco visible (teclado) ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
.header :focus-visible,.cart-bar:focus-visible,.cat-tab.active:focus-visible,.btn-brown:focus-visible{outline-color:var(--gold)}
.input-field:focus,.input-field:focus-visible{outline:none;border-color:var(--gold-ink);box-shadow:var(--ring)}
.input-field{transition:border-color var(--dur-micro) var(--ease-soft),box-shadow var(--dur-micro) var(--ease-soft)}

/* ---------- Tamaños táctiles: cuerpo visible + área de toque de ~44px ---------- */
.qty-btn{width:32px;height:32px;border-radius:var(--r-sm);font-size:16px;position:relative}
.qty-btn::after,.qty-add::after,.btn-sm::after,.state-btn::after{content:'';position:absolute;inset:-6px}
.qty-add,.btn-sm,.state-btn{position:relative}
.qty-add{padding:8px 12px;min-height:32px;font-size:12px}
.qty-val{min-width:20px;font-size:14px}
.qty-row{gap:8px}
.btn-sm{min-height:36px;padding:8px 12px;font-size:12px}
.state-btn{padding:8px 12px;font-size:11px}
.cat-tab{padding:8px 16px;font-size:12px}
.grind-chip{padding:8px 16px}
.summary-remove{padding:8px 12px;margin:-8px -8px -8px 0}
.config-stock input{width:64px;padding:8px;font-size:13px}
.back-btn{padding:12px 16px;color:var(--text-2)}

/* Cada iPhone amplía la página al enfocar un campo de menos de 16px: se evita */
@media (pointer:coarse){input,select,textarea{font-size:16px!important}}

/* ---------- Movimiento con propósito ---------- */
@keyframes j-fade-in{from{opacity:0}to{opacity:1}}
@keyframes j-rise-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Cambio de pantalla: un fundido corto orienta al usuario ("llegué a otra vista") */
.screen.active{animation:j-fade-in var(--dur-pop) var(--ease-out)}
/* El carrito aparece desde abajo: relaciona la barra con la acción "Agregar" */
.cart-bar.show{animation:j-rise-in var(--dur-pop) var(--ease-out)}
.alert-box{animation:j-rise-in var(--dur-pop) var(--ease-out)}
/* Tarjeta de origen: confirma que el toque "dio vuelta" la foto */
.landing-info:not([hidden]){animation:j-fade-in var(--dur-pop) var(--ease-out)}
.progress-fill{transition:width .4s var(--ease-in-out)}

/* ---------- Avisos (toast) con estado: listo / error ---------- */
#toast-global{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:9999;
  max-width:min(92vw,440px);padding:12px 16px;border-radius:var(--r-md);
  background:var(--ink);color:var(--cream);border-left:4px solid var(--gold);
  font-size:13px;font-weight:600;line-height:1.4;text-align:left;
  box-shadow:var(--shadow-float);
  opacity:0;transform:translate(-50%,8px);pointer-events:none;
  transition:opacity var(--dur-out) var(--ease-soft),transform var(--dur-out) var(--ease-soft);
}
#toast-global.show{opacity:1;transform:translate(-50%,0);transition-duration:var(--dur-pop);transition-timing-function:var(--ease-out)}
#toast-global.ok{border-left-color:#8DBF5B}
#toast-global.err{border-left-color:#E8837A}

/* Texto/ícono sobre dorado y avatares dorados */
.admin-av[style*="var(--gold)" i]{color:var(--ink)}

/* ---------- Configuración de ventas: nombre arriba, controles abajo, alineados ---------- */
.config-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0}
.config-name{flex:1 1 calc(100% - 52px);min-width:0}
.config-hint{color:var(--text-3);font-size:11px}
.config-item>.config-stock,.config-item>.state-toggle{margin-left:52px;flex:1 1 100%}
.state-toggle{flex-wrap:wrap;gap:8px}
.config-auto-tag{font-size:11px}
.config-stock-label{color:var(--text-3);font-size:11px}

@media (prefers-reduced-motion:reduce){
  *:not(#loading-overlay):not(#loading-overlay *),*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =====================================================================
   LANDING v2 — Dirección: "etiqueta de origen peruana".
   Papel crema + tinta café; verde selva y rojo cereza como únicos acentos
   (salen del logotipo). Esquinas casi rectas (etiqueta impresa), serif grande,
   datos de lote en mayúsculas pequeñas. Ritmo: aire → franja verde → catálogo
   → franja tinta → cierre.
   ===================================================================== */
:root{--r-xs:4px}
.j-body{padding:0!important;overflow-y:auto;background:var(--cream)}
.j-wrap{width:100%;max-width:1040px;margin:0 auto;padding-left:var(--sp-5);padding-right:var(--sp-5)}
.j-kicker{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* Masthead: el logotipo es firma, no protagonista */
.j-mast{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--ink)}
.j-mast img{height:64px;width:auto;border-radius:var(--r-xs);display:block}
.j-mast .j-kicker{text-align:right;line-height:1.5}

/* Hero tipográfico: el titular ES la imagen */
.j-hero{padding-top:var(--sp-10);padding-bottom:var(--sp-10)}
.j-h1{font-family:var(--font-display);font-weight:600;font-size:52px;line-height:.98;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.j-h1 em{font-style:normal;color:var(--cherry)}
.j-hero-foot{display:grid;gap:var(--sp-6);margin-top:var(--sp-8)}
.j-lede{font-size:16px;line-height:1.6;color:var(--text-2);max-width:56ch}
.j-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);width:100%;max-width:320px;min-height:52px;padding:0 var(--sp-6);border:0;border-radius:var(--r-xs);background:var(--ink);color:var(--cream);font-size:15px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-soft),transform var(--dur-micro) var(--ease-out)}
.j-btn i{transition:transform var(--dur-pop) var(--ease-out)}
.j-btn:active{transform:scale(.98)}
.j-btn.on-dark{background:var(--gold);color:var(--ink)}
@media(hover:hover){.j-btn:hover{background:var(--text-2)}.j-btn.on-dark:hover{background:var(--gold)}.j-btn:hover i{transform:translateX(4px)}}

/* Franja de origen: tres lotes, tres altitudes (datos reales de las etiquetas) */
.j-origin{background:var(--forest);color:var(--cream);padding:var(--sp-10) 0}
.j-origin .j-kicker{color:var(--forest-2)}
.j-origin-list{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid}
.j-origin-list li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--sp-4);padding:var(--sp-4) 0;border-top:1px solid rgba(244,236,228,.28)}
.j-origin-list li:last-child{border-bottom:1px solid rgba(244,236,228,.28)}
.j-place{font-family:var(--font-display);font-size:24px;line-height:1.15;font-weight:600}
.j-place small{display:block;margin-top:var(--sp-1);font-family:var(--font-ui);font-size:12px;font-weight:500;color:var(--forest-2);letter-spacing:.02em}
.j-alt{font-family:var(--font-display);font-size:32px;line-height:1;font-weight:600;white-space:nowrap}
.j-alt span{font-family:var(--font-ui);font-size:12px;font-weight:500;color:var(--forest-2);margin-left:var(--sp-1)}

/* Catálogo: las bolsas llevan la imagen; sin marcos que compitan */
.j-cat{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
.j-cat-head{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.j-h2{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.j-hint{font-size:13px;color:var(--text-3)}
#landing-destacados{gap:var(--sp-6) var(--sp-3)}
#landing-destacados .product-card{background:transparent;border:0;border-radius:0;box-shadow:none!important}
#landing-destacados .product-photo{border-radius:var(--r-xs);aspect-ratio:4/5}
#landing-destacados .product-photo img{transition:transform var(--dur-modal) var(--ease-out)}
@media(hover:hover){#landing-destacados .product-photo:hover img{transform:scale(1.03)}}
#landing-destacados .landing-flip .landing-tap-hint{bottom:var(--sp-2);right:var(--sp-2);border-radius:var(--r-xs);padding:4px 8px;font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;background:rgba(60,44,28,.78)}
#landing-destacados .landing-info{border-radius:var(--r-xs);padding:var(--sp-4);background:var(--ink)}
#landing-destacados .landing-info p{font-size:13px!important;line-height:1.5!important;text-align:left}
#landing-destacados .product-info{padding:var(--sp-3) 0 0}
.j-lot{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-1)}
#landing-destacados .product-name{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.1;min-height:0;margin-bottom:var(--sp-2);letter-spacing:-.01em}
.price-from{display:flex;align-items:baseline;gap:6px}
.price-from span{font-size:11px;color:var(--text-3);font-weight:500}
.price-from strong{font-size:15px;font-weight:700;color:var(--ink)}

/* Cómo comprar + tarjeta de fidelidad (5 sellos: el 5.º es el café gratis) */
.j-how{background:var(--ink);color:var(--cream);padding:var(--sp-12) 0}
.j-how .j-kicker{color:var(--line-strong)}
.j-how .j-h2{color:var(--cream)}
.j-how-grid{display:grid;gap:var(--sp-10)}
.j-steps{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-5)}
.j-steps li{display:grid;grid-template-columns:40px 1fr;gap:var(--sp-3);align-items:baseline;font-size:15px;line-height:1.5;color:var(--line)}
.j-steps b{font-family:var(--font-display);font-size:32px;line-height:1;font-weight:600;color:var(--gold)}
.j-card{border:1px dashed rgba(244,236,228,.55);border-radius:var(--r-xs);padding:var(--sp-6)}
.j-card p{font-size:14px;line-height:1.5;color:var(--line);margin-top:var(--sp-5)}
.j-card p strong{color:var(--cream)}
.j-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2)}
.j-stamps i{display:block;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(244,236,228,.55)}
.j-stamps i:not(:last-child){background:rgba(244,236,228,.14)}
.j-stamps i:last-child{background:var(--gold);border-color:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:13px}

/* Cierre */
.j-close{padding-top:var(--sp-12);padding-bottom:var(--sp-8)}
.j-close .j-h2{font-size:40px;line-height:1;margin-bottom:var(--sp-6)}
.j-foot{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-6);padding-bottom:var(--sp-8);margin-top:var(--sp-10);border-top:1px solid var(--ink)}
.j-foot a{color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;margin-left:calc(var(--sp-2)*-1);padding:0 var(--sp-2)}
.j-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.j-foot p{font-size:12px;color:var(--text-3)}

@media(min-width:900px){
  #s-landing .body{max-width:none!important}
  .j-mast img{height:80px}
  .j-hero{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
  .j-h1{font-size:96px;max-width:11ch}
  .j-hero-foot{grid-template-columns:1fr auto;align-items:end;gap:var(--sp-12);margin-top:var(--sp-10)}
  .j-btn{width:auto;max-width:none;min-width:280px}
  .j-origin-list{grid-template-columns:repeat(3,1fr);column-gap:var(--sp-8)}
  .j-origin-list li{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-5) 0 var(--sp-6);border-bottom:1px solid rgba(244,236,228,.28)}
  .j-alt{font-size:48px}
  .j-cat-head{flex-direction:row;align-items:baseline;justify-content:space-between}
  .j-h2{font-size:40px}
  #landing-destacados{gap:var(--sp-8) var(--sp-5)}
  .j-how-grid{grid-template-columns:1.2fr 1fr;gap:var(--sp-12);align-items:start}
  .j-close{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8)}
  .j-close .j-h2{font-size:56px;margin:0}
}
.back-btn{position:relative}.back-btn::after{content:"";position:absolute;inset:-15px -12px}
/* foco del lote (foto): anillo interior para que no lo recorte overflow */
#landing-destacados .landing-flip:focus-visible{outline-offset:-3px;outline-color:var(--gold)}

/* =====================================================================
   SISTEMA v3 — la dirección "etiqueta de origen" en TODAS las pantallas.
   Esquinas casi rectas (4px) como una etiqueta impresa; serif en títulos,
   nombres de producto y cifras; menús como índice (barra de color + título);
   dorado como TEXTO solo en su versión oscura (contraste AA).
   ===================================================================== */
.card,.stat-box,.alert-box,.highlight-box,.cafe-banner,.history-icon,.product-card,.input-field,
.btn,.btn-sm,.btn-outline,.cat-tab,.grind-chip,.badge,.pill,.stock-badge,.config-auto-tag,.state-btn,.qty-btn,.qty-add,.cart-bar{border-radius:var(--r-xs)}
.cup{border-radius:50%}                       /* los vasitos = los sellos de la tarjeta de puntos */
.cup.filled{background:var(--gold);color:var(--ink)}
.cafe-banner,.avatar,.grind-chip.active{color:var(--ink)}
.card{border-color:var(--line)}
.app{border-radius:var(--r-lg)}
[style*="border-radius:8px"],[style*="border-radius:9px"],[style*="border-radius:10px"],[style*="border-radius:12px"],[style*="border-radius:14px"],[style*="border-radius:20px"]{border-radius:var(--r-xs)!important}
[style*="border-radius:16px"]{border-radius:var(--r-md)!important}
@media(max-width:460px){.app{border-radius:0}}

/* Dorado como texto: siempre la versión con contraste */
.variant-price,.tab.active{color:var(--gold-ink)}
.tab.active{border-bottom-color:var(--gold-ink)}
.cart-bar .variant-price{color:inherit}

/* Cabeceras y volver */
.back-btn{background:transparent;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink)}
.header{padding-top:var(--sp-5);padding-bottom:var(--sp-4)}
.header-left h1,.header h1{font-family:var(--font-display)}

/* Menús (cliente y admin): índice editorial, un color de sección por fila para ubicarse de un vistazo */
#s-admin-menu .body>.btn,#s-cliente-menu .body>.btn{
  justify-content:flex-start;gap:var(--sp-4);text-align:left;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-left:6px solid var(--ink);border-radius:var(--r-xs);
  font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;
  padding:var(--sp-5) var(--sp-5)!important;margin:0}
#s-admin-menu .body>.btn::after,#s-cliente-menu .body>.btn::after{content:"→";margin-left:auto;font-family:var(--font-ui);font-size:18px;color:var(--text-3);transition:transform var(--dur-pop) var(--ease-out)}
#s-admin-menu .body>.btn i,#s-cliente-menu .body>.btn i{font-size:20px!important;color:var(--text-2)}
#s-admin-menu .body>.btn-brown,#s-cliente-menu .body>.btn-brown{border-left-color:var(--ink)}
#s-admin-menu .body>.btn-gold,#s-cliente-menu .body>.btn-gold{border-left-color:var(--gold)}
#s-admin-menu .body>.btn-teal{border-left-color:var(--gold)}
#s-admin-menu .body>.btn-purple{border-left-color:var(--gold)}
#s-admin-menu .body>.btn-emerald{border-left-color:var(--gold)}
#s-admin-menu .body>.btn-amber{border-left-color:var(--amber)}
@media(hover:hover){
  #s-admin-menu .body>.btn:hover,#s-cliente-menu .body>.btn:hover{background:var(--surface);filter:none;box-shadow:var(--shadow-sm)}
  #s-admin-menu .body>.btn:hover::after,#s-cliente-menu .body>.btn:hover::after{transform:translateX(4px);color:var(--ink)}
}

/* Tienda: las bolsas sin marco, como en la landing */
#s-cliente-tienda .product-card{background:transparent;border:0;border-radius:0;box-shadow:none!important}
#s-cliente-tienda .product-photo{border-radius:var(--r-xs);aspect-ratio:4/5}
#s-cliente-tienda .product-info{padding:var(--sp-3) 0 0}
#s-cliente-tienda .product-name{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.15;min-height:0;margin-bottom:var(--sp-3)}
#s-cliente-tienda .product-grid{gap:var(--sp-6) var(--sp-3)}
.variant-price{font-size:13px}
.cat-tab.active{background:var(--ink);color:var(--cream)}
.section-title{color:var(--text-3)}
.stat-num{color:var(--ink)}
.progress-bar,.progress-fill{border-radius:2px}
.dtn-btn,.dtn-logout,.summary-remove,.toggle-btn{border-radius:var(--r-xs)!important}

/* ---------- Inventario de café ---------- */
.btn-forest{background:var(--forest);color:var(--cream)}
.dtn-inventario{background:var(--forest)}
#s-admin-menu .body>.btn-forest{border-left-color:var(--forest)}
.inv-card{background:var(--paper,#fff);border:1px solid var(--line,var(--line));border-radius:4px;padding:16px;margin-bottom:12px}
.inv-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.inv-name{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--ink)}
.inv-kg{font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1;color:var(--ink)}
.inv-kg.inv-none{color:var(--text-3)}
.inv-kg.inv-low,.inv-low{color:var(--err)}
.inv-sub{font-size:12px;color:var(--text-3);margin:4px 0 12px}
.inv-row{display:flex;gap:8px;align-items:stretch}
.inv-row .input-field{margin-bottom:0;flex:1;min-width:0}
.inv-btn{width:auto!important;flex:0 0 auto;padding:0 16px!important;margin:0!important}
.inv-fix{margin-top:12px;font-size:12px;color:var(--text-2)}
.inv-fix summary{cursor:pointer;padding:8px 0;font-weight:600}
.inv-fix .inv-row{margin-top:4px}
.inv-empty{font-size:12px;color:var(--text-3);padding:8px 0}
.mov-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line,var(--line))}
.mov-main{font-size:13px;color:var(--ink);min-width:0}
.mov-det{font-size:11px;color:var(--text-3);margin-top:2px}
.mov-num{text-align:right;flex-shrink:0}
.mov-kg{font-size:14px;font-weight:700}
.mov-pos{color:var(--ok)}.mov-neg{color:var(--err)}
.mov-saldo{font-size:11px;color:var(--text-3);margin-top:2px}
.mov-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-right:4px}
.mov-in{background:var(--ok-soft);color:var(--ok)}.mov-out{background:var(--err-soft);color:var(--err)}.mov-adj{background:var(--gold-soft);color:var(--amber)}
.rule-block{margin-bottom:16px}
.rule-title{font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin:8px 0}
.rule-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line,var(--line));font-size:13px}
.rule-name{font-weight:600;color:var(--ink)}
.rule-txt{text-align:right;color:var(--text-2);font-size:12px}
.rule-txt span{color:var(--text-3)}
.rule-missing{flex-direction:column;background:var(--gold-soft);padding:12px;border-radius:4px;margin-bottom:8px;border:0}
.rule-hint{font-weight:400;font-size:12px;color:var(--amber);margin:2px 0 8px}
@media(max-width:380px){.rule-missing .inv-row{flex-wrap:wrap}}

/* ---------- Inventario · 3 listas desplegables ---------- */
.inv-sec{background:var(--paper,#fff);border:1px solid var(--line,var(--line));border-radius:4px;margin-bottom:10px}
.inv-sh{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:64px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.inv-st{flex:1;min-width:0}
.inv-st b{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.2}
.inv-st small{display:block;font-size:12px;color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums}
.inv-w{color:var(--err);font-weight:700}
.inv-chev{font-size:20px;transition:transform 200ms cubic-bezier(.23,1,.32,1);flex:none}
.inv-sec.open .inv-chev{transform:rotate(180deg)}
.inv-sec.open>.inv-sh{border-bottom:1px solid var(--line,var(--line))}
.inv-sb{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms cubic-bezier(.23,1,.32,1)}
.inv-sec.open>.inv-sb{grid-template-rows:1fr}
.inv-sb>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear 240ms}
.inv-sec.open>.inv-sb>div{visibility:visible;transition-delay:0s}
.inv-in{padding:4px 16px 16px}
#inv-cafes,#inv-insu,#inv-metod{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding-top:12px}
#inv-cafes .inv-cafe,#inv-insu .inv-cafe,#inv-metod .inv-cafe{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:176px;padding:12px;border:1px solid var(--line,var(--line-strong));border-radius:8px;background:rgba(43,31,20,.04)}
#inv-cafes .inv-row2,#inv-insu .inv-row2,#inv-metod .inv-row2{flex-direction:column-reverse;align-items:flex-start;gap:4px}
#inv-cafes .inv-nm,#inv-insu .inv-nm,#inv-metod .inv-nm{font-size:14px!important;line-height:1.25}
#inv-cafes .inv-kg2,#inv-insu .inv-kg2,#inv-metod .inv-kg2{font-size:28px}
#inv-cafes .inv-sub,#inv-insu .inv-sub,#inv-metod .inv-sub{font-size:12px;line-height:1.35;flex:1}
#inv-cafes .inv-acts,#inv-insu .inv-acts,#inv-metod .inv-acts{flex-direction:column;gap:6px}
#inv-cafes .inv-acts .inv-b,#inv-insu .inv-acts .inv-b,#inv-metod .inv-acts .inv-b{min-height:40px;padding:0 8px;font-size:13px}
#inv-cafes .inv-bar{display:none}
#inv-cafes .inv-pan,#inv-insu .inv-pan,#inv-metod .inv-pan,#inv-insu .inv-empty,#inv-metod .inv-empty{grid-column:1/-1;margin-top:0}
.inv-add{align-items:center;justify-content:center!important;text-align:center;border-style:dashed!important;background:transparent!important;color:var(--ink);font:600 14px var(--font-ui);cursor:pointer}
.inv-add i{font-size:24px}
.inv-edit .inv-inp{background:var(--sand)!important;border:1.5px solid var(--line-strong);color:var(--ink)}
.inv-cafe{padding:14px 0;border-bottom:1px solid var(--line,var(--line))}.inv-cafe:last-child{border-bottom:0}
.inv-row2{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.inv-nm{font-family:var(--font-display);font-size:18px;font-weight:600}
.inv-kg2{font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.inv-kg2.inv-none{color:var(--text-3)}.inv-kg2.inv-low{color:var(--err)}
.inv-acts{display:flex;gap:8px}
.inv-b{min-height:44px;padding:0 14px;border-radius:4px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 14px var(--font-ui);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform 120ms cubic-bezier(.23,1,.32,1),background-color 120ms ease}
.inv-b:active{transform:scale(.98)}
.inv-acts .inv-b{flex:1}
.inv-b1{background:var(--ink);color:var(--cream)}
.inv-b.on:not(.inv-b-danger){box-shadow:inset 0 -3px 0 var(--gold)}
.inv-b-danger{color:var(--err);border-color:var(--err)}.inv-b-danger.on{background:var(--err);color:#fff}
.inv-b-add{width:100%;min-height:40px;margin-top:10px}
.inv-edit{background:var(--gold-soft);border:1px solid var(--gold);border-radius:4px;padding:12px;margin-top:10px}
.inv-edit label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--amber);margin-bottom:6px}
.inv-fld{display:flex;gap:8px}
.inv-inp{width:100%;flex:1;min-width:0;height:44px;border:1.5px solid var(--ink);border-radius:4px;background:var(--surface);padding:0 12px;font:600 18px var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.inv-inp-s{height:40px;font-size:15px}.inv-inp-t{font-weight:400;font-size:14px}
.inv-inp:focus{outline:none;border-color:var(--gold-ink);box-shadow:var(--ring)}
.inv-note{font-size:12px;color:var(--amber);margin-top:8px;line-height:1.4}
.inv-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.inv-chip{min-height:36px;padding:0 12px;border:1.5px solid var(--ink);border-radius:4px;font:500 13px var(--font-ui);background:transparent;color:var(--ink);cursor:pointer}
.inv-chip.on{background:var(--ink);color:var(--cream);font-weight:700}
.mov-r{padding:12px 0;border-bottom:1px solid var(--line,var(--line))}.mov-r:last-child{border-bottom:0}
.mov-top{display:flex;justify-content:space-between;gap:10px}
.mov-main{font-size:14px;min-width:0}.mov-main b{color:var(--ink)}
.mov-der{display:flex;align-items:center;gap:2px;flex:none}
.mov-ed{font-size:11px;color:var(--text-3);border:1px solid var(--line,var(--line));border-radius:4px;padding:1px 5px;margin-left:6px}
.mov-an{color:var(--err);border-color:var(--err)}
.mov-r.anulado .mov-kg,.mov-r.anulado .mov-main b{text-decoration:line-through;opacity:.6}
.mov-r.editando{background:var(--gold-soft);margin:0 -8px;padding:12px 8px}
.mov-edit{background:transparent;border:0;padding:0;margin-top:10px}
.inv-pen{width:40px;height:40px;border:0;background:none;color:var(--text-3);cursor:pointer;display:grid;place-items:center;border-radius:4px;font-size:18px}
.inv-pen:hover,.inv-pen[aria-expanded="true"]{color:var(--ink);background:rgba(60,44,28,.06)}
.cs-prod{padding:13px 0;border-bottom:1px solid var(--line,var(--line))}
.cs-nm{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:6px}
.cs-nm span{font:400 12px var(--font-ui);color:var(--text-3);margin-left:6px}
.cs-tg{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);min-height:40px}.cs-tg em{font:700 11px var(--font-ui);font-style:normal;margin-left:6px}.cs-tg .ti{margin-left:auto;transition:transform .2s}.cs-prod.open .cs-tg .ti{transform:rotate(180deg)}.cs-tg:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.cs-body{padding-top:6px}
.cs-var{margin-top:8px}
.cs-lab{font-size:12px;color:var(--text-3);margin-bottom:4px}
.cs-row{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:8px;align-items:center;margin-top:6px}
.cs-row:has(.inv-pen){grid-template-columns:minmax(0,1fr) 104px 36px}
.cs-g{position:relative}.cs-g::after{content:'g';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text-3);pointer-events:none}
.cs-g .inv-inp{text-align:right;padding-right:26px}
.inv-sel{height:40px;border:1.5px solid var(--line,var(--line));border-radius:4px;background:var(--surface);padding:0 10px;font-size:14px;color:var(--ink);min-width:0;width:100%}
.cs-mod .inv-inp{border-color:var(--gold-ink);box-shadow:var(--ring)}
.cs-bar{position:sticky;bottom:8px;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--cream);padding:10px 12px;border-radius:4px;font-size:13px;margin-top:12px;z-index:5}
.cs-bar[hidden]{display:none}
.cs-bar b{flex:1}
.cs-bar .inv-b{min-height:40px;border-color:var(--gold)}.cs-go{background:var(--gold);color:var(--ink)}.cs-no{color:var(--cream);border-color:rgba(236,230,216,.4)!important}
@media(prefers-reduced-motion:reduce){.inv-sb,.inv-chev,.inv-b{transition:none}}

/* ===== Pedidos, avisos, reclamos y legales ===== */
.pd-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.pd-small{font-size:13px;line-height:1.5;color:var(--text-2)}
.pd-box{background:var(--surface);border:1px solid var(--line,var(--line));border-radius:4px;padding:14px 16px;margin:10px 0}
.pd-box p{margin:0 0 8px}
.pd-row{display:flex;gap:10px;align-items:flex-end}
.pd-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;margin:12px 0;min-height:44px}
.pd-check input{width:20px;height:20px;margin-top:1px;flex-shrink:0}
.pd-seg{display:flex;gap:8px;margin-bottom:10px}
.pd-seg button{flex:1;min-height:44px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:4px;font:500 14px inherit;font-family:inherit;cursor:pointer}
.pd-seg button.on{background:var(--ink);color:var(--cream);font-weight:700}
.pd-num{font-family:var(--font-display,Georgia,serif);font-size:28px;font-weight:600;margin:6px 0;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pd-legal{font-size:15px;line-height:1.65;max-width:68ch;margin:0 auto;color:var(--ink)}
.pd-legal h3{font-family:var(--font-display,Georgia,serif);font-size:18px;margin:22px 0 6px}
.pd-legal p,.pd-legal ul,.pd-legal ol{margin:0 0 10px}
.pd-legal ul,.pd-legal ol{padding-left:22px}
.pd-legal li{margin-bottom:6px}
.pd-legal a{color:var(--gold-ink);font-weight:700}
.pd-upd{font-size:12px;color:var(--text-3)}
.pd-legal-nav{display:flex;flex-direction:column;border-top:1px solid var(--ink);margin:28px auto 0;max-width:68ch}
.pd-legal-nav a{min-height:44px;display:flex;align-items:center;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);gap:8px}
.pd-legal-nav a.pd-lr{color:var(--err)}
.pd-btn{min-height:44px;padding:0 16px;border-radius:4px;font:700 14px inherit;font-family:inherit;cursor:pointer;flex:1}
.pd-btn-fill{background:var(--forest);color:var(--cream);border:0}
.pd-btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
#pd-cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--ink);border-radius:4px;padding:14px 16px;box-shadow:var(--shadow-float)}
#pd-cookies[hidden]{display:none}
#pd-cookies p{font-size:14px;line-height:1.5;margin:0 0 10px}
#pd-cookies a{color:var(--gold-ink);font-weight:700}
.pd-avisos{background:var(--forest);color:var(--cream);border-radius:4px;padding:14px 16px;margin-bottom:14px}
.pd-avisos p{margin:0 0 10px;font-size:15px;line-height:1.45}
.pd-avisos .btn{margin-bottom:8px}
.pd-avisos.ok .btn{display:none}
.pd-ped{background:var(--surface);border:1px solid var(--line,var(--line));border-radius:4px;padding:16px;margin-bottom:12px}
.pd-ped-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pd-ped-num{font-family:var(--font-display,Georgia,serif);font-size:18px;font-weight:600}
.pd-estado{font-size:13px;font-weight:700;color:var(--gold-ink)}
.pd-estado.fin{color:var(--forest)}.pd-estado.mal{color:var(--err)}
.pd-items{font-size:14px;line-height:1.5;color:var(--text-2);margin:6px 0 12px}
.pd-lin{list-style:none;margin:0 0 12px;padding:0 0 0 4px}
.pd-lin li{display:flex;gap:14px;min-height:34px;position:relative;font-size:15px}
.pd-lin li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);flex-shrink:0;margin-top:2px;box-sizing:border-box;background:var(--surface)}
.pd-lin li::after{content:"";position:absolute;left:6px;top:18px;width:2px;height:calc(100% - 14px);background:var(--line-strong)}
.pd-lin li:last-child::after{display:none}
.pd-lin li.hecho{color:var(--ink);font-weight:700}
.pd-lin li.hecho::before{background:var(--forest);border-color:var(--forest)}
.pd-lin li.hecho::after{background:var(--forest)}
.pd-lin li.actual{color:var(--gold-ink);font-weight:700}
.pd-lin li.actual::before{background:var(--gold);border-color:var(--gold);box-shadow:var(--ring)}
.pd-lin li:not(.hecho):not(.actual){color:var(--text-3)}
.pd-lin small{display:block;font-weight:400;font-size:12px;color:var(--text-2)}
.pd-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pd-tabs button{min-height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);font:500 14px inherit;font-family:inherit;cursor:pointer}
.pd-tabs button.on{background:var(--ink);color:var(--cream);font-weight:700}
.adm-entrando{display:none;text-align:center;font-weight:700;color:var(--ink);padding:48px 16px}
html.admin-restaurando #s-admin-pass .header,html.admin-restaurando #s-admin-pass .body{display:none!important}
html.admin-restaurando #s-admin-pass .adm-entrando{display:block}
.pd-fechas input{min-width:0;width:100%;font-size:14px;padding-left:8px;padding-right:6px}
.pd-acc button,.pd-acc a{height:auto;padding:8px 14px;line-height:1.25;text-align:center}
.cp-row b{white-space:nowrap;flex:none}
@media(max-width:560px){
  .stat-box .stat-num{font-size:clamp(17px,5.4vw,24px);white-space:nowrap}
  .inv-in .inv-cafe.inv-add,.inv-in>.inv-cafe:last-child{grid-column:1/-1}
  .inv-in .inv-cafe.inv-add{min-height:64px}
  #s-admin-config-ventas .cat-tabs{flex-wrap:wrap;overflow:visible}
}
.pd-pago{margin-top:8px;padding:10px 12px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-strong);font-size:13px;line-height:1.45;color:var(--ink)}
.pd-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pd-acc button,.pd-acc a{min-height:44px;padding:0 14px;border-radius:4px;font:700 14px inherit;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.pd-acc .pri{background:var(--forest);color:var(--cream);border:0}
.pd-acc .oro{background:var(--gold);color:var(--ink);border:0}
.pd-acc .lin{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.pd-acc .cancelar{background:transparent;color:var(--err);border:1.5px solid var(--err)}
.pd-acc .cancelar:active{transform:scale(.97)}
.pd-acc .mal{background:transparent;color:var(--err);border:1.5px solid var(--err)}
.pd-acc .wa{background:transparent;color:var(--forest);border:1.5px solid var(--forest);flex:1}
.pd-vacio{color:var(--text-3);font-size:14px;text-align:center;padding:22px 0}
.pd-venc{font-size:12px;font-weight:700}
.pd-venc.rojo{color:var(--err)}
@media print{.back-btn,#pd-cookies,.btn{display:none!important}}

.j-legal{display:flex;flex-direction:column;margin:var(--sp-2,8px) 0}
.j-legal a{font-size:13px!important;font-weight:500!important;color:var(--ink)!important}
.j-legal a.j-lr{color:var(--err)!important;font-weight:700!important}
.dtn-pedidos{background:#A4552B}.dtn-reclamos{background:var(--err)}
.pd-wa{position:fixed;right:16px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%;background:var(--forest);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:28px;text-decoration:none;box-shadow:var(--shadow-float)}

/* ===== Computadora v4: pantallas nuevas y menú del cliente más ordenados ===== */
@media(min-width:900px){
  /* Barra de admin: una sola fila con 9 secciones */
  body.in-admin{padding-top:84px}
  .desktop-topnav-inner{max-width:1280px;gap:16px;padding:10px 20px}
  .desktop-topnav-links{flex-wrap:nowrap;gap:6px}
  .dtn-btn{padding:9px 11px;font-size:12px}
  .dtn-btn i{display:none}
  .dtn-logout{padding:9px 12px}

  /* Menú del cliente: encabezado horizontal y tarjetas grandes */
  #s-cliente-menu .header{display:flex;align-items:center;justify-content:flex-start;gap:20px;text-align:left;padding:28px 48px}
  #s-cliente-menu .header .avatar{margin:0;flex-shrink:0}
  #s-cliente-menu .header h1{margin:0}
  #s-cliente-menu .header p{margin:2px 0 0}
  #s-cliente-menu .back-btn{padding-left:48px}
  .screen .body.cliente-menu-body{max-width:960px;flex-wrap:wrap;gap:20px!important;padding:40px 48px 36px}
  .cliente-menu-body .btn{flex:1 1 0;min-width:0;padding:44px 24px!important}
  .cliente-menu-body>p{flex:0 0 100%;text-align:center;margin-top:8px}

  /* Pie de la landing: enlaces legales en fila */
  .j-legal{flex-direction:row;flex-wrap:wrap;gap:0 28px}
  .j-legal a{margin-left:0!important}

  /* Legal: índice a la izquierda y texto cómodo a la derecha */
  #s-legal .body{max-width:1040px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;padding:40px 48px}
  #s-legal .pd-legal-nav{order:-1;position:sticky;top:24px;margin:0;border-top:0;max-width:none}
  #s-legal .pd-legal{margin:0;max-width:72ch}
  #s-legal .pd-legal-nav a{border-bottom:1px solid var(--line)}

  /* Libro de Reclamaciones: formulario en 2 columnas */
  #s-reclamos .body{max-width:1040px;padding:36px 48px}
  .rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
  .rc-sec3{margin-top:4px}
  #s-reclamos .pd-check{max-width:none}
  #s-reclamos #rc-enviar{max-width:360px}

  /* Mis pedidos: avisos a la izquierda, pedidos a la derecha */
  #s-cliente-pedidos .body{max-width:1040px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start;padding:36px 48px}
  #s-cliente-pedidos .pd-avisos{position:sticky;top:24px;margin:0}
  #s-cliente-pedidos #pd-lista-cliente{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  #s-cliente-pedidos #pd-lista-cliente .pd-vacio{grid-column:1/-1}
  #s-cliente-pedidos .pd-ped{margin:0}
  #s-cliente-pedidos .body>p.pd-small{grid-column:2}

  /* Admin: pedidos y reclamos en 2 columnas */
  #s-admin-pedidos .body,#s-admin-reclamos .body{max-width:1120px;padding:32px 40px}
  #s-admin-cupones .body{max-width:820px;padding:32px 40px}
  #pd-lista-admin,#pd-lista-reclamos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  #pd-lista-admin .pd-ped,#pd-lista-reclamos .pd-ped{margin:0}
  #pd-lista-admin .pd-vacio,#pd-lista-reclamos .pd-vacio{grid-column:1/-1}
  #s-admin-pedidos details.pd-box{max-width:560px}
}

/* ===== Capa "app nativa" v5: se siente instalada en el celular ===== */
:root{--ease-strong:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{min-height:100vh;min-height:100dvh}
button,.btn,a,[role=button],.pd-tabs button,.pd-seg button,.dtn-btn,summary{touch-action:manipulation}
button,.btn,.pd-tabs button,.pd-seg button,.dtn-btn,.back-btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:460px){
  .app{min-height:100vh;min-height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  #pd-cookies{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
/* Pulsar = respuesta inmediata (feedback), con la curva fuerte */
.btn:active,.pd-btn:active,.pd-acc button:active,.pd-acc a:active,.pd-tabs button:active,.pd-seg button:active,.dtn-btn:active,.j-btn:active{transform:scale(.97);transition-duration:100ms}
.pd-btn,.pd-acc button,.pd-acc a,.pd-tabs button,.pd-seg button{transition:transform 160ms var(--ease-strong),background-color 160ms ease,color 160ms ease}
/* Entrada escalonada de listas (se ve ocasionalmente, 40 ms entre ítems, solo los primeros 6) */
@keyframes j-stagger{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen.active .pd-ped,.screen.active .body>.btn,.screen.active .pd-box,.screen.active .pd-avisos{animation:j-stagger 280ms var(--ease-strong) both}
.screen.active .pd-ped:nth-child(2),.screen.active .body>.btn:nth-child(2){animation-delay:40ms}
.screen.active .pd-ped:nth-child(3),.screen.active .body>.btn:nth-child(3){animation-delay:80ms}
.screen.active .pd-ped:nth-child(4),.screen.active .body>.btn:nth-child(4){animation-delay:120ms}
.screen.active .pd-ped:nth-child(5),.screen.active .body>.btn:nth-child(5){animation-delay:160ms}
.screen.active .pd-ped:nth-child(n+6){animation-delay:200ms}
/* Línea de tiempo del pedido: el punto actual "late" una vez para indicar el estado */
@keyframes j-pulso{0%{box-shadow:0 0 0 0 rgba(200,162,74,.55)}100%{box-shadow:0 0 0 8px rgba(200,162,74,0)}}
.pd-lin li.actual::before{animation:j-pulso 1.6s var(--ease-strong) 2}
/* Banner de cookies: sube desde abajo */
#pd-cookies:not([hidden]){animation:j-rise-in 260ms var(--ease-strong) both}
/* Foco visible para teclado (accesibilidad) */
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .screen.active .pd-ped,.screen.active .body>.btn,.screen.active .pd-box,.screen.active .pd-avisos,#pd-cookies:not([hidden]){animation:j-fade-in 150ms ease both;animation-delay:0ms!important}
  .pd-lin li.actual::before{animation:none}
  .btn:active,.pd-btn:active,.pd-acc button:active,.dtn-btn:active,.j-btn:active{transform:none}
}

/* =====================================================================
   v6 — Diseño aprobado (boceto) + Junguitos.
   Fraunces (títulos, cursiva en verde) + Karla (interfaz).
   Paleta: crema var(--cream) · papel var(--sand) · arena var(--line-strong) · tinta var(--ink)
           café var(--text-2) · selva var(--forest) · rojo var(--err) · dorado var(--gold)
   ===================================================================== */
:root{
  --font-ui:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
}
body{background:var(--cream)}
.header h1{font-size:32px!important;font-weight:600}
.stat-num,.cafe-num{font-weight:600}
.j-h1 em,.j-h2 em,.jg-h em{font-style:italic;color:var(--forest);padding-bottom:4px}
.j-h1{font-weight:500;letter-spacing:-.02em;line-height:1}
.j-h2{font-weight:500}
.j-h2 em{display:inline-block}

/* —— Portada —— */
.j-mast{border-bottom:0}
.j-mast .j-navbtn{background:var(--ink);color:var(--cream);border:0;border-radius:8px;padding:0 20px;min-height:44px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.j-mast .j-navbtn:active{transform:scale(.97)}
.j-hero2{display:grid;gap:var(--sp-8);padding-top:var(--sp-6);padding-bottom:var(--sp-10)}
.j-hero2 .j-h1{font-size:46px}
.j-hero2 .j-lede{margin-top:var(--sp-5);font-size:16px;color:var(--text-2)}
.j-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-6)}
.j-cta .j-btn{width:auto;max-width:none;min-width:0;border-radius:8px;padding:0 24px}
.j-btn-line{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border:1px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer}
.j-btn-line:active{transform:scale(.98)}
.j-mascota-hero{border-radius:12px;overflow:hidden;box-shadow:0 24px 48px rgba(43,31,20,.22);aspect-ratio:600/486;background:var(--sand)}
.j-mascota-hero img{width:100%;height:100%;object-fit:cover;display:block}
.j-cat{padding-top:var(--sp-10);padding-bottom:var(--sp-6)}
.j-cat .j-h2{max-width:14ch}
.j-hint{margin-top:var(--sp-3)}

/* Cafés del mes: bolsa completa; al tocar, ficha del café */
.jp-stack{margin-top:var(--sp-4)}
.jp-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jp-row::-webkit-scrollbar{display:none}
.jp-row[hidden],.jp-det[hidden],.jp-dots[hidden]{display:none!important}
.jp-c{flex:0 0 78%;scroll-snap-align:center;border:0;padding:0;margin:0;text-align:left;font:inherit;color:var(--ink);background:var(--line-strong);border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-float);transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.jp-c:active{transform:scale(.98)}
.jp-c:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.jp-c img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--bgc,var(--line-strong))}
.jp-nm{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.1}
.jp-nm span{font:500 12px var(--font-ui);color:var(--text-2);white-space:nowrap}
.jp-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.jp-dots i{width:6px;height:6px;border-radius:8px;background:var(--line-strong);transition:width 200ms cubic-bezier(.23,1,.32,1),background-color 200ms ease}
.jp-dots i.on{width:18px;background:var(--ink)}
.jp-det{background:var(--line-strong);color:var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-float);display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"img head" "dl dl" "acts acts";gap:0 14px;padding:14px;animation:jpIn 240ms cubic-bezier(.23,1,.32,1)}
@keyframes jpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jp-dimg{grid-area:img}.jp-dimg img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--bgc,var(--line-strong))}
.jp-dhead{grid-area:head;align-self:center}
.jp-dhead b{display:block;font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1}
.jp-dhead p{margin-top:6px;font-size:13px;color:var(--text-2)}
.jp-det .jp-dl{grid-area:dl;display:grid;grid-template-columns:96px minmax(0,1fr);gap:9px 10px;font-size:14px;line-height:1.4;margin:16px 4px 18px}
.jp-det .jp-dl dt{color:var(--text-3)}.jp-det .jp-dl dd{margin:0}
.jp-acts{grid-area:acts;display:flex;gap:10px;padding:0 4px 4px}
.jp-add,.jp-close{flex:1;border-radius:8px;padding:0 16px;min-height:46px;font:600 14px var(--font-ui);cursor:pointer;text-align:center}
.jp-add{background:var(--ink);color:var(--sand);border:0}
.jp-close{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.jp-add:active,.jp-close:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.jp-det{animation:none}.jp-c{transition:none}}

/* Orígenes (crema, tres columnas con línea) */
.j-origin{background:transparent;color:var(--ink);padding:var(--sp-8) 0 var(--sp-2)}
.j-origin .j-kicker{color:var(--text-2)}
.j-origin-list li{border-top:1px solid rgba(43,31,20,.25)!important;border-bottom:0!important}
.j-origin-list li:last-child{border-bottom:0}
.j-place small{color:var(--text-2)}
.j-alt span{color:var(--text-2)}

/* Cómo comprar + tarjeta Junguitos (franja clara) */
.j-how{background:transparent;color:var(--ink);padding:var(--sp-10) 0}
.j-how .j-kicker{color:var(--text-2)}
.j-how .j-h2{color:var(--ink)}
.j-steps li{color:var(--ink);grid-template-columns:36px 1fr;align-items:start}
.j-steps b{width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:15px;font-weight:600}
.j-steps span{padding-top:5px}
.jg-land{background:var(--forest);color:var(--paper);border-radius:12px;padding:var(--sp-6)}
.jg-land-top{display:flex;align-items:center;gap:var(--sp-4)}
.jg-land-top img{width:84px;height:auto;border-radius:12px;background:var(--sand);display:block}
.jg-land h3{font-family:var(--font-display);font-size:32px;font-weight:500;line-height:1}
.jg-land p{margin-top:6px;font-size:14px;line-height:1.45;color:var(--ok-soft)}
.jg-land ul{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:10px}
.jg-land li{display:flex;align-items:center;gap:12px;font-size:14px}
.jg-land li b{flex:0 0 auto;min-width:52px;text-align:center;font-family:var(--font-display);font-size:24px;font-weight:600;background:var(--gold);color:var(--ink);border-radius:999px;padding:2px 10px}
.jg-land small{display:block;margin-top:var(--sp-4);font-size:12px;color:#c9d8b8;line-height:1.45}
.j-seg{background:var(--surface);border-radius:12px;padding:var(--sp-6);display:grid;gap:12px;font-size:15px;margin-top:var(--sp-8)}
.j-seg div{display:flex;align-items:center;gap:12px;font-weight:600}
.j-seg i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--forest)}
.j-seg .act i{box-shadow:0 0 0 4px rgba(47,74,36,.2)}
.j-seg .off{color:var(--text-3);font-weight:500}.j-seg .off i{background:transparent;border:2px solid var(--line-strong);box-sizing:border-box}
.j-close{padding-top:var(--sp-8)}
.j-foot{border-top:1px solid rgba(43,31,20,.25)}

@media(min-width:900px){
  .j-hero2{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:var(--sp-10);padding-top:var(--sp-8)}
  .j-hero2 .j-h1{font-size:84px;max-width:none}
  .j-hero2 .j-lede{font-size:18px;max-width:46ch}
  .jp-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;overflow:visible;padding:6px 0 10px}
  .jp-c{flex:none}
  .jp-dots{display:none!important}
  .jp-det{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);grid-template-areas:"img head" "img dl" "img acts";gap:0 40px;padding:28px;align-content:start}
  .jp-dimg img{border-radius:12px}
  .jp-dhead{align-self:end}.jp-dhead b{font-size:60px}.jp-dhead p{font-size:16px}
  .jp-det .jp-dl{font-size:16px;grid-template-columns:140px minmax(0,1fr);margin:24px 0}
  .jp-acts{align-self:end;max-width:460px}
  @media(hover:hover) and (pointer:fine){.jp-c:hover{transform:translateY(-4px)}}
  .j-cat .j-h2{max-width:none}
  .j-how-grid{align-items:center}
  .j-seg{padding:var(--sp-8);font-size:16px}
}

/* —— Pantalla del cliente: Junguitos —— */
.jg-card{background:var(--surface);border-radius:12px;padding:20px;margin-bottom:14px;border:1px solid var(--line)}
.jg-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jg-lbl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.jg-num{font-family:var(--font-display);font-size:64px;font-weight:600;line-height:1;color:var(--ink)}
.jg-num small{font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--text-2);margin-left:6px}
.jg-etapa{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text-2)}
.jg-mini{width:56px;height:auto;border-radius:8px;background:var(--sand);display:block}
.jg-pista{position:relative;margin:30px 22px 14px}
.jg-track{height:12px;border-radius:999px;background:var(--sand);position:relative}
.jg-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#47683A,#1F3318);transition:width 900ms cubic-bezier(.32,.72,0,1)}
.jg-tick{position:absolute;top:-4px;width:2px;height:20px;background:rgba(43,31,20,.35);transform:translateX(-1px)}
.jg-tick b{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--text-2);white-space:nowrap}
.jg-walker{position:absolute;bottom:2px;width:44px;height:auto;transform:translateX(-50%);transition:left 900ms cubic-bezier(.32,.72,0,1);filter:drop-shadow(0 4px 4px rgba(43,31,20,.25));border-radius:8px;background:var(--sand)}
.jg-msg{margin-top:34px;font-size:14px;line-height:1.5;color:var(--text-2)}
.jg-msg strong{color:var(--ink)}
.admin-client .pill{white-space:nowrap}
.jg-wa{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;min-height:48px;border-radius:8px;background:var(--forest);color:var(--paper);font-size:14px;font-weight:600;text-decoration:none}
.jg-tabla{background:var(--surface);border-radius:12px;border:1px solid var(--line);overflow:hidden;margin-bottom:14px}
.jg-tabla h3{font-family:var(--font-display);font-size:24px;font-weight:600;padding:16px 20px 8px}
.jg-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line)}
.jg-row img{width:48px;height:auto;border-radius:8px;background:var(--sand);flex:0 0 auto;opacity:.55;filter:grayscale(.5)}
.jg-row.ok img,.jg-row.now img{opacity:1;filter:none}
.jg-row .t{flex:1;min-width:0}.jg-row b{display:block;font-size:14px;color:var(--ink)}.jg-row span{font-size:13px;color:var(--text-2)}
.jg-row .e{flex:0 0 auto;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--sand);color:var(--text-2)}
.jg-row.ok .e{background:var(--forest);color:var(--paper)}
.jg-row.now{background:rgba(215,178,76,.18)}
.jg-regla{font-size:13px;line-height:1.5;color:var(--text-2);margin:0 4px 14px}

/* Modales Junguitos */
.jg-modal{position:fixed;inset:0;background:rgba(43,31,20,.55);z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px}
.jg-sheet{background:var(--surface);border-radius:12px;padding:22px;width:100%;max-width:360px;max-height:90vh;overflow:auto}
.jg-sheet h3{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.1}
.jg-sub{font-size:13px;color:var(--text-2);margin:4px 0 14px;line-height:1.45}
.jg-acc{display:flex;gap:10px}
.jg-b-pri,.jg-b-sec{flex:1;min-height:46px;border-radius:8px;font:600 14px var(--font-ui);cursor:pointer}
.jg-b-pri{background:var(--ink);color:var(--paper);border:0}
.jg-b-sec{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.jg-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;cursor:pointer;min-height:64px}
.jg-opt img{width:44px;height:auto;border-radius:8px;background:var(--sand);flex:0 0 auto}
.jg-opt span{flex:1}.jg-opt b{display:block;font-size:14px;color:var(--ink)}.jg-opt small{font-size:12px;color:var(--text-2)}
.jg-opt em{font-style:normal;font-weight:700;font-size:13px;color:var(--ink)}
.jg-opt:disabled{opacity:.45;cursor:not-allowed}
.jg-ajuste{background:var(--gold-soft);border:1px dashed var(--gold);border-radius:8px;padding:14px;margin-bottom:14px}
.jg-ajuste b{font-size:13px;color:var(--ink)}.jg-ajuste p{font-size:12px;color:var(--text-2);margin:4px 0 10px;line-height:1.45}
.jg-ajuste button{width:100%;min-height:44px;border-radius:8px;border:0;background:var(--ink);color:var(--paper);font:600 13px var(--font-ui);cursor:pointer}
.jg-ajuste.hecho{border-style:solid;background:var(--ok-soft);border-color:#9bc27a}
.auth-split .header .jg-login-img{width:280px;height:auto;max-width:88%;border-radius:12px;margin:0 auto 4px;display:block;background:var(--sand)}

/* ===== Capa v6: panel de administrador (menú lateral en computadora, filas en vez de tarjetas) ===== */
.dtn-grp{display:none}
.dtn-badge{display:none}
.pr-sec{margin-bottom:22px}
.pr-sh{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 8px}
.pr-sh h2{margin:0;font-family:inherit;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pr-sh span{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pr-pin{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:8px;padding:10px 10px 2px}
.pr-pin .pr-sh h2{color:var(--gold-ink)}.pr-pin .pr-sh b{color:var(--err);font-size:15px}
.pr-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"cli tot" "num num" "items items" "st st" "acc acc" "mot mot";gap:3px 10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:11px 12px;margin-bottom:8px}
.pr-pin .pr-row{border-color:var(--gold-line)}
.pr-num{grid-area:num;font-size:12px;color:var(--text-3);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pr-num small{margin-left:6px}
.pr-cli{grid-area:cli;font-weight:700;font-size:15px}
.pr-cli small{font-weight:400;color:var(--text-3);font-size:12px;margin-left:6px}
.pr-items{grid-area:items;font-size:13px;color:var(--text-2);line-height:1.45}
.pr-tot{grid-area:tot;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.pr-st{grid-area:st;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.pr-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pr-chip.ok{background:var(--ok-soft);color:var(--forest)}.pr-chip.bad{background:var(--err-soft);color:var(--err)}.pr-chip.mut{background:var(--sand);color:var(--text-3)}.pr-chip.wip{background:var(--gold-soft);color:var(--gold-ink)}
.pr-acc{grid-area:acc;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pr-acc button{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 13px inherit;font-family:inherit;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pr-acc .pri{background:var(--forest);border-color:var(--forest);color:#fff}.pr-acc .gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}.pr-acc .mal{color:var(--err)}.pr-acc .ic{width:36px;padding:0;color:var(--forest)}
.pr-mot{grid-area:mot;font-size:12px;color:var(--err)}
.pr-dim .pr-row{background:var(--surface-2)}.pr-dim .pr-cli,.pr-dim .pr-tot{color:var(--text-3)}
.pd-tabs button i{font-style:normal;margin-left:6px;opacity:.7}
.pd-tabs button.hot{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-ink);font-weight:700}
.pd-tabs button.hot.on{background:var(--gold-ink);color:var(--gold-soft);border-color:var(--gold-ink)}
.pd-kpis{display:none}
.mtile{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:13px 14px;font:600 14px inherit;font-family:inherit;color:var(--ink);cursor:pointer;text-align:left;margin-bottom:7px}
.mtile i.ti{font-size:18px;margin-right:10px;color:var(--amber)}
.mtile .mt-l{display:flex;align-items:center}
.mtile em{font-style:normal;font-size:11px;font-weight:700;background:var(--gold);color:var(--ink);border-radius:999px;padding:2px 9px}
.mtile em.r{background:var(--err-soft);color:#7a1f1f}
.mgrp{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin:12px 2px 6px}
.js-bd:empty{display:none}
@media(min-width:900px){
  body.in-admin{padding:26px 28px 40px 260px!important;background:var(--sand)}
  body.in-admin .app{max-width:1180px;margin:0 auto}
  body.in-admin .desktop-topnav{display:flex;position:fixed;top:0;bottom:0;left:0;right:auto;width:232px;background:var(--ink);border:0;box-shadow:none;z-index:500;overflow-y:auto}
  body.in-admin .desktop-topnav-inner{display:flex;flex-direction:column;align-items:stretch;max-width:none;width:100%;margin:0;gap:0;padding:18px 12px 14px;min-height:100%}
  body.in-admin .desktop-topnav-logo{height:46px;width:auto;align-self:flex-start;margin:2px 6px 10px;background:var(--sand);padding:4px 8px;border-radius:8px}
  body.in-admin .desktop-topnav-links{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;flex:1}
  body.in-admin .dtn-grp{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:14px 10px 6px;font-weight:700}
  body.in-admin .dtn-btn{background:transparent!important;color:var(--line);border-radius:8px!important;padding:9px 10px;font-size:14px;font-weight:500;justify-content:flex-start;width:100%;gap:0}
  body.in-admin .dtn-btn i{display:inline-block;font-size:16px;margin-right:10px;opacity:.85}
  body.in-admin .dtn-btn:hover{background:#3A2B1D!important;opacity:1}
  body.in-admin .dtn-btn.on{background:#4A3826!important;color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
  body.in-admin .dtn-btn .dtn-badge{display:inline-block;margin-left:auto;font-size:11px;font-weight:700;background:var(--gold);color:var(--ink);border-radius:999px;padding:1px 8px}
  body.in-admin .dtn-btn .dtn-badge:empty{display:none}
  body.in-admin .dtn-btn .dtn-badge.r{background:#E7B4B4;color:#7a1f1f}
  body.in-admin .dtn-logout{margin-top:14px;width:100%;justify-content:flex-start;border:0;border-top:1px solid #4A3826;border-radius:0;color:var(--line-strong);padding:14px 10px 4px}
  body.in-admin .dtn-logout:hover{background:transparent;color:#fff}
  body.in-admin .screen.admin-screen{background:transparent;border:0;box-shadow:none;overflow:visible}
  body.in-admin .admin-screen>.back-btn{display:none}
  body.in-admin .admin-screen>.header{background:transparent;color:var(--ink);text-align:left;padding:4px 0 18px;position:relative}
  body.in-admin .admin-screen>.header h1{font-family:'Fraunces',Georgia,serif!important;font-size:32px!important;font-weight:500;letter-spacing:.2px}
  body.in-admin .admin-screen>.header p{color:var(--text-3);opacity:1!important;font-size:14px!important;margin-top:2px}
  body.in-admin .admin-screen>.body{max-width:none!important;margin:0!important;padding:0!important;background:transparent;overflow:visible}
  /* Pedidos */
  body.in-admin #s-admin-pedidos>.header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
  body.in-admin #s-admin-pedidos .pd-kpis{display:flex;gap:28px}
  .pd-kpis .kp b{display:block;font:500 24px Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
  .pd-kpis .kp span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
  .pd-kpis .kp.warn b{color:var(--err)}
  body.in-admin #s-admin-pedidos .pd-tabs{padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:20px}
  body.in-admin #s-admin-pedidos .pd-tabs button{border-radius:8px;border-color:var(--line);background:var(--surface);color:var(--text-3);font-size:13px;min-height:38px}
  body.in-admin #s-admin-pedidos .pd-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  body.in-admin #pd-lista-admin{display:block!important}
  .pr-row{grid-template-columns:120px minmax(0,1.1fr) minmax(0,1.5fr) 84px 130px max-content;grid-template-areas:"num cli items tot st acc" "mot mot mot mot mot mot";align-items:center;gap:6px 16px;padding:11px 14px}
  .pr-num small{display:block;margin:0}
  .pr-cli small{display:block;margin:0}
  .pr-st{margin:0}
  .pr-acc{margin:0;justify-content:flex-end;flex-wrap:nowrap}
  .pr-mot{margin-top:-2px}
  .pr-row:hover{border-color:var(--line-strong)}
  body.in-admin #s-admin-pedidos details.pd-box{max-width:none}
}

/* ===== Capa v7: Ventas, Registro, Finanzas, Inventario, Informes, Catálogo ===== */
.av-grid{display:block}
.av-form,.av-res{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:12px}
.av-h{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.av-r3{display:block}
.av-totbar{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 12px}
.av-totbar span{font-size:14px;color:var(--text-3)}.av-totbar b{font:600 24px Georgia,serif;color:var(--ink)}
.av-actions{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
@media(max-width:899px){
  .av-actions{position:sticky;bottom:0;z-index:30;margin:0 -16px -20px;border-radius:14px 14px 0 0;border-width:1px 0 0;box-shadow:0 -6px 14px rgba(43,31,20,.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .av-actions .av-totbar{margin:0 0 8px}
  .av-actions .btn{margin-top:0;padding:12px}
  .av-actions .btn-outline{display:none}
}
.rg-kp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.rg-kp div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.rg-kp span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.rg-kp b{display:block;font:600 18px Georgia,serif;margin-top:2px;font-variant-numeric:tabular-nums}
.rg-kp .w b{color:var(--err)}.rg-kp .g b{color:var(--forest)}
.rg-head{display:none}
.rg-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"pr t" "cli cli" "fh st" "ac ac";gap:3px 10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:7px}
.rg-row.off{opacity:.55}.rg-row.off .rg-pr,.rg-row.off .rg-t{text-decoration:line-through}
.rg-fh{grid-area:fh;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}.rg-fh small{margin-left:6px}
.rg-cli{grid-area:cli;font-size:13px;color:var(--text-2)}.rg-cli small{color:var(--text-3);margin-left:6px}
.rg-pr{grid-area:pr;font-weight:700;font-size:14px}.rg-pr small{display:block;font-weight:400;font-size:12px;color:var(--text-3)}
.rg-q{display:none}.rg-qm{font-weight:400;color:var(--text-3)}
.rg-t{grid-area:t;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.rg-st{grid-area:st;text-align:right}.rg-ac{grid-area:ac;margin-top:4px}
.rg-ac button{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--err);font:600 12px inherit;font-family:inherit;cursor:pointer}
.rg-ac button.res{color:var(--forest)}
.fn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.fn-grid .stat-box{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.fn-cols{display:block}
.cat-grid{display:block}
@media(min-width:900px){
  body.in-admin .av-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:18px;align-items:start}
  body.in-admin .av-form{padding:20px 22px;margin:0}
  body.in-admin .av-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
  body.in-admin .av-res,body.in-admin .av-actions{margin:0}
  .av-r3{display:grid;grid-template-columns:1fr 1.6fr .9fr;gap:12px}
  .av-form .btn-outline-gold{margin-bottom:14px}
  .rg-kp b{font-size:24px}
  .rg-head,.rg-row{display:grid;grid-template-columns:120px minmax(0,1.1fr) minmax(0,1.6fr) 46px 90px 100px 110px;grid-template-areas:"fh cli pr q t st ac";gap:12px;align-items:center}
  .rg-head{padding:6px 14px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);font-weight:700;border-bottom:1px solid var(--line);margin-bottom:6px}
  .rg-head span:nth-child(4),.rg-head span:nth-child(5){text-align:right}
  .rg-row{padding:11px 14px;margin-bottom:6px}
  .rg-fh small,.rg-cli small{display:block;margin:0}
  .rg-q{display:block;grid-area:q;text-align:right}.rg-qm{display:none}
  .rg-st{text-align:left}.rg-ac{margin:0;text-align:right}
  .fn-grid{grid-template-columns:repeat(4,1fr)}
  .fn-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
  .fn-cols>.card{margin-bottom:0}
  body.in-admin #s-admin-informes .stat-box{padding:16px}
  body.in-admin #s-admin-informes .stat-num{font-size:32px}
  .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body.in-admin #s-admin-inventario .inv-wrap,body.in-admin #s-admin-inventario .body>div{max-width:none}
}

/* ===== Capa v8: Inventario, Tienda con carrito lateral ===== */
.inv-bar{height:7px;border-radius:99px;background:var(--sand);overflow:hidden;margin:8px 0 2px}
.inv-bar i{display:block;height:100%;background:var(--gold);border-radius:99px}
.inv-bar.low i{background:var(--err)}
.ct-grid{display:block}
.ct-cart{display:none}
.ct-cart h3{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.ct-cart .ct-it{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--sand);font-size:13px}
.ct-ent .grind-options{display:flex;gap:8px;flex-wrap:wrap}
.ct-camp-tot span:last-child{white-space:nowrap}.ct-camp-tot{display:flex;justify-content:space-between;gap:10px;padding:8px 0 0;font-size:13px;font-weight:700;color:var(--err)}
.ct-cart .ct-it span:last-child{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-cart .ct-vacio{font-size:13px;color:var(--text-3);padding:8px 0 4px}
.ct-cart .ct-tot{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 10px;font-size:15px}
.ct-cart .ct-tot b{font:600 24px Georgia,serif;font-variant-numeric:tabular-nums}
.ct-cart .ct-envio{background:var(--gold-soft);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--gold-ink);margin-bottom:12px}
.ct-cart .ct-envio.ok{background:var(--ok-soft);color:var(--forest)}
.ct-cart button{width:100%;padding:13px;border-radius:8px;border:0;background:var(--ink);color:var(--cream);font:700 14px inherit;font-family:inherit;cursor:pointer}
.ct-cart button[disabled]{opacity:.45;cursor:not-allowed}
@media(min-width:900px){
  #s-cliente-tienda .body.ct-grid{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;padding:28px 40px}
  #s-cliente-tienda .ct-cart{display:block;position:sticky;top:20px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px}
  #s-cliente-tienda .cart-bar,#s-cliente-tienda .cart-bar.show{display:none!important}
  #s-cliente-tienda .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.in-admin #inv-cafes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  body.in-admin #inv-cafes .inv-cafe{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;margin:0}
  body.in-admin #inv-cafes .inv-acts{flex-direction:column}
}
.cat-items{display:block}
.cat-prod{border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;margin:0 0 10px;cursor:pointer}.cat-prod-h{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:6px}.cat-vl{font-size:12px;font-weight:700;color:var(--text-2);margin:6px 0 4px}.cat-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cat-tier{background:var(--line-strong);border-radius:8px;padding:6px 8px;min-width:0}.cat-tier.no{opacity:.6}.cat-th{display:block;font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em}.cat-pr{display:block;font-size:15px;color:var(--ink);margin:1px 0 2px}
@media(min-width:900px){body.in-admin .cat-grid{display:block}body.in-admin .cat-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}}
#s-login.solo-dni .js-extra{display:none!important}
body.in-admin .pd-wa,body[data-scr="s-admin-pass"] .pd-wa,body[data-scr="s-login"].solo-x .pd-wa{display:none!important}
body[data-scr="s-cliente-tienda"] .pd-wa,body[data-scr="s-cliente-resumen"] .pd-wa{bottom:96px}
@media(min-width:900px){body[data-scr="s-cliente-tienda"] .pd-wa,body[data-scr="s-cliente-resumen"] .pd-wa{bottom:20px}}
.pd-wa{transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.pd-wa:hover{transform:scale(1.06)}}
.pd-wa:active{transform:scale(.96)}
/* Contraste panel Fidelización */
#s-admin .header>div[style*="grid-template-columns"]>div{background:rgba(20,12,4,.42)!important}
#s-admin .header>div[style*="grid-template-columns"]>div>div:last-child{color:#fff!important;opacity:1!important;font-size:11px!important;font-weight:600}
#s-admin .header h1,#s-admin .header div[style*="letter-spacing"]{opacity:1!important}
.rg-filtro{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.rg-fr label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.rg-fr .input-field{margin:0;width:100%}
.rg-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.rg-chips button{min-height:40px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 13px var(--font-ui,inherit);cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s}
.rg-chips button:active{transform:scale(.97)}
.rg-chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(min-width:900px){.rg-filtro{grid-template-columns:200px 200px 1fr;align-items:end}.rg-chips{grid-column:auto}}
.pr-det{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--text-2);background:var(--surface-2);border-radius:8px;padding:5px 8px}
.pr-det i{color:var(--gold-ink)}
.canje-box{background:var(--surface-2);border:1.5px solid var(--gold-line);border-radius:8px;padding:12px;margin:14px 0 8px}
.canje-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;color:var(--ink)}
.canje-h i{font-size:24px;color:var(--gold-ink);margin-top:1px}
.canje-h b{display:block;font-size:15px}.canje-h small{display:block;font-size:12px;color:var(--text-2);line-height:1.4;margin-top:2px}
.canje-op{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;text-align:left;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:8px;padding:10px 12px;margin-top:8px;cursor:pointer;color:var(--ink);font-family:inherit;transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .16s,background .16s}
.canje-op:active{transform:scale(.98)}
.canje-op b{display:block;font-size:14px}.canje-op small{display:block;font-size:12px;color:var(--text-3);margin-top:2px}
.canje-op em{font-style:normal;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;flex-shrink:0}
.canje-op.on{border-color:var(--ok);background:var(--ok-soft)}.canje-op.on em{background:var(--ok)}
.canje-op[disabled]{opacity:.6;cursor:not-allowed}.canje-op[disabled] em{background:var(--text-3)}
.canje-no{display:block;margin:10px auto 0;background:none;border:0;color:var(--text-2);text-decoration:underline;font:600 13px inherit;font-family:inherit;min-height:36px;cursor:pointer}
.cfg-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:14px}
.cfg-card>i,.cfg-row>i{font-size:24px;color:var(--gold);flex-shrink:0}
.cfg-card-t{flex:1;min-width:200px}.cfg-card-t b{display:block;font-size:15px;color:var(--ink)}.cfg-card-t small{display:block;font-size:13px;color:var(--text-2);line-height:1.45;margin-top:2px}
.cfg-col{flex-direction:column;align-items:stretch}.cfg-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cfg-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:6px 0}
.cfg-grid .input-field{margin:0;width:100%}.cfg-fechas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cfg-acc{display:flex;flex-wrap:wrap;gap:8px}.cfg-nota{font-size:12px;color:var(--text-2);line-height:1.5;margin-top:10px}
.cfg-btn{min-height:44px;padding:0 16px;border-radius:8px;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);font:700 13px inherit;font-family:inherit;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s}
.cfg-btn:active{transform:scale(.97)}.cfg-btn.pri{background:var(--ink);color:#fff}.cfg-btn[disabled]{opacity:.45;cursor:not-allowed}
.cfg-pill{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--sand);color:var(--text-2)}.cfg-pill.on{background:var(--ok-soft);color:var(--ok)}
.cfg-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.cfg-bar h2{font:600 18px Georgia,serif;color:var(--ink)}.cfg-bar>div{display:flex;gap:8px;flex-wrap:wrap}.cfg-bar .cfg-btn{min-height:40px;font-size:13px}
.cfg-cat{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden}
.cfg-cat-h{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:12px 14px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink)}
.cfg-cat-h span{font-weight:700;font-size:14px;flex:1;text-transform:uppercase;letter-spacing:.06em}
.cfg-cat-h em{font-style:normal;font-size:12px;color:var(--text-3)}
.cfg-cat-h i{font-size:20px;color:var(--text-3);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.cfg-cat.open .cfg-cat-h i{transform:rotate(180deg)}
.cfg-cat.open .cfg-cat-h{border-bottom:1px solid var(--sand);background:var(--surface-2)}
.cfg-cat-b{display:none;padding:2px 14px 6px}.cfg-cat.open .cfg-cat-b{display:block}
@media(min-width:900px){
  body.in-admin #s-admin-config-ventas .body{max-width:none;width:100%;margin:0;padding:20px 28px 40px}
  body.in-admin #s-admin-config-ventas .back-btn{display:none}
  .cfg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #config-avisos,#config-pago-tarjeta,#config-puntos{max-width:980px}
  .cfg-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}
@media(min-width:1500px){.cfg-items{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.cfg-cat-h i{transition:none}}
.j-story{background:#4A2320;color:var(--sand);padding:var(--sp-10,56px) 0}
.j-story .j-kicker{color:var(--gold-line);display:flex;align-items:center;gap:8px}
.j-story-grid{display:grid;grid-template-columns:1fr;gap:28px}
.j-story-t{font-family:var(--font-display,Georgia,serif);font-weight:500;font-size:clamp(28px,6.5vw,40px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 0;color:var(--surface-2);text-wrap:balance}
.j-story-t em{font-style:italic;color:var(--gold-line);padding-bottom:4px}
.j-story-fin{font-family:var(--font-display,Georgia,serif);font-style:italic;font-size:18px;line-height:1.35;color:var(--gold-line);margin:20px 0 0}
.j-story-b p{font-size:16px;line-height:1.7;color:var(--sand);margin:0 0 16px;max-width:60ch}
.j-story-b p:last-child{margin-bottom:0}.j-story-b b{color:var(--surface-2)}
@media(min-width:900px){.j-story{padding:88px 0}.j-story-grid{grid-template-columns:5fr 6fr;gap:64px;align-items:start}.j-story-b{padding-top:34px}}

.j-story-grid2{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"pa pc" "mid mid";gap:12px}
.j-story-ph{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:3/4;background:#341815}
.j-story-ph img{width:100%;height:100%;object-fit:cover;display:block}
.j-story-ph.pa{grid-area:pa}.j-story-ph.pc{grid-area:pc}.j-story-mid{grid-area:mid;padding-top:18px}
.j-story-mid .j-story-b{margin-top:18px}
@media(min-width:900px){.j-story-grid2{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"pa mid pc";gap:44px;align-items:stretch}.j-story-ph{aspect-ratio:auto;min-height:100%}.j-story-mid{padding-top:6px}}
.j-story [data-rv]{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1)}
.j-story [data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.j-story [data-rv]{opacity:1;transform:none;transition:none}}
/* Amigabilidad: zonas táctiles cómodas y foco visible en todas las pantallas */
@media(max-width:899px){
  .btn-sm,.back-btn,.tab,.pr-acc button,.dtn-btn{min-height:44px}
  .summary-remove{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:20px;margin:-8px -8px -8px 0}
  .pr-acc{gap:8px}.pr-acc button{padding:0 14px}
  .mtile{min-height:56px}
}
:where(button,a,input,select,textarea,[role=button],summary):focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.pr-row,.cfg-card,.cfg-cat,.canje-box{box-shadow:0 1px 2px rgba(43,31,20,.04)}
@media(hover:hover) and (pointer:fine){.pr-row:hover,.cfg-cat:hover{border-color:var(--line-strong)}}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:520px){.rg-kp{grid-template-columns:1fr 1fr}}
/* Menú superior de la página de inicio (fijo al desplazarse) */
#s-landing .j-mast{position:sticky;top:0;z-index:40;background:var(--cream);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);flex-wrap:wrap;row-gap:6px;padding-top:12px;padding-bottom:10px}
#s-landing .j-mast img{height:52px}
.j-nav{display:flex;gap:4px;order:3;width:100%;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.j-nav::-webkit-scrollbar{display:none}
.j-nav button{flex:0 0 auto;min-height:44px;padding:0 12px;background:none;border:0;border-radius:8px;font:600 14px var(--font-ui,inherit);font-family:inherit;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .16s,transform .16s cubic-bezier(.23,1,.32,1)}
.j-nav button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.j-nav button:hover{background:rgba(43,31,20,.08)}}
#cafes,#origenes,#historia,#como-comprar{scroll-margin-top:112px}
@media(min-width:900px){
  #s-landing .j-mast{flex-wrap:nowrap;padding-top:14px;padding-bottom:12px}
  #s-landing .j-mast img{height:60px}
  .j-nav{order:0;width:auto;flex:1;justify-content:center;overflow:visible;margin:0}
  #cafes,#origenes,#historia,#como-comprar{scroll-margin-top:84px}
}
/* El menú del inicio queda fijo: overflow:clip recorta igual que hidden pero no rompe position:sticky */
.app{overflow:clip}
#s-landing{overflow:clip}
#s-landing,#s-login,#s-registro-cliente,#s-registro-ok{background:transparent;border-color:transparent;box-shadow:none}
#s-login .header{border-radius:8px}
.cn-tab:not(.on):not(.active):not([aria-current]){background:transparent;border-color:var(--line-strong)}
.subtabs-ext button:not(.on){background:transparent;border-color:var(--line-strong)}
#s-cliente-tienda .cat-tab:not(.active){background:transparent;border-color:var(--line-strong)}

#s-cliente .gd-chip,#s-cliente .grind-chip:not(.active),#s-cliente .cn-out,#s-cliente .cancelar,#s-cliente .btn-outline,#s-cliente .back-btn,#s-cliente .cn-tab:not(.on),#s-cliente-menu .gd-chip,#s-cliente-menu .grind-chip:not(.active),#s-cliente-menu .cn-out,#s-cliente-menu .cancelar,#s-cliente-menu .btn-outline,#s-cliente-menu .back-btn,#s-cliente-menu .cn-tab:not(.on){background:var(--line-strong)!important;border:1px solid var(--line-strong)!important}
#s-reclamos .rc-tipo button:not(.on),#s-reclamos button[id^=rc-b-]:not(.on){background:var(--line-strong)!important;border:1px solid var(--line-strong)!important}
/* Botones secundarios de la zona del cliente: relleno arena más oscuro que el fondo, para que se distingan */
#s-cliente-cuenta .cn-tab:not(.on),#s-cliente-cuenta .cn-out,#s-cliente-cuenta .gd-chip,#s-cliente-cuenta .cancelar,#s-cliente-cuenta .btn-outline,#s-cliente-cuenta .cat-tab:not(.active),#s-cliente-cuenta .canje-op:not(.on),#s-cliente-cuenta .canje-pk:not(.on),#s-cliente-cuenta .canje-no,#s-cliente-cuenta .grind-chip:not(.active),#s-cliente-cuenta .back-btn,#s-cliente-tienda .cn-tab:not(.on),#s-cliente-tienda .cn-out,#s-cliente-tienda .gd-chip,#s-cliente-tienda .cancelar,#s-cliente-tienda .btn-outline,#s-cliente-tienda .cat-tab:not(.active),#s-cliente-tienda .canje-op:not(.on),#s-cliente-tienda .canje-pk:not(.on),#s-cliente-tienda .canje-no,#s-cliente-tienda .grind-chip:not(.active),#s-cliente-tienda .back-btn,#s-cliente-pedidos .cn-tab:not(.on),#s-cliente-pedidos .cn-out,#s-cliente-pedidos .gd-chip,#s-cliente-pedidos .cancelar,#s-cliente-pedidos .btn-outline,#s-cliente-pedidos .cat-tab:not(.active),#s-cliente-pedidos .canje-op:not(.on),#s-cliente-pedidos .canje-pk:not(.on),#s-cliente-pedidos .canje-no,#s-cliente-pedidos .grind-chip:not(.active),#s-cliente-pedidos .back-btn,#s-cliente-resumen .cn-tab:not(.on),#s-cliente-resumen .cn-out,#s-cliente-resumen .gd-chip,#s-cliente-resumen .cancelar,#s-cliente-resumen .btn-outline,#s-cliente-resumen .cat-tab:not(.active),#s-cliente-resumen .canje-op:not(.on),#s-cliente-resumen .canje-pk:not(.on),#s-cliente-resumen .canje-no,#s-cliente-resumen .grind-chip:not(.active),#s-cliente-resumen .back-btn,#s-cliente-confirm-compra .cn-tab:not(.on),#s-cliente-confirm-compra .cn-out,#s-cliente-confirm-compra .gd-chip,#s-cliente-confirm-compra .cancelar,#s-cliente-confirm-compra .btn-outline,#s-cliente-confirm-compra .cat-tab:not(.active),#s-cliente-confirm-compra .canje-op:not(.on),#s-cliente-confirm-compra .canje-pk:not(.on),#s-cliente-confirm-compra .canje-no,#s-cliente-confirm-compra .grind-chip:not(.active),#s-cliente-confirm-compra .back-btn,#s-reclamos .cn-tab:not(.on),#s-reclamos .cn-out,#s-reclamos .gd-chip,#s-reclamos .cancelar,#s-reclamos .btn-outline,#s-reclamos .cat-tab:not(.active),#s-reclamos .canje-op:not(.on),#s-reclamos .canje-pk:not(.on),#s-reclamos .canje-no,#s-reclamos .grind-chip:not(.active),#s-reclamos .back-btn,.cn-bar .cn-tab:not(.on),.cn-bar .cn-out,.cn-bar .gd-chip,.cn-bar .cancelar,.cn-bar .btn-outline,.cn-bar .cat-tab:not(.active),.cn-bar .canje-op:not(.on),.cn-bar .canje-pk:not(.on),.cn-bar .canje-no,.cn-bar .grind-chip:not(.active),.cn-bar .back-btn{background:var(--line-strong)!important;border:1px solid var(--line-strong)!important}
#s-cliente-cuenta .qty-add,#s-cliente-tienda .qty-add,#s-cliente-pedidos .qty-add,#s-cliente-resumen .qty-add,#s-cliente-confirm-compra .qty-add,#s-reclamos .qty-add,.cn-bar .qty-add{background:var(--gold-line)!important;border:1px solid var(--gold)!important}

/* Zona del cliente: sin recuadros blancos; solo la tarjeta de Junguitos conserva su color */
#s-cliente-cuenta .rv-card,#s-cliente-cuenta .gd-ent,#s-cliente-cuenta .cu-card,#s-cliente-cuenta .ct-cart,#s-cliente-cuenta .pd-ped,#s-cliente-cuenta .canje-box,#s-cliente-cuenta .highlight-box,#s-cliente-cuenta .cu-stat,#s-cliente-cuenta .canje-op,#s-cliente-cuenta .pd-avisos,#s-cliente-cuenta .summary-item,#s-cliente-tienda .rv-card,#s-cliente-tienda .gd-ent,#s-cliente-tienda .cu-card,#s-cliente-tienda .ct-cart,#s-cliente-tienda .pd-ped,#s-cliente-tienda .canje-box,#s-cliente-tienda .highlight-box,#s-cliente-tienda .cu-stat,#s-cliente-tienda .canje-op,#s-cliente-tienda .pd-avisos,#s-cliente-tienda .summary-item,#s-cliente-pedidos .rv-card,#s-cliente-pedidos .gd-ent,#s-cliente-pedidos .cu-card,#s-cliente-pedidos .ct-cart,#s-cliente-pedidos .pd-ped,#s-cliente-pedidos .canje-box,#s-cliente-pedidos .highlight-box,#s-cliente-pedidos .cu-stat,#s-cliente-pedidos .canje-op,#s-cliente-pedidos .pd-avisos,#s-cliente-pedidos .summary-item,#s-cliente-resumen .rv-card,#s-cliente-resumen .gd-ent,#s-cliente-resumen .cu-card,#s-cliente-resumen .ct-cart,#s-cliente-resumen .pd-ped,#s-cliente-resumen .canje-box,#s-cliente-resumen .highlight-box,#s-cliente-resumen .cu-stat,#s-cliente-resumen .canje-op,#s-cliente-resumen .pd-avisos,#s-cliente-resumen .summary-item,#s-cliente-confirm-compra .rv-card,#s-cliente-confirm-compra .gd-ent,#s-cliente-confirm-compra .cu-card,#s-cliente-confirm-compra .ct-cart,#s-cliente-confirm-compra .pd-ped,#s-cliente-confirm-compra .canje-box,#s-cliente-confirm-compra .highlight-box,#s-cliente-confirm-compra .cu-stat,#s-cliente-confirm-compra .canje-op,#s-cliente-confirm-compra .pd-avisos,#s-cliente-confirm-compra .summary-item{background:transparent!important;border:1px solid var(--line-strong)!important;box-shadow:none!important}
#s-cliente-cuenta .pd-avisos,#s-cliente-cuenta .pd-avisos p,#s-cliente-cuenta .pd-avisos b,#s-cliente-cuenta .pd-avisos strong,#s-cliente-cuenta .pd-avisos span,#s-cliente-cuenta .pd-avisos h3,#s-cliente-cuenta .pd-avisos small,#s-cliente-tienda .pd-avisos,#s-cliente-tienda .pd-avisos p,#s-cliente-tienda .pd-avisos b,#s-cliente-tienda .pd-avisos strong,#s-cliente-tienda .pd-avisos span,#s-cliente-tienda .pd-avisos h3,#s-cliente-tienda .pd-avisos small,#s-cliente-pedidos .pd-avisos,#s-cliente-pedidos .pd-avisos p,#s-cliente-pedidos .pd-avisos b,#s-cliente-pedidos .pd-avisos strong,#s-cliente-pedidos .pd-avisos span,#s-cliente-pedidos .pd-avisos h3,#s-cliente-pedidos .pd-avisos small,#s-cliente-resumen .pd-avisos,#s-cliente-resumen .pd-avisos p,#s-cliente-resumen .pd-avisos b,#s-cliente-resumen .pd-avisos strong,#s-cliente-resumen .pd-avisos span,#s-cliente-resumen .pd-avisos h3,#s-cliente-resumen .pd-avisos small,#s-cliente-confirm-compra .pd-avisos,#s-cliente-confirm-compra .pd-avisos p,#s-cliente-confirm-compra .pd-avisos b,#s-cliente-confirm-compra .pd-avisos strong,#s-cliente-confirm-compra .pd-avisos span,#s-cliente-confirm-compra .pd-avisos h3,#s-cliente-confirm-compra .pd-avisos small{color:var(--ink)!important}
#s-cliente-cuenta .input-field,#s-cliente-cuenta textarea,#s-cliente-tienda .input-field,#s-cliente-tienda textarea,#s-cliente-pedidos .input-field,#s-cliente-pedidos textarea,#s-cliente-resumen .input-field,#s-cliente-resumen textarea,#s-cliente-confirm-compra .input-field,#s-cliente-confirm-compra textarea{background:transparent!important;border:1.5px solid var(--line-strong)!important}
#s-cliente-cuenta .header,#s-cliente-tienda .header,#s-cliente-pedidos .header,#s-cliente-resumen .header,#s-cliente-confirm-compra .header{background:transparent!important}
#s-cliente-cuenta .header h1,#s-cliente-tienda .header h1,#s-cliente-pedidos .header h1,#s-cliente-resumen .header h1,#s-cliente-confirm-compra .header h1{color:var(--ink)!important}
#s-cliente-cuenta .header p,#s-cliente-tienda .header p,#s-cliente-pedidos .header p,#s-cliente-resumen .header p,#s-cliente-confirm-compra .header p{color:var(--text-2)!important}
   /* inicio: un solo fondo beige, sin tarjeta blanca encima */
#s-landing .j-body{overflow:visible}
.cp-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.cp-h{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.cp-code{font:700 17px/1.2 var(--font-mono,monospace);letter-spacing:.08em;color:var(--ink)}
.cp-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}.cp-chip.off{background:var(--surface-2);color:var(--text-3)}
.cp-d{font-size:13px;color:var(--text-2);line-height:1.5;margin:6px 0 10px}
.cp-acc{display:flex;gap:8px;flex-wrap:wrap}.cp-acc button{min-height:40px;padding:0 14px;border-radius:8px;border:1.5px solid var(--line-strong);background:var(--surface);font:600 13px inherit;font-family:inherit;color:var(--ink);cursor:pointer}
.cup-row{display:flex;gap:8px;align-items:stretch}.cup-row .input-field{flex:1;margin:0;text-transform:uppercase;letter-spacing:.08em}
.cup-ap{min-height:46px;padding:0 18px;border:0;border-radius:8px;background:var(--ink);color:#fff;font:700 14px inherit;font-family:inherit;cursor:pointer}.cup-ap:active{transform:scale(.97)}.cup-ap[disabled]{opacity:.6}
.cup-msg{margin:8px 0 0;font-size:13px;color:var(--err);min-height:1px}
.canje-pick{background:var(--surface);border:1.5px dashed var(--gold);border-radius:8px;padding:10px;margin-top:8px}
.canje-pick p{margin:0 0 8px;font-size:13px;color:var(--text-2)}
.canje-pk{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:8px 12px;margin-top:6px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--ink);font:600 14px inherit;font-family:inherit;cursor:pointer;text-align:left}
.canje-pk em{font-style:normal;font-weight:700;font-size:13px;color:var(--text-2)}
.canje-pk.on{border-color:var(--ok);background:var(--ok-soft)}
.cfg-cat-b .cfg-card,.cfg-cat-b .card{border:0!important;box-shadow:none!important;border-radius:0!important;padding:12px 0!important;margin:0!important;background:transparent!important}
.cfg-sec{max-width:none}
@media(min-width:900px){.cfg-sec{max-width:980px}}
.rec-grp{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden}
.rec-grp>summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 14px;cursor:pointer;list-style:none;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.rec-grp>summary::-webkit-details-marker{display:none}
.rec-grp>summary em{font-style:normal;font-weight:600;font-size:12px;color:var(--text-3);margin-left:auto;text-transform:none;letter-spacing:0}
.rec-grp>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg);transition:transform .2s cubic-bezier(.23,1,.32,1);margin:-3px 2px 0 6px}
.rec-grp[open]>summary{border-bottom:1px solid var(--sand);background:var(--surface-2)}
.rec-grp[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.rec-grp-b{padding:12px 12px 4px}
.rec-grp .pd-ped{margin-bottom:12px}
.cfg-card-t small b{display:inline;font-size:inherit}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.j-termo{max-width:1040px;margin:var(--sp-8) auto 0;padding:0 var(--sp-5)}
.j-termo-in{background:var(--forest);color:var(--cream);border-radius:var(--r-lg);padding:var(--sp-8);display:grid;grid-template-columns:auto 1fr;gap:var(--sp-8);align-items:center;text-align:left}
.j-termo-num{display:flex;align-items:flex-start;gap:6px;font-family:var(--font-display);font-weight:600;line-height:.85;letter-spacing:-.04em}
.j-termo-num b{font-weight:600;font-size:clamp(88px,15vw,144px)}
.j-termo-num span{font-size:clamp(24px,3.6vw,38px);color:var(--gold);letter-spacing:0;padding-top:.3em}
.j-termo-tx{display:grid;gap:var(--sp-4);min-width:0;width:100%}
.j-termo-tx p{font-size:18px;line-height:1.55;max-width:none;color:var(--cream)}
.j-termo-scale{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(236,230,216,.8)}
.j-termo-bar{height:6px;border-radius:3px;background:rgba(236,230,216,.2);overflow:hidden;margin-top:calc(-1 * var(--sp-2))}
.j-termo-bar i{display:block;height:100%;width:92%;background:linear-gradient(90deg,var(--text-3),var(--gold));transform-origin:left;animation:jtermo 1.1s var(--ease-out) both}
@keyframes jtermo{from{transform:scaleX(0)}}
@media(max-width:720px){.j-termo-in{grid-template-columns:auto 1fr;gap:var(--sp-4);padding:var(--sp-5)}.j-termo-num b{font-size:72px}.j-termo-num span{font-size:20px}.j-termo-tx p{font-size:15px;line-height:1.5}.j-termo-scale{font-size:11px}}
@media(prefers-reduced-motion:reduce){.j-termo-bar i{animation:none}}

#s-admin-informes>.tab-bar{display:none}
.subtabs-ext{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:14px 16px 4px;background:var(--cream,var(--sand))}
.subtabs-ext button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;transition:background-color .15s,color .15s}
.subtabs-ext button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.subtabs-ext button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(min-width:900px){.subtabs-ext{padding:18px 0 4px;background:transparent}}

/* ===== Cliente: barra superior (Tienda · Nombre) y Mi cuenta ===== */
.cn-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--cream);border-bottom:1px solid var(--line)}
.cn-logo{height:34px;width:auto;border-radius:8px;display:none}
.cn-tabs{display:flex;gap:8px;flex:1;min-width:0}
.cn-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;max-width:100%;transition:background-color .15s,color .15s,transform .12s}
.cn-tab:active{transform:scale(.97)}
.cn-tab.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cn-tab:focus-visible,.cn-out:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cn-av{width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.cn-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-out{min-width:44px;min-height:44px;border:none;background:none;color:var(--text-2);font-size:20px;cursor:pointer;border-radius:8px}
@media(min-width:900px){.cn-bar{padding:12px 48px}.cn-logo{display:block}}
#s-cliente-tienda>.back-btn,#s-cliente-pedidos>.back-btn{display:none}
.cuenta-wrap{width:100%;max-width:1040px;margin:0 auto;padding:22px 16px 48px}
.cuenta-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 2px}
.cuenta-h h1{font-family:var(--font-display);font-size:clamp(28px,6vw,40px);line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--ink)}
.cuenta-sub{font-size:13px;color:var(--text-3);margin:6px 0 0;font-variant-numeric:tabular-nums}
.cuenta-hero{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0 14px}
.cuenta-cols{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
@media(min-width:900px){.cuenta-hero{grid-template-columns:1.15fr 1fr}.cuenta-cols{grid-template-columns:1fr 1fr}}
.cu-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.cu-card h2{font-family:var(--font-display);font-size:18px;margin:0 0 12px;color:var(--ink)}
.cu-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}.cu-card-h h2{margin:0}
.cu-card-h a,.cu-nota a{color:var(--gold-ink);font-weight:700;font-size:13px}
.cu-vacio{font-size:14px;color:var(--text-3);margin:0;line-height:1.5}
.cu-nota{font-size:12px;color:var(--text-3);margin:12px 0 0}
.cu-jg{background:var(--ink);color:var(--cream);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.cu-jg .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-line)}
.cu-jg .fila{display:flex;align-items:center;gap:14px}
.cu-jg .num{font-family:var(--font-display);font-size:64px;line-height:1;font-weight:600;color:var(--surface-2);font-variant-numeric:tabular-nums}
.cu-jg .et{display:flex;flex-direction:column;align-items:center;gap:2px;margin-left:auto;font-size:12px;color:var(--gold-line)}
.cu-jg .et img{width:64px;height:64px;object-fit:contain}
.cu-jg .pista{position:relative;padding:6px 0 18px}
.cu-jg .track{position:relative;height:10px;border-radius:99px;background:rgba(255,255,255,.18)}
.cu-jg .fill{height:100%;border-radius:99px;background:var(--gold);transition:width .6s cubic-bezier(.23,1,.32,1)}
.cu-jg .tick{position:absolute;top:14px;transform:translateX(-50%);font-size:11px;color:var(--gold-line);font-variant-numeric:tabular-nums}
.cu-jg .msg{font-size:14px;line-height:1.45;margin:0;color:var(--sand)}
.cu-jg .msg strong{color:var(--surface-2)}
.cu-jg .wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:8px;background:var(--gold);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none;padding:0 16px;align-self:flex-start}
.cu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.cu-stat{background:var(--sand);border-radius:8px;padding:12px 10px}
.cu-stat b{display:block;font-family:var(--font-display);font-size:24px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.cu-stat span{display:block;font-size:12px;color:var(--text-3);margin-top:4px}
.cu-resumen .btn{margin:0}
.cu-ped{padding:11px 0;border-top:1px solid var(--sand);display:flex;flex-direction:column;gap:4px}.cu-ped:first-child{border-top:none;padding-top:0}
.cu-ped-top{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:14px;font-weight:700;color:var(--ink)}
.cu-ped small{font-size:13px;color:var(--text-3);font-weight:400;line-height:1.4}
.cu-chip{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;background:var(--gold-soft);color:var(--amber);white-space:nowrap}
.cu-chip.ok{background:var(--ok-soft);color:var(--forest)}.cu-chip.mal{background:var(--err-soft);color:var(--err)}
.cu-mov{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--sand);font-size:14px}.cu-mov:first-child{border-top:none;padding-top:0}
.cu-mov small{display:block;font-size:12px;color:var(--text-3)}
.cu-mov b{font-variant-numeric:tabular-nums}.cu-mov b.pos{color:var(--ok)}.cu-mov b.neg{color:var(--err)}
.cu-rec{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--sand);font-size:14px}.cu-rec:first-child{border-top:none;padding-top:0}
.cuenta-pie{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:6px}.cuenta-pie .btn{width:auto;padding-left:22px;padding-right:22px}
.cuenta-pie a{color:var(--gold-ink);font-weight:700}
@media(max-width:480px){.cu-stats{grid-template-columns:1fr 1fr 1fr;gap:6px}.cu-stat b{font-size:18px}.cu-jg .num{font-size:54px}}
@media(prefers-reduced-motion:reduce){.cu-jg .fill{transition:none}.cn-tab{transition:none}}
/* Contraste: campos con texto oscuro legible, tambien en listas desplegables */
:where(select,input,textarea){color:var(--ink)}
:where(select option,select optgroup){color:var(--ink);background:var(--surface-2)}
:where(input,textarea)::placeholder{color:var(--text-3);opacity:1}

/* =====================================================================
   SISTEMA DE DISEÑO UNIFICADO (capa final · fuente única de verdad)
   Todo componente toma sus valores de estos tokens. Para cambiar la marca
   basta con editar este bloque: ningún color ni radio se define fuera de él.
   ---------------------------------------------------------------------
   COLOR       Marca: --ink (texto/neutro fuerte) · --forest (acción principal)
               · --gold (acento, 1 solo) · fondos --cream (lienzo) / --surface (paneles)
   ESTADO      éxito --ok · aviso --amber · error --err (cada uno con -soft para fondos)
   TEXTO       --ink principal · --text-2 descripciones · --text-3 ayudas y metadatos
   LÍNEAS      --line (divisores) · --line-strong (bordes de control)
   RADIOS      4 controles (botón, input, select) · 8 contenedores (tarjeta, fila, tabla)
               12 hojas y modales · pastilla 999 (chips, filtros, estados) · 50% círculos
   SOMBRA      una sola, solo en elementos flotantes (modal, aviso, menú). Nada más lleva sombra.
   ALTURAS     control 44px (táctil) · acción de tabla 36px (44 en celular)
   ===================================================================== */
:root{
  --surface:#FBF8F1;            /* panel: blanco cálido, nunca blanco puro */
  --surface-2:#FBF8F1;
  --line-strong:#CDBF9F;
  --gold-line:#E2C98F;
  --warn:var(--amber); --warn-soft:var(--gold-soft);
  --info:var(--text-2); --info-soft:var(--sand);
  --r-ctl:4px; --r-card:8px; --r-sheet:12px;
  --shadow-float:0 8px 24px -8px rgba(43,31,20,.28);
  --shadow-sm:0 2px 8px rgba(43,31,20,.08);
  --ring:0 0 0 3px rgba(200,162,74,.32);
  --h-ctl:44px; --h-act:36px;
  --fs-title:28px; --fs-h2:18px; --fs-h3:15px; --fs-body:14px; --fs-small:12px; --fs-micro:11px;
}
/* --- Contenedores: misma forma, mismo borde, sin sombra --- */
.card,.stat-box,.pd-box,.pd-ped,.av-form,.av-res,.mp-card,.gd-card,.cu-card,.rv-card,.pr-row,.jg-card,.jg-tabla,.alert-box,.highlight-box,.product-card,.summary-item,.canje-box{border-radius:var(--r-card)}
.jg-sheet,.jg-modal,.jg-modal>*{border-radius:var(--r-sheet)}
.card,.stat-box,.pd-box,.pd-ped,.av-form,.av-res,.mp-card,.pr-row,.jg-card,.jg-tabla{background:var(--surface);border:1px solid var(--line);box-shadow:none}
/* sombra solo en lo que flota */
.jg-modal,.jg-sheet,#toast-global,.cart-bar{box-shadow:var(--shadow-float)}
/* radios por tipo en elementos con estilo en línea (reemplaza la regla anterior que forzaba todo a 4px) */
button[style*="border-radius"],input[style*="border-radius"],select[style*="border-radius"],textarea[style*="border-radius"]{border-radius:var(--r-ctl)!important}
div[style*="border-radius:8px"],div[style*="border-radius:9px"],div[style*="border-radius:10px"],div[style*="border-radius:12px"],div[style*="border-radius:14px"]{border-radius:var(--r-card)!important}
div[style*="border-radius:16px"]{border-radius:var(--r-sheet)!important}
span[style*="border-radius:20px"]{border-radius:var(--r-pill)!important}

/* --- Botones: 5 tipos, una sola forma ---
   primario (verde)  = guardar, confirmar, enviar
   acento (dorado)   = llamada principal de la tienda
   oscuro (tinta)    = navegación y acciones neutras fuertes
   secundario        = cancelar, volver, alternativas (borde 1px, sin relleno)
   peligro           = eliminar, anular (texto y borde rojo)                      */
.btn,.btn-sm,.pd-btn,.cfg-btn,.j-btn,.j-btn-line,.pr-acc button,.dtn-btn,.state-btn,.inv-btn{
  border-radius:var(--r-ctl);font-family:inherit;font-weight:600;letter-spacing:.005em;box-shadow:none}
.btn-forest,.pd-btn-fill,.pr-acc .pri{background:var(--forest);color:var(--cream);border:1px solid var(--forest)}
.btn-gold,.btn-sm-gold,.pr-acc .gold,.j-btn.on-dark{background:var(--gold);color:var(--ink);border:1px solid var(--gold)}
.btn-brown,.btn-sm-dark,.j-btn,.btn-teal,.btn-purple,.btn-emerald,.btn-amber{background:var(--ink);color:var(--cream);border:1px solid var(--ink)}
.btn-outline,.btn-outline-gold,.pd-btn-line,.cfg-btn,.j-btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-outline,.btn-outline-gold{margin-top:10px}
.btn-quiet{background:transparent;border:0;color:var(--text-2)}
.btn-sm-gray{background:var(--sand);color:var(--text-3);border:1px solid var(--line)}
.pr-acc button{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.pr-acc .pri,.pr-acc .gold{border-width:1px}
.pr-acc .mal,.btn-danger{background:transparent;color:var(--err);border:1px solid var(--err)}
.pr-acc .mal:hover,.btn-danger:hover{background:var(--err-soft)}
.pr-acc .ic{color:var(--forest)}
@media(hover:hover) and (pointer:fine){
  .btn-outline:hover,.btn-outline-gold:hover,.pd-btn-line:hover,.cfg-btn:hover,.j-btn-line:hover,.pr-acc button:hover{background:rgba(43,31,20,.05)}
  .btn-forest:hover,.pd-btn-fill:hover,.pr-acc .pri:hover{filter:brightness(1.12)}
}
/* foco visible único en toda la plataforma */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
/* --- Campos de formulario --- */
.input-field,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-family:inherit}
.input-field:focus,input:focus,select:focus,textarea:focus{border-color:var(--gold-ink);box-shadow:var(--ring);outline:0}
.label,.variant-label{font-size:var(--fs-small);font-weight:600;color:var(--text-2)}
/* --- Chips, filtros y estados: pastilla --- */
.cat-tab,.grind-chip,.gd-chip,.inv-chip,.rg-chips button,.pd-tabs button,.pr-chip,.cu-chip,.badge,.pill,.stock-badge,.config-auto-tag{border-radius:var(--r-pill)}
.pr-chip.ok,.cu-chip.ok,.badge-green{background:var(--ok-soft);color:var(--ok)}
.pr-chip.bad,.cu-chip.mal,.badge-red{background:var(--err-soft);color:var(--err)}
.pr-chip.wip,.badge-amber,.pill{background:var(--gold-soft);color:var(--amber)}
.pr-chip.mut{background:var(--sand);color:var(--text-3)}
/* --- Pedidos: en pantallas medianas las acciones pasan a su propia fila (antes aplastaban el detalle) --- */
@media(min-width:900px) and (max-width:1399px){
  body.in-admin .pr-row{grid-template-columns:110px minmax(0,1fr) minmax(0,1.5fr) 84px 124px;grid-template-areas:"num cli items tot st" "acc acc acc acc acc" "mot mot mot mot mot"}
  body.in-admin .pr-acc{justify-content:flex-start;flex-wrap:wrap;margin-top:4px}
}
/* mes en la cabecera: solo la primera letra en mayúscula ("Noviembre de 2026", no "De") */
.mes-lbl{display:block}.mes-lbl::first-letter{text-transform:uppercase}
/* insignias del menú lateral con los colores de estado del sistema */
body.in-admin .dtn-btn .dtn-badge{white-space:nowrap;margin-left:8px}
body.in-admin .dtn-btn .dtn-badge.r{background:var(--err-soft);color:var(--err)}
/* --- Navegación: pestañas por grupo en una sola fila deslizable (celular y tableta) --- */
.subtabs-ext{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.subtabs-ext::-webkit-scrollbar{display:none}
.subtabs-ext button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center}
@media(min-width:900px){.subtabs-ext{flex-wrap:wrap;overflow:visible}}
/* acceso rápido a la tarea más frecuente */
.dtn-new{display:none}
body.in-admin .dtn-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin:2px 0 8px;border:0;border-radius:var(--r-ctl);background:var(--gold);color:var(--ink);font:700 14px inherit;font-family:inherit;cursor:pointer}
body.in-admin .dtn-new:hover{filter:brightness(.95)}
/* comentarios rápidos */
.av-quick{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.av-quick button{min-height:36px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:600 13px inherit;font-family:inherit;cursor:pointer}
.av-quick button:active{transform:scale(.97)}
/* Cuenta del cliente en celular: primero lo que más consulta (Junguitos y pedidos); las tareas únicas (opinión, guía) van después */
@media(max-width:899px){
  #s-cliente-cuenta .cuenta-wrap{display:flex;flex-direction:column}
  #s-cliente-cuenta .cuenta-h{order:0}
  #s-cliente-cuenta .cuenta-hero{order:1}
  #s-cliente-cuenta .cuenta-cols{order:2}
  #s-cliente-cuenta #cu-resena{order:3}
  #s-cliente-cuenta #cu-guias{order:4}
  #s-cliente-cuenta #cu-rec-card{order:5}
  #s-cliente-cuenta .cuenta-pie{order:6}
}
/* Catálogo plegable */
#admin-catalogo-list>.config-cat-title{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;margin:8px 0 6px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);cursor:pointer;user-select:none}
#admin-catalogo-list>.config-cat-title small{margin-left:auto;font-weight:500;color:var(--text-3);text-transform:none;letter-spacing:0}
#admin-catalogo-list>.config-cat-title i{transition:transform var(--dur-pop) var(--ease-out);color:var(--text-3)}
#admin-catalogo-list>.config-cat-title.abierta i{transform:rotate(180deg)}
#admin-catalogo-list>.cat-items[hidden]{display:none}
/* Contador de cantidad */
.av-step-sel{display:none}
.av-step{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);padding:0 4px}
.av-step button{width:44px;height:36px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);font:600 20px inherit;font-family:inherit;cursor:pointer}
.av-step button:disabled{opacity:.35;cursor:not-allowed}
.av-step button:active:not(:disabled){transform:scale(.94)}
.av-step output{min-width:28px;text-align:center;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
/* celular: cabecera de módulo más baja para que el contenido quede a la vista */
@media(max-width:599px){
  body:not(.in-admin) .admin-screen:not(#s-admin-menu)>.header p{display:none}
  body:not(.in-admin) .admin-screen:not(#s-admin-menu)>.header{padding-top:12px;padding-bottom:12px}
}
@media(prefers-reduced-motion:reduce){.btn,.btn-sm,.pd-btn,.cfg-btn,.j-btn{transition-duration:.01ms!important}}


/* utilidades (antes estilos en línea repetidos) */
.u1{font-size:18px;color:var(--ink)!important}
.u2{color:var(--ink);font-weight:500!important}
.u3{font-size:18px!important}
.u4{color:var(--gold-ink);font-weight:700!important}
.u5{font-size:13px;opacity:.85!important}
.u6{margin-top:8px!important}
.u7{margin-top:10px!important}
.u8{font-size:20px!important}
.u9{color:var(--text-3);font-size:13px;padding:16px 0;text-align:center!important}
.u10{font-size:13px;font-weight:600;color:var(--ink)!important}
.u11{color:var(--text-3)!important}
.u12{font-size:11px;color:var(--text-3)!important}
.u13{margin:0!important}
.u14{color:var(--err);font-weight:700!important}
.u15{color:var(--gold-line)!important}
.u16{text-align:center;padding:16px 0!important}
.u17{font-size:24px!important}
.u18{margin-bottom:14px!important}
.u19{text-align:left;padding:16px!important}
.u20{font-size:13px!important}
.u21{margin-top:0!important}
.u22{margin-bottom:12px!important}
.u23{margin-bottom:10px!important}
.u24{font-size:13px;line-height:1.4;color:var(--ink)!important}
.u25{font-size:13px;color:var(--amber)!important}
.u26{padding-top:10px!important}
.u27{color:var(--text-3);font-size:13px;padding:8px 0!important}
.u28{font-size:11px;opacity:.6;margin-bottom:2px;font-weight:600;letter-spacing:1px!important}
.u29{font-size:11px;color:var(--cream);opacity:.75;margin-top:2px!important}
.u30{color:var(--text-3);font-size:13px;padding:16px 0!important}
.u31{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:10px!important}
.u32{font-weight:700;color:var(--ink);margin-bottom:6px!important}
.u33{font-size:13px;color:var(--text-2)!important}
.u34{color:var(--err)!important}
.u35{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px!important}
.u36{color:var(--text-3);font-size:13px;margin:0!important}
.u37{margin-top:.7rem!important}
.u38{gap:8px!important}
.u39{margin:8px 0 0!important}
.u40{font-size:12px;color:var(--text-2)!important}

/* ── Costos y compras: menos abultado ───────────────────────────────────
   Dos niveles de pestañas: arriba las del grupo (píldoras), abajo las de
   Costos como pestañas subrayadas, más livianas, para que no parezcan una
   segunda barra igual. Cifras en una sola fila y avisos más compactos. */
#s-admin-costos>.header{padding-top:12px;padding-bottom:12px}
#s-admin-costos>.header p{display:none}
#s-admin-costos .cs-tabs{gap:2px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line)}
#s-admin-costos .cs-tabs button{min-height:44px;padding:0 12px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--text-2);font-size:14px}
#s-admin-costos .cs-tabs button.on{background:transparent;color:var(--ink);border-bottom-color:var(--gold)}
#s-admin-costos .body{padding-top:12px}
#s-admin-costos .cs-grid,#s-admin-costos .cs-grid.c4{grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:6px;margin-bottom:8px}
#s-admin-costos .cs-box{padding:8px 9px}
#s-admin-costos .cs-box span{font-size:11px;line-height:1.25;min-height:27px}
#s-admin-costos .cs-box b{font-size:15px;margin-top:2px;white-space:nowrap}
#s-admin-costos #cs-cont{padding-top:12px}
#s-admin-costos .cs-hint{padding:8px 10px;margin:6px 0;font-size:12px;line-height:1.45}
#s-admin-costos .cs-hint .cs-b,#s-admin-costos .cs-hint .cs-ac{margin-top:6px}
#s-admin-costos .cs-hint .cs-b{min-height:36px;padding:0 14px;font-size:13px}
#s-admin-costos .cs-chips{gap:6px;margin-bottom:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#s-admin-costos .cs-chips::-webkit-scrollbar{display:none}
#s-admin-costos .cs-chips button{flex:none;min-height:36px;padding:0 12px}
#s-admin-costos .cs-card{padding:10px 12px;margin-bottom:8px}
#s-admin-costos .cs-p{margin-bottom:6px}
#s-admin-costos .cs-p>button{padding:9px 12px}

/* Auditoría final: zonas táctiles de 40px mínimo en pantallas de administración (celular) */
@media(max-width:768px){
  [id^="s-admin"] button:not(.mtile):not(.tab):not(.btn-big){min-height:40px}
  [id^="s-admin"] button:not(.mtile){min-width:36px}
  [id^="s-admin"] a.u4[aria-label^="Editar"]{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
}
.lr-btn{display:inline-block;width:150px;height:98px;background:url(/assets/img/libro-reclamaciones.png) center/contain no-repeat;border:0;cursor:pointer;vertical-align:middle;border-radius:10px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.lr-btn:active{transform:scale(.97)}
.lr-btn:focus-visible{outline:3px solid var(--gold,#C8A24A);outline-offset:3px}
.pd-legal-nav .lr-btn,.j-legal .lr-btn{display:block;margin:8px auto 0}
@media(min-width:760px){.lr-btn{width:170px;height:111px}}
.pd-busca{margin:0 0 12px}
.pd-busca .input-field{margin:0 0 8px}
.pd-fechas{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 8px;align-items:center}
.pd-fechas label{font-size:12px;color:var(--text-2)}
.pd-fechas .btn{grid-column:1/-1;min-height:40px}
@media(min-width:760px){.pd-busca{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}.pd-busca #pd-q{flex:1 1 280px}.pd-fechas{grid-template-columns:auto auto auto auto auto}.pd-fechas .btn{grid-column:auto}.pd-busca-nota,#pd-busca-nota{flex-basis:100%}}
/* ── Identificación al pagar (catálogo abierto) ── */
.ci-box{background:var(--surface);border:2px solid var(--forest);border-radius:12px;padding:16px;margin:14px 0 6px}
.ci-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ci-h b{font-size:16px;color:var(--ink)}
.ci-num{width:28px;height:28px;border-radius:50%;background:var(--forest);color:var(--surface);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-nota{text-align:center;font-size:12px;color:var(--text-2);margin:10px 0}
.ci-alt{display:flex;gap:8px;flex-wrap:wrap}
.ci-alt .btn{flex:1 1 140px;margin:0;min-height:44px;font-size:13px}
.ci-ok{display:flex;align-items:center;gap:10px;background:var(--ok-soft);border:1px solid var(--forest-2);border-radius:12px;padding:12px 14px;margin:14px 0 6px}
.ci-ok>div{flex:1;min-width:0;display:flex;flex-direction:column}
.ci-ok b{font-size:15px;color:var(--ink)}
.ci-ok small{font-size:13px;color:var(--forest)}
.ci-chk{width:28px;height:28px;border-radius:50%;background:var(--forest);color:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-ok button{background:transparent;border:none;color:var(--forest);font:600 13px inherit;font-family:inherit;min-height:44px;padding:0 6px;cursor:pointer;text-decoration:underline}
#ct-tras-ident.bloq{opacity:.45;pointer-events:none;user-select:none}
.cn-bar.sin-cli .cn-out{display:none}

/* Íconos Tabler: solo los 57 que usa la página (archivo local; antes se descargaban ~900 KB del CDN) */
@font-face{font-family:"tabler-icons";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fonts/tabler-sub.woff2) format("woff2")}
.ti{font-family:"tabler-icons"!important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ti-adjustments:before{content:"\ea03"}
.ti-alert-triangle:before{content:"\ea06"}
.ti-arrow-left:before{content:"\ea19"}
.ti-arrow-right:before{content:"\ea1f"}
.ti-bell-ringing:before{content:"\ed07"}
.ti-book-2:before{content:"\efc5"}
.ti-brand-instagram:before{content:"\ec20"}
.ti-brand-whatsapp:before{content:"\ec74"}
.ti-building-bank:before{content:"\ebe2"}
.ti-calculator:before{content:"\eb80"}
.ti-camera:before{content:"\ea54"}
.ti-cards:before{content:"\f510"}
.ti-chart-bar:before{content:"\ea59"}
.ti-check:before{content:"\ea5e"}
.ti-chevron-down:before{content:"\ea5f"}
.ti-chevron-right:before{content:"\ea61"}
.ti-clock:before{content:"\ea70"}
.ti-cloud-upload:before{content:"\ea75"}
.ti-coffee:before{content:"\ef0e"}
.ti-coin:before{content:"\eb82"}
.ti-copy:before{content:"\ea7a"}
.ti-credit-card:before{content:"\ea84"}
.ti-database-export:before{content:"\ee6e"}
.ti-database-import:before{content:"\ee6f"}
.ti-device-floppy:before{content:"\eb62"}
.ti-device-mobile:before{content:"\ea8a"}
.ti-download:before{content:"\ea96"}
.ti-eye:before{content:"\ea9a"}
.ti-file-spreadsheet:before{content:"\f03e"}
.ti-gift:before{content:"\eb68"}
.ti-history:before{content:"\ebea"}
.ti-layout-dashboard:before{content:"\f02c"}
.ti-layout-grid:before{content:"\edba"}
.ti-lock:before{content:"\eae2"}
.ti-logout:before{content:"\eba8"}
.ti-mail:before{content:"\eae5"}
.ti-mail-forward:before{content:"\eeac"}
.ti-message-2:before{content:"\eaec"}
.ti-package:before{content:"\eaff"}
.ti-packages:before{content:"\f2c9"}
.ti-pencil:before{content:"\eb04"}
.ti-plus:before{content:"\eb0b"}
.ti-printer:before{content:"\eb0e"}
.ti-receipt:before{content:"\edfd"}
.ti-send:before{content:"\eb1e"}
.ti-shopping-bag:before{content:"\f5f8"}
.ti-speakerphone:before{content:"\ed61"}
.ti-star:before{content:"\eb2e"}
.ti-ticket:before{content:"\eb3d"}
.ti-trash:before{content:"\eb41"}
.ti-truck-delivery:before{content:"\ec4b"}
.ti-user:before{content:"\eb4d"}
.ti-user-check:before{content:"\eb49"}
.ti-user-plus:before{content:"\eb4b"}
.ti-user-shield:before{content:"\f7d0"}
.ti-users:before{content:"\ebf2"}
.ti-x:before{content:"\eb55"}

.pc-destacado{outline:3px solid var(--gold);outline-offset:2px;border-radius:14px}