:root{
  /* ===== UI Fase 2 · F1: tokens de diseño (fuentes del sistema, sin descargas) ===== */
  /* Color */
  --vv-green-900:#12362A;
  --vv-green-700:#1F5A43;
  --vv-green-500:#2F7D5B;
  --vv-green-100:#E6F2EC;
  --vv-green-50:#F2F8F4;
  --vv-accent:#C9A85C;
  --vv-bg:#F6F7F5;
  --vv-surface:#FFFFFF;
  --vv-surface-2:#F1F4F2;
  --vv-text:#14231C;
  --vv-text-2:#3D4C44;
  --vv-muted:#5B6862;
  --vv-border:#E1E7E3;
  --vv-danger:#B3261E;
  --vv-danger-soft:#FCEEEE;
  --vv-warn:#7A5200;
  --vv-warn-bg:#FFF6E0;
  --vv-original:#1F5A43;
  --vv-generico:#6A55A0;
  --vv-focus:rgba(47,125,91,.55);
  /* Tipografía */
  --vv-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px;
  /* Espaciado (múltiplos de 4) */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px;
  /* Radios */
  --r-10:10px; --r-14:14px; --r-20:20px; --r-28:28px; --r-pill:999px;
  /* Sombras (dos capas, suaves) */
  --sh-1:0 1px 2px rgba(20,35,28,.06),0 1px 3px rgba(20,35,28,.08);
  --sh-2:0 4px 16px rgba(20,35,28,.08);
  --sh-3:0 12px 32px rgba(20,35,28,.16);
  /* Táctil */
  --tap:48px;
  --tap-min:44px;
  /* Áreas seguras: respaldo CSS (en Android el contenedor nativo ya aparta el contenido y env() vale 0) */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  --header-gap:0px;

  /* Variables anteriores como alias de los tokens nuevos (no se rompe ninguna regla existente) */
  --primary:var(--vv-green-900);
  --primary-2:var(--vv-green-700);
  --primary-3:var(--vv-green-500);
  --accent:var(--vv-accent);

  --bg:var(--vv-bg);
  --card:var(--vv-surface);
  --card-soft:var(--vv-surface-2);

  --text:var(--vv-text);
  --text-2:var(--vv-text-2);
  --muted:var(--vv-muted);

  --border:var(--vv-border);
  --danger:var(--vv-danger);
  --danger-soft:var(--vv-danger-soft);
  --success:var(--vv-green-500);

  --shadow-sm:var(--sh-1);
  --shadow-md:var(--sh-2);
  --shadow-lg:var(--sh-3);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-xl:32px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(circle at top left,rgba(79,138,104,.08),transparent 28%),
    var(--bg);
  color:var(--text-2);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}

button:active{
  transform:scale(.97);
}

button:disabled{
  cursor:not-allowed;
  opacity:.55;
  transform:none!important;
}

input,
select,
textarea{
  color:var(--text);
}

input::placeholder,
textarea::placeholder{
  color:#98a49d;
}


/* =========================
   BARRA SUPERIOR
========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:20;

  min-height:70px;
  padding:11px max(16px,calc((100% - 1120px)/2));

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(220,230,223,.8);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:0 4px 20px rgba(23,59,42,.04);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.brand-icon{
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:15px;

  background:
    linear-gradient(145deg,#edf6ef,#dcecdf);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 5px 14px rgba(23,59,42,.10);

  font-size:23px;
}

.brand strong{
  display:block;
  color:var(--primary);
  font-size:18px;
  font-weight:800;
  letter-spacing:.5px;
}

.brand small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px;
  letter-spacing:.2px;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.role-btn,
.cart-btn{
  min-height:42px;
  padding:9px 13px;

  border:1px solid var(--border);
  border-radius:14px;

  background:rgba(255,255,255,.85);
  color:var(--primary);

  font-weight:750;
  box-shadow:var(--shadow-sm);
}

.role-btn:hover,
.cart-btn:hover{
  background:#f7faf7;
  border-color:#c8d8ce;
  transform:translateY(-1px);
}

.cart-btn{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.cart-btn b{
  min-width:21px;
  height:21px;
  padding:0 5px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:var(--primary);
  color:#fff;

  font-size:10px;
  font-weight:800;
}


/* =========================
   CONTENIDO PRINCIPAL
========================= */

main{
  width:100%;
  max-width:1120px;
  margin:auto;
  padding:24px 18px 42px;
}


/* =========================
   HERO
========================= */

.hero{
  position:relative;
  overflow:hidden;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;

  min-height:190px;

  padding:30px;

  margin-bottom:20px;

  border:1px solid rgba(220,230,223,.9);
  border-radius:var(--radius-xl);

  background:
    radial-gradient(circle at 90% 20%,rgba(199,168,90,.16),transparent 25%),
    radial-gradient(circle at 15% 100%,rgba(79,138,104,.12),transparent 30%),
    linear-gradient(135deg,#ffffff,#f2f7f3);

  box-shadow:var(--shadow-md);
}

.hero::after{
  content:"🌿";

  position:absolute;
  right:28px;
  bottom:-18px;

  font-size:105px;
  opacity:.07;

  transform:rotate(-12deg);
  pointer-events:none;
}

.hero h1{
  margin:7px 0 9px;

  color:var(--primary);

  font-size:clamp(27px,5vw,38px);
  line-height:1.05;
  letter-spacing:-1px;
}

.hero p{
  max-width:600px;
  margin:0;

  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.eyebrow{
  display:inline-flex;
  align-items:center;

  padding:6px 10px;

  border-radius:999px;

  background:#e7f1e9;
  color:var(--primary-2);

  font-size:10px;
  font-weight:850;
  letter-spacing:1.5px;
}


/* =========================
   PANEL ADMIN
========================= */

.admin-panel{
  margin-bottom:20px;
  padding:20px;

  border:1px solid var(--border);
  border-radius:var(--radius-lg);

  background:rgba(255,255,255,.9);

  box-shadow:var(--shadow-sm);
}

.admin-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.admin-head h2{
  margin:4px 0 16px;
  color:var(--primary);
  font-size:21px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px;
}

.stat{
  min-height:86px;

  padding:15px;

  border:1px solid var(--border);
  border-radius:17px;

  background:linear-gradient(145deg,#ffffff,#f6f9f6);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.stat span{
  display:block;
  margin-bottom:6px;

  color:var(--muted);
  font-size:11px;
  font-weight:600;
}

.stat b{
  color:var(--primary);
  font-size:21px;
  font-weight:850;
}

.admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}


/* =========================
   BOTONES
========================= */

.primary,
.secondary,
.danger,
.danger-outline,
.btn{
  min-height:43px;

  padding:10px 16px;

  border-radius:14px;

  font-weight:750;
  border:1px solid transparent;
}

.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 7px 18px rgba(23,59,42,.18);
}

.primary:hover{
  box-shadow:0 10px 23px rgba(23,59,42,.23);
  transform:translateY(-1px);
}

.secondary{
  color:var(--primary);
  background:#fff;
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}

.secondary:hover{
  background:#f7faf7;
  border-color:#bfd2c5;
}

.danger{
  color:#fff;
  background:var(--danger);
  box-shadow:0 6px 16px rgba(201,75,75,.15);
}

.danger:hover{
  background:#b94141;
}

.danger-outline{
  color:var(--danger);
  background:var(--danger-soft);
  border-color:#efcaca;
}

.danger-outline:hover{
  background:#fbe5e5;
  border-color:#e6b8b8;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:38px;

  padding:8px 13px;

  color:var(--primary);
  background:#fff;

  border-color:#cdded2;
  box-shadow:var(--shadow-sm);

  font-size:12px;
}

.btn:hover{
  background:#f1f7f3;
  border-color:#a9c3b2;
  transform:translateY(-1px);
}

.wide{
  width:100%;
  margin-top:10px;
}

.hidden{
  display:none!important;
}


/* =========================
   BUSCADOR Y FILTROS
========================= */

.toolbar{
  display:grid;
  grid-template-columns:1fr 190px 150px;
  gap:10px;
  margin:20px 0;
}

.search-wrap{
  min-height:48px;

  display:flex;
  align-items:center;

  padding:0 13px;

  border:1px solid var(--border);
  border-radius:16px;

  background:rgba(255,255,255,.9);

  box-shadow:var(--shadow-sm);

  transition:.2s;
}

.search-wrap:focus-within{
  border-color:#9fbeaa;
  box-shadow:0 0 0 4px rgba(79,138,104,.10);
}

.search-wrap > span{
  display:none;
}

.search-wrap::before{
  content:"⌕";
  color:var(--muted);
  font-size:21px;
  margin-right:3px;
}

.search-wrap input{
  width:100%;

  padding:13px 9px;

  border:0;
  outline:0;

  background:transparent;
}

.toolbar select{
  min-height:48px;

  padding:0 13px;

  border:1px solid var(--border);
  border-radius:16px;

  outline:none;

  color:var(--text);
  background:rgba(255,255,255,.9);

  box-shadow:var(--shadow-sm);
}

.toolbar select:focus{
  border-color:#9fbeaa;
  box-shadow:0 0 0 4px rgba(79,138,104,.10);
}


/* =========================
   PRODUCTOS
========================= */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}

.product-card{
  position:relative;

  overflow:hidden;

  background:var(--card);

  border:1px solid var(--border);
  border-radius:22px;

  cursor:pointer;

  box-shadow:var(--shadow-sm);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.product-card:hover{
  border-color:#c4d7ca;
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}

.p-img{
  width:100%;
  height:195px;

  display:block;

  object-fit:cover;

  background:
    linear-gradient(135deg,#edf3ee,#dfe9e2);
}

.p-content{
  padding:16px;
}

.p-title{
  margin:7px 0 8px;

  color:var(--primary);

  font-size:16px;
  font-weight:780;
  line-height:1.35;
}

.price{
  font-size:21px;
  font-weight:850;
  color:var(--primary-2);
  letter-spacing:-.3px;
}

.p-meta{
  margin-top:6px;

  color:var(--muted);

  font-size:11px;
  line-height:1.45;
}

.badge{
  display:inline-flex;
  align-items:center;

  min-height:23px;

  padding:4px 9px;

  border-radius:999px;

  color:#fff;

  font-size:9px;
  font-weight:850;
  letter-spacing:.35px;
}

.original{
  background:linear-gradient(135deg,#2f6b4f,#4f8a68);
}

.generico{
  background:linear-gradient(135deg,#7c6aa6,#9582c4);
}

.stock-low{
  color:var(--danger);
  font-weight:750;
}

.empty{
  text-align:center;
  padding:60px 20px;

  color:var(--muted);
}

.empty div{
  margin-bottom:8px;
  font-size:46px;
}


/* =========================
   MODALES
========================= */

.modal{
  position:fixed;
  inset:0;
  z-index:100;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:16px;

  background:rgba(12,29,20,.58);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.modal-card{
  position:relative;

  width:100%;
  max-width:700px;
  max-height:94vh;

  overflow:auto;

  background:#fff;

  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;

  box-shadow:var(--shadow-lg);

  animation:modalIn .22s ease-out;
}

@keyframes modalIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.close{
  position:absolute;
  right:14px;
  top:14px;
  z-index:5;

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(220,230,223,.9);
  border-radius:50%;

  background:rgba(255,255,255,.92);
  color:var(--primary);

  font-size:20px;
  font-weight:700;

  box-shadow:var(--shadow-sm);
}

.close:hover{
  background:#f1f6f2;
  transform:rotate(4deg);
}

.modal-img{
  width:100%;
  max-height:360px;

  object-fit:cover;

  display:block;

  background:#edf3ee;
}

.modal-body{
  padding:22px;
}

.modal-title-row{
  padding-right:45px;
}

.modal-title-row h2{
  margin:0 0 5px;

  color:var(--primary);

  font-size:25px;
  line-height:1.2;
}

.modal-price{
  margin-top:12px;

  color:var(--primary-2);

  font-size:27px;
  font-weight:850;
}

.muted{
  color:var(--muted);
  font-size:13px;
}

.pricing{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;

  margin:16px 0;
}

.pricing > div{
  padding:12px;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card-soft);
}

.pricing span{
  display:block;

  margin-bottom:4px;

  color:var(--muted);
  font-size:10px;
}

.pricing b{
  color:var(--primary);
  font-size:15px;
}

.details{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;

  margin-top:15px;

  white-space:pre-line;
}

.detail{
  padding:13px;

  border:1px solid var(--border);
  border-radius:15px;

  background:#fbfcfb;
}

.detail strong{
  display:block;
  margin-bottom:4px;

  color:var(--primary);

  font-size:11px;
}

.detail span{
  color:var(--text-2);
  font-size:13px;
  line-height:1.45;
}

.related{
  margin-top:15px;
  padding:14px;

  border-radius:16px;

  background:#f0f6f1;
  border:1px solid #d8e6dc;
}

.related strong{
  display:block;
  margin-bottom:7px;
  color:var(--primary);
  font-size:13px;
}

.client-product-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;

  margin-top:20px;
}

.quantity-selector{
  display:flex;
  align-items:center;
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:14px;

  background:#fff;
}

.quantity-selector button{
  width:40px;
  height:42px;

  border:0;

  background:#f5f8f5;
  color:var(--primary);

  font-size:18px;
  font-weight:800;
}

.quantity-selector button:hover{
  background:#e9f1eb;
}

.quantity-selector span,
.quantity-selector input{
  min-width:42px;

  text-align:center;

  border:0;

  color:var(--primary);
  font-weight:800;
}

.add-cart-btn{
  flex:1;
  min-height:43px;

  border:0;
  border-radius:14px;

  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;

  font-weight:800;

  box-shadow:0 7px 18px rgba(23,59,42,.18);
}

.admin-product-actions{
  display:flex;
  gap:9px;

  margin-top:18px;
}


/* =========================
   CARRITO
========================= */

.cart-card{
  max-width:620px;
}

.cart-items{
  display:flex;
  flex-direction:column;
  gap:10px;

  padding:20px;
}

.cart-item{
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  gap:11px;

  padding:11px;

  border:1px solid var(--border);
  border-radius:17px;

  background:#fff;

  box-shadow:var(--shadow-sm);
}

.cart-item-img{
  width:58px;
  height:58px;

  object-fit:cover;

  border-radius:13px;

  background:#edf3ee;
}

.cart-item-info{
  min-width:0;
}

.cart-item-info strong{
  display:block;

  color:var(--primary);

  font-size:13px;
  line-height:1.3;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cart-item-info small{
  display:block;

  margin-top:4px;

  color:var(--muted);

  font-size:10px;
}

.cart-item-price{
  margin-top:5px;

  color:var(--primary-2);

  font-size:12px;
  font-weight:800;
}

.cart-item-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.cart-item-actions button{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:1px solid var(--border);
  border-radius:9px;

  background:#f6f9f6;
  color:var(--primary);

  font-weight:800;
}

.cart-item-actions button:hover{
  background:#eaf2ec;
}

.cart-item-actions .remove{
  color:var(--danger);
  background:var(--danger-soft);
  border-color:#efcaca;
}

.cart-item-qty{
  min-width:23px;

  text-align:center;

  color:var(--primary);

  font-size:12px;
  font-weight:800;
}

.cart-empty{
  text-align:center;
  padding:45px 20px;

  color:var(--muted);
}

.cart-empty > div{
  margin-bottom:8px;
  font-size:42px;
}

.cart-summary{
  margin:0 20px 20px;
  padding:17px;

  border:1px solid var(--border);
  border-radius:18px;

  background:#f7faf7;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  gap:15px;

  padding:7px 0;

  color:var(--muted);
  font-size:13px;
}

.total-row{
  margin-top:8px;
  padding-top:12px;

  border-top:1px solid var(--border);

  color:var(--primary);
  font-size:19px;
  font-weight:850;
}


/* =========================
   FORMULARIO
========================= */

.form-card{
  max-width:760px;
}

.form-card form{
  padding:22px;
}

.form-card h2{
  margin:0 0 18px;
  color:var(--primary);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}

.form-grid > div{
  min-width:0;
}

.form-grid label{
  display:block;

  margin-bottom:6px;

  color:var(--primary);

  font-size:11px;
  font-weight:750;
}

.form-grid label.full{
  grid-column:1 / -1;
}

.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;

  min-height:44px;

  padding:10px 12px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:#fbfcfb;

  transition:.18s;
}

.form-grid textarea{
  min-height:100px;
  resize:vertical;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  border-color:#9fbeaa;

  background:#fff;

  box-shadow:0 0 0 4px rgba(79,138,104,.09);
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;

  margin-top:20px;
}


/* =========================
   LOGIN
========================= */

.login-card{
  max-width:390px;
  padding:27px;
  text-align:center;
}

.login-card h2{
  margin:5px 0 7px;
  color:var(--primary);
}

.login-card p{
  margin:0 0 20px;
  color:var(--muted);
  font-size:13px;
}

.pin{
  width:100%;

  padding:14px;

  border:1px solid var(--border);
  border-radius:15px;

  outline:none;

  background:#f8faf8;

  text-align:center;
  letter-spacing:7px;
  font-size:20px;
}

.pin:focus{
  border-color:#9fbeaa;
  box-shadow:0 0 0 4px rgba(79,138,104,.09);
}

.error{
  margin-top:9px;
  color:var(--danger);
  font-size:12px;
  font-weight:650;
}


/* =========================
   FOOTER
========================= */

footer{
  padding:24px 18px 30px;

  text-align:center;

  color:var(--muted);

  font-size:11px;
}


/* =========================
   SCROLLBAR
========================= */

*{
  scrollbar-width:thin;
  scrollbar-color:#bfd0c4 transparent;
}

*::-webkit-scrollbar{
  width:7px;
  height:7px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

*::-webkit-scrollbar-thumb{
  background:#bfd0c4;
  border-radius:999px;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:800px){

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .toolbar{
    grid-template-columns:1fr 1fr;
  }

  .search-wrap{
    grid-column:1 / -1;
  }

  .hero{
    min-height:175px;
    padding:25px;
  }
}


@media(max-width:600px){

  .topbar{
    min-height:64px;
    padding:9px 13px;
  }

  .brand-icon{
    width:40px;
    height:40px;
    border-radius:13px;
    font-size:21px;
  }

  .brand strong{
    font-size:16px;
  }

  .brand small{
    font-size:9px;
  }

  .role-btn,
  .cart-btn{
    min-height:39px;
    padding:8px 10px;
    border-radius:13px;
  }

  .role-btn{
    font-size:11px;
  }

  main{
    padding:16px 13px 32px;
  }

  .hero{
    min-height:165px;

    padding:22px;

    border-radius:23px;
  }

  .hero h1{
    font-size:29px;
  }

  .hero p{
    font-size:13px;
  }

  .hero::after{
    right:-5px;
    font-size:80px;
  }

  .admin-panel{
    padding:15px;
    border-radius:20px;
  }

  .admin-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .stats{
    gap:8px;
  }

  .stat{
    min-height:78px;
    padding:12px;
  }

  .stat b{
    font-size:18px;
  }

  .toolbar{
    grid-template-columns:1fr;
  }

  .search-wrap{
    grid-column:auto;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .product-card{
    border-radius:18px;
  }

  .p-img{
    height:145px;
  }

  .p-content{
    padding:12px;
  }

  .p-title{
    font-size:14px;
  }

  .price{
    font-size:18px;
  }

  .p-meta{
    font-size:10px;
  }

  .modal{
    padding:9px;
  }

  .modal-card{
    max-height:96vh;
    border-radius:23px;
  }

  .modal-img{
    max-height:280px;
  }

  .modal-body{
    padding:18px;
  }

  .modal-title-row h2{
    font-size:22px;
  }

  .pricing{
    grid-template-columns:1fr 1fr;
  }

  .pricing > div:last-child{
    grid-column:1 / -1;
  }

  .details{
    grid-template-columns:1fr;
  }

  .cart-items{
    padding:14px;
  }

  .cart-item{
    grid-template-columns:50px 1fr;
  }

  .cart-item-img{
    width:50px;
    height:50px;
  }

  .cart-item-actions{
    grid-column:2;
    justify-content:flex-start;
    margin-top:-3px;
  }

  .cart-summary{
    margin:0 14px 14px;
  }

  .client-product-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .quantity-selector{
    width:max-content;
    align-self:flex-start;
  }

  .add-cart-btn{
    width:100%;
  }

  .admin-product-actions{
    flex-direction:column;
  }

  .admin-product-actions button{
    width:100%;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-grid label.full{
    grid-column:auto;
  }

  .form-actions{
    flex-direction:column-reverse;
  }

  .form-actions button{
    width:100%;
  }
}


@media(max-width:380px){

  .grid{
    grid-template-columns:1fr;
  }

  .p-img{
    height:190px;
  }

  .top-actions{
    gap:5px;
  }

  .role-btn{
    padding:8px;
  }

  .role-btn{
    font-size:0;
  }

  .role-btn::before{
    content:"👤";
    font-size:17px;
  }

  .cart-btn span{
    display:none;
  }

  .cart-btn{
    padding:8px 9px;
  }

  .cart-item{
    grid-template-columns:46px 1fr;
  }

  .cart-item-img{
    width:46px;
    height:46px;
  }
}


/* =========================
   REDUCCIÓN DE MOVIMIENTO
========================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================
   AVISOS (TOAST)
========================= */

.vivir-toast{
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:1000;

  width:max-content;
  max-width:min(92vw,420px);
  padding:12px 16px;

  border-radius:14px;

  background:var(--primary);
  color:#fff;

  font-size:13px;
  font-weight:700;
  line-height:1.4;
  text-align:center;

  box-shadow:var(--shadow-lg);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translate(-50%,12px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s;
}

.vivir-toast.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.vivir-toast.success{
  background:var(--success);
  color:#fff;
}

.vivir-toast.error{
  margin-top:0;
  background:var(--danger);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.vivir-toast.info{
  background:var(--primary-2);
  color:#fff;
}


/* =========================
   IMPORTACIÓN / EXPORTACIÓN
========================= */

.export-menu-wrap{
  position:relative;
  display:inline-flex;
}

.export-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:40;

  min-width:230px;
  padding:6px;

  display:flex;
  flex-direction:column;
  gap:4px;

  border:1px solid var(--border);
  border-radius:16px;

  background:#fff;

  box-shadow:var(--shadow-md);
}

.export-menu button{
  min-height:40px;
  padding:9px 12px;

  border:0;
  border-radius:11px;

  background:transparent;
  color:var(--primary);

  font-weight:700;
  text-align:left;
}

.export-menu button:hover{
  background:var(--card-soft);
}

.export-menu small{
  color:var(--muted);
  font-weight:600;
}

.import-card{
  max-width:720px;
}

.import-stats{
  margin-top:14px;
}

.import-notices{
  margin-top:14px;
  padding:12px 14px;

  border:1px solid #e7dcbc;
  border-radius:15px;

  background:#fbf7ea;

  font-size:12px;
  color:var(--text-2);
}

.import-notices p{
  margin:4px 0;
}

.import-errors h3{
  margin:16px 0 8px;
  color:var(--danger);
  font-size:14px;
  letter-spacing:1px;
}

.import-table-wrap{
  max-height:260px;
  overflow:auto;

  border:1px solid var(--border);
  border-radius:14px;
}

.import-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.import-table th,
.import-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}

.import-table th{
  position:sticky;
  top:0;
  background:var(--card-soft);
  color:var(--primary);
}

.import-table small{
  color:var(--muted);
  word-break:break-all;
}

@media(max-width:600px){

  .export-menu-wrap,
  .export-menu-wrap > button{
    width:100%;
  }

  .export-menu{
    right:0;
  }
}

/* Versión instalada (panel admin) */
.app-version-info {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .65;
}


/* =========================================================
   UI FASE 2 · F1 — BASE: tipografía, foco, contraste y áreas táctiles
   (solo CSS; se apoya en los tokens de :root)
========================================================= */

body{
  background:var(--vv-bg);
  color:var(--vv-text-2);
  font-family:var(--vv-font);
  font-size:var(--fs-16);
  line-height:1.45;
}

input::placeholder,
textarea::placeholder{
  color:#77827C;
}

/* Foco visible solo con teclado / lector (no al tocar) */
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--vv-focus);
  outline-offset:2px;
}

/* Áreas táctiles: mínimo 44 px; acciones principales 48 px */
.primary,
.secondary,
.danger,
.danger-outline,
.btn{
  min-height:var(--tap-min);
}

.primary,
.danger,
.add-cart-btn,
.role-btn,
.cart-btn{
  min-height:var(--tap);
}

.role-btn,
.cart-btn{
  min-width:var(--tap);
}

.close{
  width:var(--tap);
  height:var(--tap);
}

.quantity-selector button{
  width:var(--tap);
  height:var(--tap);
}

.quantity-selector span{
  min-width:44px;
  font-size:var(--fs-18);
}

.cart-item-actions button{
  width:var(--tap-min);
  height:var(--tap-min);
  min-height:var(--tap-min);
}

.export-menu button{
  min-height:var(--tap);
}

.related .btn{
  min-height:var(--tap-min);
}

.search-wrap{
  min-height:50px;
}

.search-wrap input{
  min-height:48px;
  padding:0 9px;
  font-size:var(--fs-16);
}

.toolbar select{
  min-height:var(--tap);
  font-size:var(--fs-16);
}

/* Formulario: 16 px (legible y sin zoom automático al enfocar) */
.form-grid label{
  font-size:13px;
}

.form-grid input,
.form-grid select,
.form-grid textarea{
  min-height:var(--tap);
  font-size:var(--fs-16);
  color:var(--vv-text);
}

/* Tamaño mínimo de texto 12 px y contraste (WCAG AA) */
.brand small,
.eyebrow,
.stat span,
.pricing span,
.detail strong,
.cart-item-info small,
.cart-btn b,
.p-meta,
footer{
  font-size:var(--fs-12);
}

.eyebrow{
  letter-spacing:1px;
  color:var(--vv-green-700);
  background:var(--vv-green-100);
}

.badge{
  min-height:22px;
  padding:3px 10px;
  font-size:var(--fs-12);
  font-weight:750;
  letter-spacing:.2px;
}

.original{
  background:var(--vv-original);
}

.generico{
  background:var(--vv-generico);
}

.stock-low{
  color:var(--vv-danger);
}

.danger-outline{
  color:var(--vv-danger);
  border-color:#EBC4C1;
}


/* =========================================================
   UI FASE 2 · F2 — CABECERA Y CATÁLOGO
========================================================= */

.topbar{
  min-height:64px;
  padding:
    calc(var(--sp-8) + var(--header-gap) + var(--sat))
    max(16px,calc((100% - 1120px)/2),calc(16px + var(--sar)))
    var(--sp-8)
    max(16px,calc((100% - 1120px)/2),calc(16px + var(--sal)));
  background:var(--vv-surface);
  border-bottom:1px solid var(--vv-border);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.brand-icon{
  width:40px;
  height:40px;
  border-radius:var(--r-14);
  background:linear-gradient(145deg,var(--vv-green-100),#D4E9DC);
  box-shadow:var(--sh-1);
  font-size:20px;
}

.brand strong{
  color:var(--vv-green-900);
  font-size:var(--fs-18);
  line-height:1.1;
}

.brand small{
  margin-top:1px;
  letter-spacing:0;
}

.role-btn,
.cart-btn{
  min-height:var(--tap);
  padding:0 14px;
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
  background:var(--vv-surface);
  color:var(--vv-green-900);
  font-size:var(--fs-14);
  font-weight:700;
  box-shadow:var(--sh-1);
}

.role-btn:hover,
.cart-btn:hover{
  transform:none;
}

.cart-btn b{
  min-width:22px;
  height:22px;
  background:var(--vv-green-700);
}

main{
  padding:var(--sp-16) max(16px,calc(16px + var(--sar))) var(--sp-32) max(16px,calc(16px + var(--sal)));
}

/* Hero compacto */
.hero{
  min-height:0;
  padding:var(--sp-24);
  margin-bottom:var(--sp-16);
  border:1px solid #EDF1EE;
  border-radius:var(--r-20);
  background:
    radial-gradient(circle at 92% 18%,rgba(201,168,92,.14),transparent 30%),
    linear-gradient(135deg,var(--vv-surface),var(--vv-green-50));
  box-shadow:var(--sh-1);
}

.hero h1{
  margin:8px 0 6px;
  color:var(--vv-green-900);
  font-size:clamp(22px,4.6vw,34px);
  line-height:1.15;
  letter-spacing:-.5px;
}

.hero p{
  color:var(--vv-muted);
  font-size:var(--fs-14);
  line-height:1.5;
}

.hero::after{
  font-size:84px;
  opacity:.06;
}

/* Buscador y filtros con etiqueta visible */
.toolbar{
  grid-template-columns:1fr 200px 160px;
  align-items:end;
  gap:var(--sp-12);
  margin:var(--sp-16) 0;
}

.search-wrap{
  border-radius:var(--r-14);
  background:var(--vv-surface);
  border-color:var(--vv-border);
  box-shadow:var(--sh-1);
}

.search-wrap:focus-within{
  border-color:var(--vv-green-500);
  box-shadow:0 0 0 3px rgba(47,125,91,.18);
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  min-width:0;
}

.filter-label{
  padding-left:4px;
  color:var(--vv-muted);
  font-size:var(--fs-12);
  font-weight:700;
}

.toolbar select{
  width:100%;
  min-width:0;
  border-radius:var(--r-14);
  background:var(--vv-surface);
  border-color:var(--vv-border);
  box-shadow:var(--sh-1);
  color:var(--vv-text);
}

.toolbar select:focus{
  border-color:var(--vv-green-500);
  box-shadow:0 0 0 3px rgba(47,125,91,.18);
}

/* Tarjetas de producto */
.grid{
  gap:var(--sp-12);
}

.product-card{
  display:flex;
  flex-direction:column;
  border:1px solid #EDF1EE;
  border-radius:var(--r-20);
  box-shadow:var(--sh-2);
}

.product-card:hover{
  transform:none;
  box-shadow:var(--sh-3);
}

.product-card:active{
  transform:scale(.985);
}

.p-img{
  height:auto;
  aspect-ratio:4 / 3;
  background:linear-gradient(160deg,var(--vv-green-50),#DFEEE5);
}

.p-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  padding:var(--sp-12);
}

.p-title{
  margin:var(--sp-8) 0 var(--sp-4);
  color:var(--vv-text);
  font-size:var(--fs-14);
  font-weight:750;
  line-height:1.3;
  min-height:2.6em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.price{
  color:var(--vv-green-700);
  font-size:var(--fs-18);
}

.p-meta{
  max-width:100%;
  margin-top:2px;
  color:var(--vv-muted);
  line-height:1.4;
}

.p-brand{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.p-stock{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-top:var(--sp-8);
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--vv-green-50);
  color:var(--vv-green-700);
  font-weight:700;
}

.p-stock.stock-low{
  background:var(--vv-danger-soft);
  color:var(--vv-danger);
}

.p-stock.stock-out{
  background:var(--vv-surface-2);
  color:var(--vv-muted);
}

.p-admin{
  margin-top:var(--sp-8);
}

.empty{
  padding:48px 20px;
}

footer{
  padding:24px 18px calc(24px + var(--sab));
}

@media(max-width:800px){
  .toolbar{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){

  .topbar{
    min-height:64px;
  }

  .brand strong{
    font-size:17px;
  }

  .role-btn{
    font-size:13px;
  }

  main{
    padding-top:var(--sp-12);
  }

  .hero{
    padding:var(--sp-16) var(--sp-20);
    margin-bottom:var(--sp-12);
    border-radius:var(--r-20);
  }

  .hero h1{
    font-size:24px;
  }

  .hero p{
    font-size:var(--fs-14);
  }

  .hero::after{
    right:-4px;
    bottom:-14px;
    font-size:64px;
  }

  .toolbar{
    grid-template-columns:1fr 1fr;
    gap:var(--sp-8) var(--sp-12);
    margin:var(--sp-12) 0;
  }

  .search-wrap{
    grid-column:1 / -1;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-12);
  }

  .product-card{
    border-radius:var(--r-20);
  }

  .p-img{
    height:auto;
  }

  .p-content{
    padding:var(--sp-12);
  }

  .p-title{
    font-size:var(--fs-14);
  }

  .price{
    font-size:var(--fs-18);
  }
}

@media(max-width:380px){

  /* Dos columnas también en 360 dp (antes: una sola tarjeta enorme) */
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .p-img{
    height:auto;
  }

  .role-btn{
    padding:0 12px;
    font-size:0;
  }

  .cart-btn{
    padding:0 12px;
  }
}

@media(max-width:330px){
  .grid{
    grid-template-columns:1fr;
  }
}

.role-btn,
.cart-btn{
  white-space:nowrap;
}

.brand > div{
  min-width:0;
}

.brand strong,
.brand small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.toolbar select{
  padding:0 10px;
}

/* Texto del sistema grande (130–200 %): la cabecera pasa a dos filas en vez de desbordar */
.topbar{
  flex-wrap:wrap;
  row-gap:var(--sp-8);
}

.top-actions{
  margin-left:auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.brand{
  flex:1 1 0;
  min-width:112px;
}


/* =========================================================
   UI FASE 2 · F3 — FICHA DE PRODUCTO Y CARRITO
   (hoja inferior en móvil, pie de acciones fijo, aviso por encima)
========================================================= */

.modal{
  background:rgba(18,30,24,.46);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.modal-card{
  border:0;
  border-radius:var(--r-28);
  box-shadow:var(--sh-3);
  overscroll-behavior:contain;
}

.close{
  top:12px;
  right:12px;
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
  background:rgba(255,255,255,.96);
  color:var(--vv-green-900);
  box-shadow:var(--sh-1);
}

.close:hover{
  transform:none;
}

/* Ficha */
.modal-img{
  aspect-ratio:4 / 3;
  max-height:min(360px,38vh);
  background:linear-gradient(160deg,var(--vv-green-50),#DFEEE5);
}

.modal-body{
  padding:var(--sp-20);
}

.modal-title-row{
  padding-right:0;
}

.modal-title-row h2{
  margin:var(--sp-8) 0 var(--sp-4);
  color:var(--vv-text);
  font-size:var(--fs-22);
  line-height:1.25;
}

.modal-price{
  display:block;
  margin-top:var(--sp-4);
  color:var(--vv-green-700);
  font-size:26px;
}

#mMeta{
  margin:var(--sp-8) 0 0;
  font-size:var(--fs-14);
  line-height:1.5;
}

.modal-body h3{
  margin:var(--sp-20) 0 var(--sp-8);
  color:var(--vv-green-900);
  font-size:var(--fs-16);
}

#mDescription{
  margin:0;
  color:var(--vv-text-2);
  font-size:var(--fs-16);
  line-height:1.55;
}

.details{
  display:block;
  margin-top:var(--sp-12);
  padding:var(--sp-12) var(--sp-16);
  border-radius:var(--r-14);
  background:var(--vv-surface-2);
  color:var(--vv-text-2);
  font-size:var(--fs-14);
  line-height:1.55;
}

.details:empty{
  display:none;
}

.pricing{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-8);
  margin:var(--sp-16) 0 0;
  padding:var(--sp-12);
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
  background:var(--vv-green-50);
}

.pricing .pricing-title{
  grid-column:1 / -1;
  color:var(--vv-green-900);
  font-size:13px;
}

.pricing > div{
  padding:var(--sp-8) var(--sp-12);
  border:0;
  border-radius:var(--r-10);
  background:var(--vv-surface);
}

.pricing > div:last-child{
  grid-column:auto;
}

.pricing b{
  color:var(--vv-green-900);
  font-size:var(--fs-16);
}

.related{
  margin-top:var(--sp-16);
  padding:var(--sp-12) var(--sp-16);
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
  background:var(--vv-green-50);
}

.related .btn{
  max-width:100%;
  text-align:left;
}

/* Pie de acciones fijo dentro de la hoja */
.client-product-actions,
.admin-product-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--sp-12);
  margin:var(--sp-20) calc(-1 * var(--sp-20)) calc(-1 * var(--sp-20));
  padding:var(--sp-12) var(--sp-20) calc(var(--sp-12) + var(--sab));
  background:var(--vv-surface);
  border-top:1px solid var(--vv-border);
  box-shadow:0 -6px 16px rgba(20,35,28,.06);
}

.quantity-selector{
  flex:0 0 auto;
  width:auto;
  align-self:center;
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
  background:var(--vv-surface);
}

.quantity-selector button{
  background:var(--vv-surface-2);
  color:var(--vv-green-900);
  font-size:20px;
}

.add-cart-btn,
.admin-product-actions button{
  flex:1 1 auto;
  width:auto;
  min-height:var(--tap);
  border-radius:var(--r-14);
  background:var(--vv-green-900);
  font-size:var(--fs-16);
  box-shadow:var(--sh-2);
}

.admin-product-actions .danger{
  background:var(--vv-danger);
}

/* Carrito */
.cart-card .modal-body > h2{
  margin:var(--sp-8) 0 var(--sp-4);
  color:var(--vv-text);
  font-size:var(--fs-22);
}

.cart-card .modal-body > .muted{
  margin:0;
  font-size:var(--fs-14);
}

.cart-items{
  gap:0;
  padding:var(--sp-8) 0;
}

.cart-item{
  grid-template-columns:56px minmax(0,1fr) auto;
  grid-template-areas:
    "img info info"
    "img act  sub";
  gap:var(--sp-4) var(--sp-12);
  align-items:center;
  padding:var(--sp-12) 0;
  border:0;
  border-bottom:1px solid #EEF2EF;
  border-radius:0;
  box-shadow:none;
}

.cart-item:last-child{
  border-bottom:0;
}

.cart-item-img{
  grid-area:img;
  align-self:start;
  width:56px;
  height:56px;
  border-radius:var(--r-14);
}

.cart-item-info{
  grid-area:info;
}

.cart-item-name{
  color:var(--vv-text);
  font-size:var(--fs-14);
  font-weight:750;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.cart-item-code{
  margin-top:2px;
  color:var(--vv-muted);
  font-size:var(--fs-12);
}

.cart-item-price{
  margin-top:2px;
  color:var(--vv-muted);
  font-size:13px;
  font-weight:650;
}

.cart-item-actions{
  grid-area:act;
  grid-column:auto;
  justify-content:flex-start;
  gap:var(--sp-4);
  margin-top:0;
}

.cart-item-actions button{
  border:1px solid var(--vv-border);
  border-radius:var(--r-10);
  background:var(--vv-surface-2);
  color:var(--vv-green-900);
  font-size:18px;
  box-shadow:none;
}

.cart-item-actions .remove,
.cart-item-actions .danger{
  margin-left:var(--sp-8);
  border-color:#F0D2CF;
  background:var(--vv-danger-soft);
  color:var(--vv-danger);
}

.cart-item-qty{
  min-width:32px;
  font-size:var(--fs-16);
}

.cart-item-subtotal{
  grid-area:sub;
  color:var(--vv-green-700);
  font-size:var(--fs-16);
  font-weight:850;
  text-align:right;
  white-space:nowrap;
}

.cart-summary{
  position:sticky;
  bottom:0;
  z-index:3;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--sp-12);
  margin:var(--sp-8) calc(-1 * var(--sp-20)) calc(-1 * var(--sp-20));
  padding:var(--sp-12) var(--sp-20) calc(var(--sp-12) + var(--sab));
  border:0;
  border-top:1px solid var(--vv-border);
  border-radius:0;
  background:var(--vv-surface);
  box-shadow:0 -6px 16px rgba(20,35,28,.06);
}

.cart-summary .summary-row{
  grid-column:1 / -1;
  padding:2px 0;
  font-size:var(--fs-14);
}

.cart-summary .total-row{
  margin:0 0 var(--sp-8);
  padding-top:var(--sp-4);
  border-top:0;
  color:var(--vv-text);
  font-size:20px;
}

#clearCartBtn{
  grid-row:3;
  grid-column:1;
  margin:0;
  width:auto;
  padding:0 14px;
  font-size:var(--fs-14);
}

#confirmOrderBtn{
  grid-row:3;
  grid-column:2;
  margin:0;
  width:100%;
  font-size:var(--fs-16);
  background:var(--vv-green-900);
}

.cart-empty{
  padding:32px 12px;
}

/* Aviso (toast): con una ventana abierta se muestra arriba para no tapar el pie fijo */
.vivir-toast{
  bottom:calc(20px + var(--sab));
  max-width:min(calc(100vw - 32px),420px);
  border-radius:var(--r-14);
  font-size:var(--fs-14);
}

body:has(.modal:not(.hidden)) .vivir-toast{
  top:calc(12px + var(--sat));
  bottom:auto;
  transform:translate(-50%,-12px);
}

body:has(.modal:not(.hidden)) .vivir-toast.show{
  transform:translate(-50%,0);
}

/* Hoja inferior en móvil: ficha y carrito */
@keyframes sheetIn{
  from{ transform:translateY(24px); opacity:.6; }
  to{ transform:translateY(0); opacity:1; }
}

@media(max-width:600px){

  #modal,
  #cartModal{
    align-items:flex-end;
    padding:0;
  }

  #modal .modal-card,
  #cartModal .modal-card{
    max-width:none;
    max-height:calc(100% - 24px);
    border-radius:var(--r-28) var(--r-28) 0 0;
    animation:sheetIn .2s ease-out;
  }

  #cartModal .modal-body{
    padding-top:var(--sp-24);
  }

  #cartModal .modal-card::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    width:40px;
    height:5px;
    margin-left:-20px;
    border-radius:9px;
    background:#D5DCD8;
  }

  .modal-body{
    padding:var(--sp-20);
  }

  .modal-title-row h2{
    font-size:var(--fs-22);
  }

  .client-product-actions{
    flex-direction:row;
    align-items:center;
  }

  .quantity-selector{
    width:auto;
    align-self:center;
  }

  .add-cart-btn{
    width:auto;
  }

  .admin-product-actions{
    flex-direction:row;
  }

  .admin-product-actions button{
    width:auto;
  }

  .pricing{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .pricing > div:last-child{
    grid-column:auto;
  }

  .cart-item{
    grid-template-columns:56px minmax(0,1fr) auto;
  }

  .cart-item-img{
    width:56px;
    height:56px;
  }

  .cart-item-actions{
    grid-column:auto;
    margin-top:0;
  }

  .cart-summary{
    margin:var(--sp-8) calc(-1 * var(--sp-20)) calc(-1 * var(--sp-20));
  }
}

@media(max-width:380px){
  .cart-item{
    grid-template-columns:48px minmax(0,1fr) auto;
  }

  .cart-item-img{
    width:48px;
    height:48px;
  }
}

.add-cart-btn,
.admin-product-actions button,
#confirmOrderBtn,
#clearCartBtn{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:12px;
  padding-right:12px;
}

.quantity-selector span{
  min-width:36px;
}

@media(max-width:380px){
  .add-cart-btn,
  #confirmOrderBtn{
    font-size:15px;
  }
}

@media(max-width:380px){
  .client-product-actions,
  .admin-product-actions{
    gap:var(--sp-8);
    margin-left:calc(-1 * var(--sp-16));
    margin-right:calc(-1 * var(--sp-16));
    padding-left:var(--sp-16);
    padding-right:var(--sp-16);
  }

  #modal .modal-body{
    padding-left:var(--sp-16);
    padding-right:var(--sp-16);
  }

  .quantity-selector span{
    min-width:32px;
  }

  .add-cart-btn{
    padding-left:8px;
    padding-right:8px;
  }
}

/* Con texto del sistema grande la etiqueta puede pasar a 2 líneas (mejor que cortarla) */
.add-cart-btn,
#confirmOrderBtn{
  white-space:normal;
  line-height:1.2;
  font-size:15px;
}

/* Pie del carrito flexible: con texto grande "Confirmar pedido" ocupa su propia fila completa */
.cart-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 var(--sp-12);
}

.cart-summary .summary-row{
  flex:1 1 100%;
}

#clearCartBtn{
  order:1;
  flex:0 0 auto;
  max-width:100%;
}

#confirmOrderBtn{
  order:2;
  flex:1 1 170px;
  width:auto;
}

#clearCartBtn,
#confirmOrderBtn{
  margin-top:var(--sp-4);
}


/* =========================================================
   UI FASE 2 · F4 — PANEL ADMIN EN SECCIONES
   (Resumen · Productos · Importar y exportar · Zona delicada)
========================================================= */

.search-wrap input:focus-visible{
  outline:none; /* el anillo lo dibuja .search-wrap:focus-within */
}

.admin-panel{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.admin-head{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-12);
  margin-bottom:var(--sp-12);
}

.admin-head h2{
  margin:var(--sp-8) 0 0;
  color:var(--vv-text);
  font-size:var(--fs-22);
}

.admin-head .secondary{
  flex:0 0 auto;
  font-size:var(--fs-14);
}

.admin-actions{
  display:block;
  margin-top:0;
}

.admin-section{
  margin-bottom:var(--sp-12);
  padding:var(--sp-12) var(--sp-16) var(--sp-16);
  border:1px solid #EDF1EE;
  border-radius:var(--r-20);
  background:var(--vv-surface);
  box-shadow:var(--sh-1);
}

.admin-section-title{
  margin:0 0 var(--sp-12);
  color:var(--vv-muted);
  font-size:var(--fs-12);
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.admin-section .stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-8);
}

.stat{
  min-height:0;
  padding:var(--sp-12);
  border:0;
  border-radius:var(--r-14);
  background:var(--vv-surface-2);
  box-shadow:none;
}

.stat span{
  margin-bottom:2px;
}

.stat b{
  color:var(--vv-green-900);
  font-size:var(--fs-18);
}

.admin-section > .primary{
  width:100%;
  font-size:var(--fs-16);
  background:var(--vv-green-900);
}

/* Filas de lista de 56 px */
.admin-list{
  display:flex;
  flex-direction:column;
  margin:0 calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16));
}

.admin-row,
.export-menu-wrap > .admin-row{
  display:flex;
  align-items:center;
  gap:var(--sp-12);
  width:100%;
  min-height:56px;
  padding:var(--sp-8) var(--sp-16);
  border:0;
  border-top:1px solid #EEF2EF;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--vv-text);
  font-size:var(--fs-16);
  font-weight:650;
  text-align:left;
}

.admin-list > :first-child,
.admin-list > :first-child > .admin-row{
  border-top:0;
}

.admin-list > :last-child,
.admin-list > :last-child > .admin-row:last-child{
  border-bottom-left-radius:var(--r-20);
  border-bottom-right-radius:var(--r-20);
}

.admin-row:hover,
.admin-row:active{
  background:var(--vv-green-50);
  transform:none;
}

.admin-row-icon{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:var(--r-10);
  background:var(--vv-green-50);
  color:var(--vv-green-700);
  font-size:18px;
}

.admin-row-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;
  line-height:1.25;
}

.admin-row-text small{
  margin-top:2px;
  color:var(--vv-muted);
  font-size:var(--fs-12);
  font-weight:500;
}

.admin-row-chev{
  flex:0 0 auto;
  margin-left:auto;
  color:#8C9791;
  font-size:var(--fs-16);
  transition:transform .18s ease;
}

#exportBtn[aria-expanded="true"] .admin-row-chev{
  transform:rotate(180deg);
}

/* Menú Exportar como sublista dentro de la sección (ya no flota) */
.export-menu-wrap{
  display:block;
  width:100%;
}

.export-menu{
  position:static;
  min-width:0;
  margin:0;
  padding:0 var(--sp-16) var(--sp-8) 64px;
  gap:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.export-menu button{
  min-height:var(--tap);
  padding:0 var(--sp-12);
  border-top:1px solid #F0F3F1;
  border-radius:0;
  color:var(--vv-text-2);
  font-size:var(--fs-14);
  font-weight:650;
}

.export-menu button:hover{
  background:var(--vv-green-50);
}

/* Zona delicada */
.admin-danger-zone{
  border-color:#F3DEDC;
}

.admin-danger-zone .admin-section-title{
  color:var(--vv-danger);
}

.admin-danger-zone .admin-row{
  color:var(--vv-danger);
}

.admin-danger-zone .admin-row:hover{
  background:var(--vv-danger-soft);
}

.admin-danger-zone .admin-row-icon{
  background:var(--vv-danger-soft);
  color:var(--vv-danger);
}

.app-version-info{
  margin:var(--sp-4) var(--sp-4) var(--sp-16);
  color:var(--vv-muted);
  font-size:var(--fs-12);
  opacity:1;
}

@media(max-width:600px){

  .admin-panel{
    padding:0;
    border-radius:0;
  }

  .admin-head{
    flex-direction:row;
    align-items:center;
  }

  .admin-section .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .stat{
    min-height:0;
    padding:var(--sp-12);
  }

  .stat b{
    font-size:var(--fs-18);
  }

  .export-menu-wrap,
  .export-menu-wrap > button{
    width:100%;
  }
}

/* Desplazamiento instantáneo: el "smooth" global hacía que los desplazamientos automáticos
   (enfocar un campo, mostrar un botón lejano del panel ahora más largo) fueran a destiempo. */
html{
  scroll-behavior:auto;
  /* La cabecera fija no tapa lo que el navegador desplaza a la vista (foco, teclado) */
  scroll-padding-top:calc(76px + var(--header-gap) + var(--sat));
  scroll-padding-bottom:calc(16px + var(--sab));
}


/* =========================================================
   UI FASE 2 · F5 — VENTANAS: importación, formulario y PIN
========================================================= */

/* Pie de acciones fijo (formulario e importación) */
.form-card form{
  padding:0;
}

.form-card .modal-body > h2,
.import-card .modal-body > h2,
.login-card h2{
  margin:var(--sp-8) 0 var(--sp-4);
  color:var(--vv-text);
  font-size:var(--fs-22);
  line-height:1.25;
}

.form-card .modal-body > h2{
  margin-bottom:var(--sp-16);
  padding-right:56px;
}

.form-grid{
  gap:var(--sp-12) var(--sp-16);
}

.form-grid label{
  margin-bottom:0;
  color:var(--vv-text-2);
  font-weight:700;
}

.form-grid input,
.form-grid select,
.form-grid textarea{
  margin-top:6px;
  padding:10px 14px;
  border-radius:var(--r-14);
  border-color:#D5DDD8;
  background:var(--vv-surface);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  border-color:var(--vv-green-500);
  box-shadow:0 0 0 3px rgba(47,125,91,.18);
}

.form-card .form-actions,
.import-card .form-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:var(--sp-8) var(--sp-12);
  margin:var(--sp-20) calc(-1 * var(--sp-20)) calc(-1 * var(--sp-20));
  padding:var(--sp-12) var(--sp-20) calc(var(--sp-12) + var(--sab));
  background:var(--vv-surface);
  border-top:1px solid var(--vv-border);
  box-shadow:0 -6px 16px rgba(20,35,28,.06);
}

.form-card .form-actions button,
.import-card .form-actions button{
  width:auto;
  min-height:var(--tap);
  font-size:var(--fs-16);
}

.form-card .form-actions .primary,
.import-card .form-actions .primary{
  flex:1 1 160px;
  max-width:320px;
  background:var(--vv-green-900);
}

.form-card .form-actions .secondary,
#importCancelBtn{
  flex:0 1 auto;
}

#importDownloadErrorsBtn{
  flex:1 1 100%;
  order:-1;
}

/* Importación */
.import-card .modal-body{
  padding-top:var(--sp-24);
}

#importFileInfo{
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-14);
  word-break:break-word;
}

.import-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-8);
  margin-top:var(--sp-16);
}

.import-stats .stat{
  padding:var(--sp-12);
  border:0;
  border-radius:var(--r-14);
  background:var(--vv-surface-2);
}

.import-stats .stat:nth-child(1){ background:var(--vv-green-50); }
.import-stats .stat:nth-child(1) b{ color:var(--vv-green-700); }
.import-stats .stat:nth-child(2){ background:#EEF4FA; }
.import-stats .stat:nth-child(2) b{ color:#1D4F7A; }
.import-stats .stat:nth-child(4){ background:var(--vv-danger-soft); }
.import-stats .stat:nth-child(4) b{ color:var(--vv-danger); }

.import-notices{
  margin-top:var(--sp-16);
  padding:var(--sp-12) var(--sp-16);
  border:1px solid #F0DFB4;
  border-radius:var(--r-14);
  background:var(--vv-warn-bg);
  color:var(--vv-warn);
  font-size:var(--fs-14);
  line-height:1.45;
}

.import-errors h3{
  margin:var(--sp-20) 0 var(--sp-8);
  color:var(--vv-danger);
  font-size:13px;
  letter-spacing:.8px;
}

.import-table-wrap{
  max-height:min(260px,36vh);
  border-color:var(--vv-border);
  border-radius:var(--r-14);
  -webkit-overflow-scrolling:touch;
}

.import-table{
  font-size:13px;
}

.import-table th,
.import-table td{
  padding:10px 12px;
}

.import-table th{
  background:var(--vv-surface-2);
  color:var(--vv-green-900);
  font-size:var(--fs-12);
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* PIN */
.login-card{
  max-width:400px;
  padding:var(--sp-24) var(--sp-20);
  text-align:center;
}

.login-card .modal-body{
  padding:0;
}

.login-card p{
  margin:0 0 var(--sp-16);
  color:var(--vv-muted);
  font-size:var(--fs-14);
}

.pin{
  min-height:56px;
  border:1px solid #D5DDD8;
  border-radius:var(--r-14);
  background:var(--vv-surface);
  color:var(--vv-text);
  font-size:22px;
  letter-spacing:8px;
}

.pin:focus{
  border-color:var(--vv-green-500);
  box-shadow:0 0 0 3px rgba(47,125,91,.18);
}

.login-card .error{
  min-height:18px;
  margin:var(--sp-8) 0 var(--sp-4);
  font-size:13px;
}

.login-card .wide{
  margin-top:var(--sp-8);
  font-size:var(--fs-16);
}

.login-card .primary{
  background:var(--vv-green-900);
}

@media(max-width:600px){

  #formModal,
  #importModal{
    align-items:flex-end;
    padding:0;
  }

  #formModal .modal-card,
  #importModal .modal-card{
    max-width:none;
    max-height:calc(100% - 24px);
    border-radius:var(--r-28) var(--r-28) 0 0;
    animation:sheetIn .2s ease-out;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-card .form-actions,
  .import-card .form-actions{
    flex-direction:row;
  }

  .form-card .form-actions button,
  .import-card .form-actions button{
    width:auto;
  }

  .form-card .form-actions .primary,
  .import-card .form-actions .primary{
    max-width:none;
  }

  .import-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .login-card{
    padding:var(--sp-24) var(--sp-20);
  }
}

/* Texto grande (hasta 200 %): nada puede ensanchar la página (en móvil eso amplía el viewport y todo se descuadra) */
body{
  overflow-x:clip;
}

.admin-head{
  flex-wrap:wrap;
}

.admin-head > div{
  min-width:0;
  flex:1 1 160px;
}

.stats,
.admin-section .stats,
.import-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media(min-width:601px){
  .admin-section .stats,
  .import-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.stat,
.stat span,
.stat b,
#importTitle,
#importFileInfo,
.import-notices,
.modal-title-row h2{
  min-width:0;
  overflow-wrap:anywhere;
}

.toolbar{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

@media(min-width:801px){
  .toolbar{
    grid-template-columns:minmax(0,1fr) 200px 160px;
  }
}

.form-card .form-actions .secondary,
#importCancelBtn,
#clearCartBtn{
  max-width:100%;
  white-space:normal;
}


/* =========================================================
   UI FASE 2 · F6 — ICONOS SVG (sprite en línea en index.html)
========================================================= */

.icon-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.icon{
  width:1.25em;
  height:1.25em;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-0.22em;
  pointer-events:none;
}

.primary,
.secondary,
.danger,
.danger-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-8);
}

.admin-row,
.export-menu-wrap > .admin-row{
  justify-content:flex-start;
}

/* Marca y hero */
.brand-icon{
  color:var(--vv-green-700);
  font-size:0;
}

.brand-icon .icon{
  width:22px;
  height:22px;
}

.hero::after{
  content:"";
  right:18px;
  bottom:-10px;
  width:120px;
  height:120px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5A43' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5.5-13.5 14-14 .5 8.5-5 14-13 14z'/%3E%3Cpath d='M5 19c3-4 6-6.5 9.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.10;
  font-size:0;
  transform:rotate(-8deg);
}

/* Cabecera: botones de icono de 48 */
.cart-btn,
.role-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-8);
}

.cart-btn .icon,
.role-btn .icon{
  width:22px;
  height:22px;
}

.role-btn::before{
  content:none !important;
}

.role-btn.is-admin{
  background:var(--vv-green-50);
  border-color:#CFE3D7;
  color:var(--vv-green-900);
}

/* Buscador */
.search-wrap::before{
  content:none;
}

.search-wrap > .search-icon{
  display:flex;
  color:var(--vv-muted);
}

.search-wrap > .search-icon .icon{
  width:20px;
  height:20px;
}

/* Botones de icono */
.close{
  font-size:0;
}

.close .icon,
.quantity-selector .icon,
.cart-item-actions .icon{
  width:20px;
  height:20px;
  stroke-width:2.1;
}

.quantity-selector button,
.cart-item-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.admin-row-icon{
  font-size:0;
}

.admin-row-icon .icon,
.admin-row-chev .icon{
  width:20px;
  height:20px;
}

.admin-row-chev{
  display:flex;
}

/* Estados vacíos */
.empty-icon,
.empty div.empty-icon,
.cart-empty > div.empty-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:0 auto var(--sp-12);
  border-radius:var(--r-20);
  background:var(--vv-green-50);
  color:var(--vv-green-700);
  font-size:0;
}

.empty-icon .icon{
  width:34px;
  height:34px;
  stroke-width:1.6;
}

/* Etiqueta oculta a la vista pero disponible para lectores de pantalla */
.cart-btn .cart-label.sr-mobile,
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* Móvil: cabecera con iconos (el texto accesible se conserva) */
@media(max-width:600px){

  .cart-btn{
    position:relative;
    width:var(--tap);
    padding:0;
  }

  .cart-btn .cart-label,
  .role-btn:not(.is-admin) .role-label,
  .role-btn .role-label-extra{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .cart-btn b{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border:2px solid var(--vv-surface);
    font-size:var(--fs-12);
  }

  .role-btn{
    min-width:var(--tap);
    padding:0 12px;
    font-size:var(--fs-14);
  }

  .role-btn:not(.is-admin){
    width:var(--tap);
    padding:0;
  }

  .top-actions{
    gap:var(--sp-12);
  }
}

@media(max-width:380px){
  .role-btn{
    font-size:var(--fs-14);
  }
}


/* =========================================================
   UI FASE 2 · F7 — ÁREAS SEGURAS
   En Android el contenedor nativo ya aparta barras, recorte y teclado
   (env() = 0). --header-gap sustituye al antiguo EXTRA_TOP_SPACE nativo
   de 12 px. En navegador/PWA, --sat/--sab/--sal/--sar protegen igual.
========================================================= */

:root{
  --header-gap:8px;
}


/* =========================================================
   v1.0.5 · FOTO DEL PRODUCTO EN EL FORMULARIO
========================================================= */

.photo-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.photo-preview{
  width:120px;
  height:120px;
  object-fit:contain;
  background:#FFFFFF;
  border:1px solid var(--border, #E3E7E1);
  border-radius:12px;
}

.photo-preview.hidden{
  display:none;
}

.photo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.photo-actions button{
  min-height:44px;
}

.photo-info{
  overflow-wrap:anywhere;
}

/* v1.0.5 · Fotos de envase (img/productos/… o foto subida): se muestran
   completas sobre blanco, sin recortar el envase. Las fotos demo (https)
   y el marcador de posición conservan su estilo. */
.p-img[src^="img/productos/"],
.p-img[src^="data:image/jpeg"],
.modal-img[src^="img/productos/"],
.modal-img[src^="data:image/jpeg"],
.cart-item-img[src^="img/productos/"],
.cart-item-img[src^="data:image/jpeg"]{
  object-fit:contain;
  background:#FFFFFF;
}

/* =========================================================
   FASE A (1.0.7) · precio/stock, pedidos, WhatsApp, configuración
   ========================================================= */

.price.price-consult{
  color:var(--vv-text-2);
  font-size:var(--fs-14);
  font-weight:800;
}

.p-stock.stock-order{
  background:var(--vv-green-50);
  color:var(--vv-green-700);
}

.product-extras{
  margin-top:var(--sp-12);
}

.product-extras p{
  margin:0 0 var(--sp-8);
  font-size:var(--fs-14);
  line-height:1.45;
}

.health-note{
  padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-10);
  background:var(--vv-warn-bg);
  color:var(--vv-warn);
}

.price-note{
  color:var(--vv-text-2);
  font-weight:700;
}

.my-orders-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  min-height:44px;
  margin:0 0 var(--sp-12);
}

.wa-fab{
  position:fixed;
  right:calc(16px + var(--sar, 0px));
  bottom:calc(16px + var(--sab, 0px));
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  min-height:48px;
  padding:0 var(--sp-16);
  border:0;
  border-radius:var(--r-pill);
  background:#1F7A4D;
  color:#FFFFFF;
  font-weight:800;
  box-shadow:0 6px 18px rgba(18,54,42,.28);
}

.wa-fab .icon{
  width:22px;
  height:22px;
}

.orders-count{
  display:inline-flex;
  min-width:22px;
  height:22px;
  margin-left:6px;
  padding:0 6px;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-pill);
  background:var(--vv-green-700);
  color:#FFFFFF;
  font-size:var(--fs-12);
}

.order-list{
  display:grid;
  gap:var(--sp-8);
  margin-top:var(--sp-12);
}

.order-card{
  display:grid;
  gap:4px;
  width:100%;
  min-height:64px;
  padding:var(--sp-12);
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
  background:var(--vv-surface);
  color:var(--vv-text);
  text-align:left;
  font:inherit;
}

.order-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-8);
}

.order-card-meta{
  color:var(--vv-muted);
  font-size:var(--fs-12);
}

.order-card-total{
  font-weight:850;
  color:var(--vv-green-700);
}

.order-state{
  display:inline-flex;
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--vv-surface-2);
  color:var(--vv-text-2);
  font-size:var(--fs-12);
  font-weight:800;
  vertical-align:middle;
}

.order-state.state-pago_pendiente,
.order-state.state-comprobante_recibido{
  background:var(--vv-warn-bg);
  color:var(--vv-warn);
}

.order-state.state-pago_verificado,
.order-state.state-en_preparacion,
.order-state.state-enviado,
.order-state.state-entregado{
  background:var(--vv-green-100);
  color:var(--vv-green-700);
}

.order-state.state-cancelado{
  background:var(--vv-danger-soft);
  color:var(--vv-danger);
}

.orders-filter{
  display:grid;
  gap:4px;
  margin-top:var(--sp-12);
  font-weight:700;
}

.orders-filter select,
.verify-box input,
.motivo-field input{
  min-height:44px;
  padding:0 var(--sp-12);
  border:1px solid var(--vv-border);
  border-radius:var(--r-10);
  font:inherit;
}

.order-actions{
  display:grid;
  gap:var(--sp-8);
  margin:var(--sp-12) 0;
}

.verify-box,
.motivo-field{
  display:grid;
  gap:var(--sp-8);
  padding:var(--sp-12);
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
}

.verify-box label,
.motivo-field{
  font-weight:700;
}

.verify-box label{
  display:grid;
  gap:4px;
}

.order-info{
  white-space:pre-line;
}

.admin-access-blocked{
  margin:var(--sp-16) var(--sp-16) 0;
  padding:var(--sp-16);
  border-radius:var(--r-12);
  background:var(--vv-surface-2);
  display:flex;
  flex-direction:column;
  gap:var(--sp-10);
}

.admin-access-blocked h2{
  margin:0;
  font-size:var(--fs-20);
}

.admin-access-blocked .muted{
  margin:0;
}

.pay-data{
  margin-top:var(--sp-12);
  padding:var(--sp-12);
  border-radius:var(--r-10);
  background:var(--vv-surface-2);
}

.pay-data strong{
  display:block;
  margin-bottom:var(--sp-8);
}

.pay-data pre,
.pay-account-block{
  margin:var(--sp-8) 0 0;
  padding:var(--sp-12);
  border-radius:var(--r-10);
  background:var(--vv-surface);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  font:inherit;
  user-select:text;
  -webkit-user-select:text;
}

.pay-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:var(--sp-8);
}

.pay-row > span{
  color:var(--vv-text-2);
  font-size:var(--fs-13);
}

.pay-row > b{
  font-weight:600;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.pay-account-num{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:clamp(1.05rem, 4.2vw, 1.35rem);
  letter-spacing:0.02em;
  line-height:1.35;
  user-select:all;
  -webkit-user-select:all;
  overflow-wrap:anywhere;
  word-break:break-all;
}

.pay-account-masked{
  opacity:0.85;
}

.pay-ref{
  user-select:all;
  -webkit-user-select:all;
}

.pay-copy-btn{
  margin-top:var(--sp-12);
}

.pay-data-warn{
  margin:var(--sp-8) 0 0;
  color:var(--vv-text-2);
}

.receipt-img{
  display:block;
  max-width:100%;
  max-height:420px;
  margin-top:var(--sp-8);
  border-radius:var(--r-10);
  object-fit:contain;
  background:var(--vv-surface-2);
}

.order-history{
  margin:var(--sp-12) 0;
  color:var(--vv-text-2);
  font-size:var(--fs-14);
}

.co-delivery{
  margin:0;
  padding:var(--sp-12);
  border:1px solid var(--vv-border);
  border-radius:var(--r-14);
}

.co-delivery legend{
  font-weight:700;
}

.co-radio{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:var(--sp-12);
  min-height:44px;
  font-weight:700;
}

.co-radio input[type="radio"]{
  flex:0 0 auto;
  width:22px;
  height:22px;
  min-height:0;
  margin:0;
  padding:0;
  accent-color:var(--vv-green-700);
}

.co-envio{
  display:grid;
  gap:var(--sp-8);
}

.co-envio.hidden{
  display:none;
}

.settings-title{
  margin:var(--sp-24) 0 var(--sp-8);
}

.audit-list{
  margin:0;
  padding-left:18px;
  color:var(--vv-text-2);
  font-size:var(--fs-12);
  line-height:1.6;
}


/* =========================================================
   v1.0.8 · MULTIPLATAFORMA — tablet y escritorio
   Solo reglas min-width ≥ 768px: el móvil (≤ 767px) no cambia.
========================================================= */

@media(min-width:768px){
  .grid{
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:var(--sp-16);
  }
}

@media(min-width:1024px){
  main{
    max-width:1280px;
  }

  .grid{
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  }
}

@media(min-width:1440px){
  main{
    max-width:1440px;
  }
}

/* ===== Etapa 2 · capa nube (solo aparece con la nube activa) ===== */
.nube-field{
  display:block;
  margin:8px 0;
  font-weight:600;
  text-align:left;
}
.nube-field input{
  display:block;
  width:100%;
  margin-top:4px;
  box-sizing:border-box;
}
.nube-forgot{
  display:block;
  width:100%;
  margin:4px 0 8px;
  padding:8px;
  background:none;
  border:0;
  color:var(--green, #1b5e45);
  font:inherit;
  font-weight:700;
  text-decoration:underline;
  text-align:center;
  cursor:pointer;
}
.nube-forgot.hidden{
  display:none;
}
.nube-status{
  margin-top:12px;
  font-size:.85em;
}
.nube-mig-body{
  text-align:left;
  margin:8px 0 12px;
}
.nube-mig-body p{
  margin:6px 0;
}
.nube-list{
  max-height:160px;
  overflow:auto;
  margin:4px 0 8px;
  padding-left:18px;
  font-size:.85em;
}


/* =========================================================
   Etapa 2 · Cuenta VIVIR: cliente vs. personal (mismos tokens)
   Cliente = persona + «Mi cuenta» (estilo base del botón).
   Personal = escudo + «Vendedor»/«Administración», acento dorado.
========================================================= */
.nube-account-btn.nube-account-staff{
  border-color:var(--vv-accent);
  box-shadow:inset 0 0 0 1px var(--vv-accent);
}
.nube-account-btn.nube-account-staff .icon{
  color:var(--vv-accent);
}
.nube-vendor-banner{
  background:var(--vv-warn-bg);
  color:var(--vv-warn);
  border-radius:var(--r-10);
  padding:var(--sp-8) var(--sp-12);
  margin:0 0 var(--sp-12);
}

/* Etapa 3 · usuarios, configuración comercial, ventas de campo (mismos tokens) */
.com-body h3{ margin:18px 0 8px; font-size:1rem; color:var(--vv-green-900); }
.com-card{ border:1px solid var(--vv-border); border-radius:12px; padding:10px 12px; margin:8px 0; background:var(--vv-surface); }
.com-form{ display:grid; gap:8px; }
.com-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; }
.com-actions input, .com-actions select{ flex:1 1 140px; min-width:0; }
.com-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.com-chip{ background:var(--vv-green-50); color:var(--vv-green-900); border-radius:999px; padding:2px 10px; font-size:.8rem; }
.com-perms{ border:1px solid var(--vv-border); border-radius:12px; padding:8px 10px; display:grid; gap:4px; }
.com-check{ display:flex; gap:8px; align-items:center; font-size:.92rem; color:var(--vv-text); }
.com-restricted{ color:var(--vv-text-2); }
.com-badge{ display:inline-block; border-radius:999px; padding:1px 9px; font-size:.78rem; font-weight:600; }
.com-ok{ background:var(--vv-green-100); color:var(--vv-green-900); }
.com-wait{ background:var(--vv-warn-bg); color:var(--vv-warn); }
.com-bad{ background:var(--vv-danger-soft); color:var(--vv-danger); }
.com-totals p{ margin:2px 0; }
.com-last{ font-size:.78rem; margin:4px 0 0; }
.com-menu{ display:grid; gap:8px; margin:10px 0; }
.com-receipt-img{ max-width:100%; border-radius:10px; margin-top:6px; border:1px solid var(--vv-border); }
.com-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.com-table th, .com-table td{ border-bottom:1px solid var(--vv-border); padding:4px 6px; text-align:left; }
.nube-mig-banner{ border:1px solid var(--vv-warn); background:var(--vv-warn-bg); color:var(--vv-text); border-radius:12px; padding:10px 12px; margin:8px 0; }
.nube-mig-banner p{ margin:0 0 8px; }
/* 1.0.12 · acceso «Personal» (llave, acento dorado) separado de «Mi cuenta» (persona) */
.com-staff-btn{ border-color:var(--vv-accent) !important; color:var(--vv-green-900); background:var(--vv-surface); background:color-mix(in srgb, var(--vv-accent) 18%, var(--vv-surface)); }
.com-staff-btn .icon{ color:var(--vv-accent); }
.com-quick-sale{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; }
.com-highlight{ border:2px solid var(--vv-warn) !important; background:var(--vv-warn-bg) !important; }
@media(max-width:600px){
  .role-btn.com-staff-btn{ width:auto; padding:0 10px; gap:6px; font-size:12px; }
  .role-btn.com-staff-btn .role-label{ position:static; width:auto; height:auto; overflow:visible; clip:auto; font-size:12px; font-weight:700; }
}

/* 1.0.13 · barra inferior del vendedor y Usuarios y vendedores (tokens --vv-* existentes)
   z-index por debajo de .modal (100): en catálogo queda al alcance del pulgar; en la ficha
   del producto / carrito / venta el modal la cubre y no tapa «Agregar» ni cantidades. */
.com-bottom-bar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-around; gap:4px;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--vv-surface); border-top:1px solid var(--vv-border); box-shadow:0 -4px 14px rgba(0,0,0,.06); }
.com-bottom-bar button{ flex:1 1 0; min-width:0; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:0; background:transparent; color:var(--vv-green-900); font-size:.72rem; font-weight:600; border-radius:10px; position:relative; }
.com-bottom-bar button:active{ background:var(--vv-green-50); }
.com-bottom-bar button.hidden{ display:none; }
.com-bottom-bar b{ position:absolute; top:2px; right:calc(50% - 22px); background:var(--vv-accent); color:#fff; border-radius:999px; font-size:.68rem; min-width:18px; padding:0 5px; }
body.com-has-bar{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
body.com-has-bar .vivir-toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }
/* Ficha: «Venta rápida» junto a agregar (vendedor autenticado, sin entrar como cliente) */
#comProductQuickSale{ flex:1 1 auto; min-width:0; }
#comProductAddLine{ flex:0 0 auto; }
.com-menu-group .admin-section-title{ margin:12px 0 4px; }

/* Dos aplicaciones Android. Web (vivir-web) no cambia la UI. */
.variant-gate{
  margin:12px 16px 0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--vv-warn, #e6b800);
  background:var(--vv-warn-bg, #fff8e6);
  color:var(--vv-text, #173b2a);
  font-size:.92rem;
  line-height:1.35;
}
.variant-gate.variant-gate-ok{
  border-color:var(--vv-green-700, #1f7a4d);
  background:var(--vv-green-50, #edf6ef);
}
body.vivir-comercial .admin-only{ display:none !important; }
body.vivir-admin #cartBtn,
body.vivir-admin #clientProductActions{ display:none !important; }
.com-code{ font-family:ui-monospace,monospace; }
.com-seller p{ margin:2px 0; }

/* Comercial 005: avisos, revisión del pedido */
.notif-btn { position: relative; }
.notif-count { background: #c0392b; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 12px; margin-left: 4px; }
.co-review { border: 2px solid var(--green, #2e7d32); border-radius: 12px; padding: 12px; margin: 12px 0; background: #f6fbf6; }
.co-review h3 { margin: 0 0 6px; }
.co-review-items { margin: 6px 0; padding-left: 18px; }
.notif-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.notif-item { border: 1px solid #dfe6df; border-radius: 10px; padding: 8px 10px; margin: 6px 0; background: #fff; }
.notif-item.read { opacity: .65; }
.notif-item p { margin: 4px 0; }
.notif-order { border-bottom: 1px solid #eee; padding: 6px 0; }
.notif-admin-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.notif-config { margin: 10px 0; }
.notif-zone input { width: 90px; }

/* t69u · desglose de envío (carrito, resumen y revisión): filas, no tarjetas */
.pricing.co-summary,
.pricing.co-breakdown{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pricing.co-summary > div,
.pricing.co-breakdown > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:8px 12px;
}
.pricing.co-summary .bd-total,
.pricing.co-breakdown .bd-total{
  font-size:1.1em;
  font-weight:800;
}
.cart-shipping-note{
  margin:2px 0 8px;
  font-size:.85em;
}

/* ---- t70u cierre comercial: banner, stepper, opciones de envío, timeline, panel admin ---- */
.free-banner{background:#e8f3e4;border:1px solid #b9d7ad;color:var(--primary);border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:.92rem}
.free-banner b{display:block;font-size:1rem}
.co-stepper{display:flex;list-style:none;padding:0;margin:0 0 14px;gap:4px;counter-reset:st}
.co-stepper li{flex:1;text-align:center;font-size:.78rem;color:#7a8a76;position:relative;padding-top:26px;counter-increment:st}
.co-stepper li::before{content:counter(st);position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#e3e8e1;color:#55624f;line-height:22px;font-weight:700}
.co-stepper li.active{color:var(--primary);font-weight:700}
.co-stepper li.active::before{background:var(--primary-3);color:#fff}
.co-stepper li.done::before{content:"✓";background:var(--primary);color:#fff}
.co-ship-options{display:grid;gap:6px;margin:8px 0}
.co-ship-title{margin:0;font-weight:700}
.co-ship-opt{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;border:1px solid #dfe5dc;border-radius:10px;padding:8px 10px;opacity:.75}
.co-ship-opt.active{border-color:var(--primary-3);background:#f1f7ee;opacity:1}
.co-ship-check{width:20px;height:20px;border-radius:50%;border:2px solid #b9c4b4;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.co-ship-opt.active .co-ship-check{background:var(--primary);border-color:var(--primary)}
.co-terms{font-size:.88rem;margin:8px 0}
.order-timeline{list-style:none;margin:8px 0 4px;padding:0 0 0 18px;border-left:2px solid #dfe5dc}
.order-timeline li{position:relative;padding:2px 0 8px 8px;color:#8a9686;font-size:.86rem}
.order-timeline li::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:#dfe5dc}
.order-timeline li.done{color:var(--primary)}
.order-timeline li.done::before{background:var(--primary)}
.order-timeline li.current{color:#b7791f;font-weight:700}
.order-timeline li.current::before{background:#e5a93b}
.order-timeline li.cancel::before{background:#c0392b}
.st-badge{display:inline-block;border-radius:999px;padding:1px 8px;font-size:.75rem;font-weight:700;background:#eef1ec;color:#4b5a47}
.st-badge.st-comprobante_recibido,.st-badge.st-pago_pendiente{background:#fff3d6;color:#8a5a00}
.st-badge.st-pago_verificado{background:#e3f4e1;color:#2f6b2f}
.st-badge.st-en_preparacion{background:#e6eefc;color:#2d4f8f}
.st-badge.st-enviado{background:#dff1f7;color:#1f6077}
.st-badge.st-entregado{background:#2f5d3a;color:#fff}
.st-badge.st-cancelado{background:#fbe3e0;color:#9b2c20}
.status-filters{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.status-filters button{padding:4px 10px;font-size:.8rem;width:auto}
.admin-layout{display:grid;grid-template-columns:150px 1fr;gap:12px}
.admin-side{display:flex;flex-direction:column;gap:4px}
.admin-side button{text-align:left;width:100%;padding:6px 10px;font-size:.85rem}
.badge-n{background:#c0392b;color:#fff;border-radius:999px;padding:0 6px;font-size:.72rem}
.admin-main{min-width:0}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.admin-cards div{border:1px solid #dfe5dc;border-radius:10px;padding:10px;display:flex;flex-direction:column}
.admin-cards b{font-size:1.4rem;color:var(--primary)}
.table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:.82rem}
.admin-table th,.admin-table td{border-bottom:1px solid #e6ebe4;padding:6px;text-align:left;vertical-align:top}
.legal-links{margin-top:4px;font-size:.8rem}
.legal-links a{color:inherit}
@media (max-width:640px){.admin-layout{grid-template-columns:1fr}.admin-side{flex-direction:row;flex-wrap:wrap}.admin-side button{width:auto}}
.brand-icon .brand-logo{width:100%;height:100%;display:block;border-radius:50%}

/* Fix 1.0.18: «X» de cierre siempre visible (antes el glifo de texto quedaba con font-size:0
   y el botón se veía como un círculo blanco vacío en el modal de avisos del admin). */
.modal .close{
  background:#FFFFFF;
  color:var(--vv-green-900,#14532D);
  border:1px solid rgba(20,83,45,.28);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.modal .close .icon{
  stroke:currentColor;
  color:inherit;
}
.modal .close:focus-visible{
  outline:3px solid var(--vv-green-600,#16A34A);
  outline-offset:2px;
}