/* ============================================================
   HARVEST & CO. — CUSTOMER PORTAL · shared styles
   Estilo "tienda" limpio. Reutiliza la paleta teal del CRM
   (SELBUK), diseño plano (sin sombras decorativas).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --teal:#10b3a6;
  --teal-dark:#0c8c82;
  --teal-soft:#e6f7f5;
  /* COLOR DE MARCA (teal del CRM): banner, sidebar, badges, dots.
     (Antes era azul; ahora apunta al teal que el cliente quiere.) */
  --blue:#10b3a6;
  --blue-dark:#0c8c82;
  --blue-soft:#e6f7f5;
  /* VERDE LIMA: SOLO para resaltar TEXTO (nunca fondos ni botones) */
  --green:#16a34a;
  --green-soft:#e7f6ec;
  --red:#e2483d;
  --red-soft:#fdeceb;
  --amber:#f59e0b;
  --amber-soft:#fef3e2;
  --navy:#0f1b2d;
  --slate:#64748b;
  --slate-light:#94a3b8;
  --line:#e9eef2;
  --bg:#f4f7f9;
  --card:#ffffff;
  --ink:#1a2433;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* FUENTE GENERAL +12% — todos los font-size en px de este archivo se
   subieron proporcionalmente ~12% respecto a la versión anterior. */
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:15.7px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ============================================================
   LAYOUT: header (frame fijo) con navegación integrada + main
   ============================================================ */
:root{ --pt-header-h:62px; }

/* ---------- HEADER fijo (frame) ---------- */
.pt-top{position:fixed;top:0;left:0;right:0;height:var(--pt-header-h);z-index:60;
  display:flex;align-items:center;gap:18px;background:#fff;border-bottom:1px solid var(--line);padding:0 22px}
.pt-burger{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;transition:.15s}
.pt-burger:hover{background:var(--bg);border-color:var(--slate-light)}
.pt-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.pt-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.pt-logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:23.5px}
.pt-brand-tx b{display:block;font-size:17.9px;letter-spacing:-.2px}
.pt-brand-tx small{display:block;font-size:13.4px;color:var(--slate);margin-top:1px}
.pt-top-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.pt-cart-btn{position:relative;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.15s}
.pt-cart-btn:hover{border-color:var(--teal);color:var(--teal-dark)}
.pt-cart-btn svg{width:21px;height:21px}
/* Selector de idioma: mismo marco que el carrito, pero con texto EN/ES */
.pt-lang-btn{width:auto;gap:6px;padding:0 12px;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.3px;text-decoration:none;color:var(--teal-dark);border-color:var(--teal);background:var(--teal-soft)}
.pt-lang-btn:hover{background:var(--teal);color:#fff}
.pt-lang-btn svg{width:16px;height:16px}
.pt-cart-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;background:var(--teal);
  color:#fff;font-size:13.4px;font-weight:700;line-height:20px;text-align:center;border-radius:20px;border:2px solid #fff}
/* ---------- ENGRANAJE DE CONFIGURACIÓN (header) ---------- */
.pt-gear-wrap{position:relative}
.pt-gear-btn svg{width:21px;height:21px}
.pt-gear-wrap.open .pt-gear-btn{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-soft)}
.pt-gear-menu{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:92vw;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px;
  box-shadow:0 14px 34px rgba(15,27,45,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.pt-gear-wrap.open .pt-gear-menu{opacity:1;visibility:visible;transform:translateY(0)}
.pt-gear-sec{font-size:11.6px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-light);
  font-weight:700;padding:7px 10px 5px}
.pt-gear-note{font-size:12px;color:var(--slate-light);line-height:1.45;padding:0 11px 7px}
.pt-gear-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-radius:9px;padding:10px 11px;font-family:inherit;
  font-size:14.6px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
.pt-gear-item svg{width:18px;height:18px;flex-shrink:0;opacity:.85}
.pt-gear-item:hover{background:var(--bg)}
.pt-gear-item.danger{color:#c0392b}
.pt-gear-item.danger:hover{background:#fdecea}
/* divisor entre secciones del menú config */
.pt-gear-divider{height:1px;background:var(--line);margin:7px 4px}
/* toggle con switch (ajuste de tienda) */
.pt-gear-toggle{display:flex;align-items:center;gap:12px;padding:8px 11px;border-radius:9px;cursor:pointer;transition:.12s}
.pt-gear-toggle:hover{background:var(--bg)}
.pt-gear-toggle-tx{flex:1;display:flex;flex-direction:column}
.pt-gear-toggle-tx b{font-size:14px;font-weight:600;color:var(--ink)}
.pt-gear-toggle-tx small{font-size:12.3px;color:var(--slate);margin-top:1px;line-height:1.35}
/* switch */
.pt-switch{position:relative;flex-shrink:0;width:40px;height:23px}
.pt-switch input{position:absolute;opacity:0;width:0;height:0}
.pt-switch-k{position:absolute;inset:0;background:#cbd5e0;border-radius:20px;transition:.18s}
.pt-switch-k::before{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;background:#fff;
  border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pt-switch input:checked + .pt-switch-k{background:var(--teal)}
.pt-switch input:checked + .pt-switch-k::before{transform:translateX(17px)}
/* sub-opciones (radios Back order / sin distinción / envío) */
.pt-gear-sub{padding:4px 12px 8px 13px;display:flex;flex-direction:column;gap:6px}
.pt-gear-radio{display:flex;align-items:center;gap:8px;font-size:13.4px;color:var(--ink);cursor:pointer}
.pt-gear-radio input[type=radio]{accent-color:var(--teal);flex-shrink:0}
.pt-gear-radio b{font-weight:700}
.pt-gear-radio small{color:var(--slate-light);font-weight:500}
.pt-gear-sub-label{padding:6px 12px 0 13px;font-size:12.3px;font-weight:700;color:var(--slate)}
/* input de tarifa plana en línea */
.pt-gear-inline{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:13.4px;color:var(--slate)}
.pt-gear-inline input{width:62px;border:1px solid var(--line);border-radius:7px;padding:4px 7px;
  font-family:inherit;font-size:13.4px;outline:none}
.pt-gear-inline input:focus{border-color:var(--teal)}

.pt-user{display:flex;align-items:center;gap:9px}
/* dropdown de usuario (View as Admin / Customer) */
.pt-userdd{position:relative}
.pt-userdd-btn{display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;
  font-family:inherit;padding:4px 6px;border-radius:11px;transition:.13s}
.pt-userdd-btn:hover{background:var(--bg)}
.pt-userdd-caret{width:15px;height:15px;opacity:.6;transition:transform .18s;flex-shrink:0}
.pt-userdd.open .pt-userdd-caret{transform:rotate(180deg)}
.pt-userdd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 16px 38px rgba(15,27,45,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.pt-userdd.open .pt-userdd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.pt-userdd-lab{font-size:11.6px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-light);
  font-weight:700;padding:6px 11px 5px}
.pt-userdd-opt{display:flex;align-items:center;width:100%;text-align:left;border:none;background:none;
  border-radius:10px;padding:10px 13px 10px 38px;font-family:inherit;font-size:14.6px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:.12s;position:relative}
.pt-userdd-opt:hover{background:var(--bg)}
.pt-userdd-opt.on{background:var(--teal-soft);color:var(--teal-dark)}
.pt-userdd-opt::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:1.6px solid var(--line);border-radius:6px;background:#fff;transition:.12s}
.pt-userdd-opt.on::before{background:var(--teal);border-color:var(--teal)}
.pt-userdd-opt.on::after{content:"";position:absolute;left:16px;top:calc(50% - 5px);
  width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* separador entre "Ver como" y "Cerrar sesión" (solo admin) */
.pt-userdd-sep{height:1px;background:var(--line);margin:6px 4px}
/* "Cerrar sesión": opción de acción, sin la casilla de las opciones "Ver como" */
.pt-userdd-logout{padding-left:13px;gap:10px}
.pt-userdd-logout::before,.pt-userdd-logout::after{display:none;content:none}
.pt-userdd-logout svg{width:16px;height:16px;opacity:.75;flex-shrink:0}
.pt-ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:16.8px}
.pt-user-tx b{display:block;font-size:15.7px;line-height:1.2}
.pt-user-tx small{display:block;font-size:13.4px;color:var(--slate)}

/* ---------- NAVEGACIÓN HORIZONTAL (escritorio) ---------- */
.pt-nav{display:flex;align-items:center;gap:4px;margin-left:10px}
.pt-nav-group{position:relative;display:flex;align-items:center}
.pt-nav-item{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;
  font-size:15.7px;font-weight:600;color:var(--slate);transition:.15s;position:relative;cursor:pointer;white-space:nowrap}
.pt-nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.9}
.pt-nav-item:hover{background:var(--bg);color:var(--ink)}
.pt-nav-item.on{background:var(--teal-soft,rgba(20,140,130,.12));color:var(--teal-dark)}
/* caret del menú Catalog */
.pt-nav-caret{width:15px;height:15px;flex-shrink:0;transition:transform .2s;opacity:.7;margin-left:-2px}
.pt-nav-group:hover .pt-nav-caret{transform:rotate(180deg)}

/* dropdown de categorías (escritorio: aparece por hover) */
.pt-subnav{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;z-index:65;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 12px 32px rgba(15,27,45,.14);
  display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.pt-nav-group:hover .pt-subnav{opacity:1;visibility:visible;transform:translateY(0)}
.pt-subnav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
  font-size:14.6px;font-weight:500;color:var(--ink);transition:.12s;cursor:pointer;white-space:nowrap}
.pt-subnav-item:hover{background:var(--bg);color:var(--teal-dark)}
.pt-subnav-item.on{background:var(--teal-soft,rgba(20,140,130,.12));color:var(--teal-dark);font-weight:600}
.pt-subnav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--slate-light);flex-shrink:0}

/* backdrop (solo móvil con el menú abierto) */
.pt-sb-backdrop{position:fixed;inset:0;top:var(--pt-header-h);background:rgba(15,27,45,.4);z-index:50;
  opacity:0;visibility:hidden;transition:.2s}

/* ---------- MAIN (separado del header fijo) ---------- */
.pt-main{margin-top:var(--pt-header-h)}

/* ============================================================
   MÓVIL / TABLET: la nav se colapsa en un panel desplegable
   ============================================================ */
@media(max-width:900px){
  .pt-burger{display:flex}
  .pt-brand-tx small{display:none}

  /* ---------- ENCABEZADO QUE NO SE CORTA (9 ago 2026) ----------
     El problema: `.pt-brand` lleva `flex-shrink:0`, así que el bloque del
     nombre nunca cedía ancho y empujaba fuera de la pantalla al engranaje, al
     selector de idioma y al carrito — con "The Sample Store" ya no cabían.
     Se arregla por los dos lados que se pidieron:

     1. El nombre CEDE y se parte en dos renglones. `min-width:0` es lo que de
        verdad habilita el encogido dentro de un flex: sin él, el ancho mínimo
        del contenido manda por encima de cualquier `flex-shrink`.
     2. La barra se puede DESLIZAR de lado como red de seguridad — con un
        nombre muy largo, o con el engranaje que solo ve el administrador, lo
        que no entre sigue siendo alcanzable en vez de quedar cortado. */
  .pt-brand{flex-shrink:1;min-width:0}
  .pt-brand-tx{min-width:0}
  .pt-brand-tx b{
    font-size:15px;          /* 17.9 → 15: entra más texto por renglón */
    line-height:1.15;
    white-space:normal;      /* permite el segundo renglón */
    display:-webkit-box;
    -webkit-line-clamp:2;    /* nunca más de dos: el header mide 62px */
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;  /* un nombre de una sola palabra larga también parte */
  }
  /* El deslizamiento lateral va en el header y no en el `main`: `overflow-x`
     sobre un `position:fixed` no arrastra al resto de la página. Los botones
     conservan su tamaño para que sigan siendo tocables. */
  .pt-top{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .pt-top::-webkit-scrollbar{display:none}
  .pt-top-actions{flex-shrink:0}
  .pt-burger,.pt-logo,.pt-cart-btn,.pt-lang-btn,.pt-gear-wrap{flex-shrink:0}

  /* en pantallas chicas, el dropdown de usuario muestra solo el avatar+caret
     (sin el texto), para que quepa. Reducimos gaps y padding del header. */
  .pt-user-tx{display:none}
  .pt-userdd-caret{display:none}
  .pt-top{gap:8px;padding:0 12px}
  .pt-top-actions{gap:8px}
  /* la nav se convierte en panel fijo bajo el header */
  .pt-nav{position:fixed;top:var(--pt-header-h);left:0;right:0;z-index:55;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:12px;
    background:linear-gradient(180deg,var(--blue),var(--blue-dark));
    box-shadow:0 18px 36px rgba(0,0,0,.22);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.22s cubic-bezier(.4,0,.2,1)}
  body.pt-menu-open .pt-nav{transform:translateY(0);opacity:1;visibility:visible}
  body.pt-menu-open .pt-sb-backdrop{opacity:1;visibility:visible}
  .pt-nav-group{display:block}
  .pt-nav-item{color:#fff;font-size:16.8px;padding:11px 14px;border-radius:11px}
  .pt-nav-item svg{opacity:.95}
  .pt-nav-item:hover{background:rgba(255,255,255,.14);color:#fff}
  .pt-nav-item.on{background:rgba(255,255,255,.22);color:#fff}
  .pt-nav-caret{margin-left:auto}
  .pt-nav-group.expanded .pt-nav-caret{transform:rotate(180deg)}
  /* dropdown → acordeón en línea, controlado por .expanded (no hover) */
  .pt-subnav{position:static;min-width:0;background:transparent;border:0;box-shadow:none;
    padding:2px 0 6px 6px;opacity:1;visibility:hidden;transform:none;height:0;overflow:hidden;transition:.18s}
  .pt-nav-group.expanded .pt-subnav{visibility:visible;height:auto;overflow:visible}
  .pt-nav-group:hover .pt-subnav{opacity:1}  /* anula el hover de escritorio */
  .pt-subnav-item{color:rgba(255,255,255,.9);padding:8px 14px 8px 22px}
  .pt-subnav-item:hover{background:rgba(255,255,255,.13);color:#fff}
  .pt-subnav-item.on{background:rgba(255,255,255,.2);color:#fff}
  .pt-subnav-item .dot{background:rgba(255,255,255,.6)}
}

/* ---------- WRAP ---------- */
.pt-wrap{max-width:1200px;margin:0 auto;padding:26px 30px 60px}
.pt-page-head{margin-bottom:22px}
.pt-page-head h2{font-size:26.9px;letter-spacing:-.4px}
.pt-page-head p{color:var(--slate);font-size:15.7px;margin-top:4px}

/* ---------- HERO (catálogo) — AZUL de marca ---------- */
.pt-hero{background:linear-gradient(120deg,var(--blue-dark),var(--blue));border-radius:var(--radius);
  color:#fff;padding:34px 36px;margin-bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pt-hero h1{font-size:30.2px;letter-spacing:-.5px;margin-bottom:7px}
.pt-hero p{font-size:16.2px;opacity:.92;max-width:520px;line-height:1.5}
.pt-hero .pt-hero-stat{text-align:center}
.pt-hero .pt-hero-stat b{display:block;font-size:33.6px;font-weight:700;line-height:1}
.pt-hero .pt-hero-stat span{font-size:13.4px;opacity:.9;letter-spacing:.04em;text-transform:uppercase}
/* indicador discreto de la lista de precios del cliente */
.pt-hero-pricing{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.16);color:#fff;padding:6px 12px;border-radius:20px}
.pt-hero-pricing svg{width:15px;height:15px;opacity:.9}

/* ---------- TOOLBAR (búsqueda + filtros) ---------- */
/* PEGAJOSA: el buscador queda fijo bajo el header al desplazar el catálogo,
   para que el cliente siempre lo tenga a mano. */
.pt-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;
  position:sticky;top:var(--pt-header-h);z-index:40;
  background:var(--bg);padding:12px 0;
  /* sangra los lados para tapar el contenido que pasa por detrás dentro del wrap */
  margin-left:-30px;margin-right:-30px;padding-left:30px;padding-right:30px;
  border-bottom:1px solid transparent;transition:border-color .15s,box-shadow .15s}
.pt-toolbar.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 14px rgba(15,27,45,.05)}
@media(max-width:720px){
  .pt-toolbar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}
.pt-search{flex:1;min-width:220px;position:relative}
.pt-search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:12px 14px 12px 42px;font-size:15.7px;font-family:inherit;outline:none}
.pt-search input:focus{border-color:var(--teal)}
.pt-search input{padding-right:42px}
.pt-search svg{position:absolute;left:14px;top:12px;width:18px;height:18px;stroke:var(--slate-light)}
/* X para borrar lo escrito (aparece solo cuando hay texto) */
.pt-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border:none;background:transparent;border-radius:50%;cursor:pointer;display:none;align-items:center;
  justify-content:center;color:var(--slate-light);padding:0}
.pt-search-clear:hover{background:var(--bg);color:var(--ink)}
.pt-search-clear svg{position:static;width:15px;height:15px;stroke:currentColor}
.pt-search.has-text .pt-search-clear{display:flex}
/* toggle de vista lista/grilla (frente al buscador) */
.pt-viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;flex-shrink:0}
.pt-viewtoggle button{width:42px;height:44px;border:none;background:#fff;cursor:pointer;display:flex;
  align-items:center;justify-content:center;color:var(--slate);transition:.15s}
.pt-viewtoggle button + button{border-left:1px solid var(--line)}
.pt-viewtoggle button:hover{background:var(--bg);color:var(--ink)}
.pt-viewtoggle button.on{background:var(--teal-soft);color:var(--teal-dark)}
.pt-viewtoggle svg{width:18px;height:18px}

/* selector de ordenamiento: DROPDOWN custom (estilo limpio con check) */
.pt-sortdd{position:relative;display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.pt-sortdd-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 12px;
  border:1px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:14.6px;font-weight:600;color:var(--ink);transition:.13s}
.pt-sortdd-btn:hover{border-color:var(--teal)}
.pt-sortdd.open .pt-sortdd-btn{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-soft)}
.pt-sort-ic{width:17px;height:17px;stroke:var(--slate-light);flex-shrink:0}
.pt-sortdd.open .pt-sort-ic{stroke:var(--teal-dark)}
.pt-sortdd-caret{width:16px;height:16px;opacity:.7;transition:transform .18s}
.pt-sortdd.open .pt-sortdd-caret{transform:rotate(180deg)}
/* panel de opciones */
.pt-sortdd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 16px 38px rgba(15,27,45,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.pt-sortdd.open .pt-sortdd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.pt-sortdd-opt{display:flex;align-items:center;width:100%;text-align:left;border:none;background:none;
  border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14.6px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:.12s;position:relative;padding-left:38px}
.pt-sortdd-opt:hover{background:var(--bg)}
.pt-sortdd-opt.on{background:var(--teal-soft);color:var(--teal-dark)}
/* check verde de la opción activa (estilo imagen 1) */
.pt-sortdd-opt::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:1.6px solid var(--line);border-radius:6px;background:#fff;transition:.12s}
.pt-sortdd-opt.on::before{background:var(--teal);border-color:var(--teal)}
.pt-sortdd-opt.on::after{content:"";position:absolute;left:16px;top:calc(50% - 5px);
  width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* botón de dirección */
.pt-sort-dir{width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--slate);transition:.13s;flex-shrink:0}
.pt-sort-dir:hover{border-color:var(--teal);color:var(--teal-dark)}
.pt-sort-dir svg{width:18px;height:18px;transition:transform .18s}
/* base del icono = ascendente (flecha hacia ARRIBA). En descendente se voltea. */
.pt-sort-dir.desc svg{transform:scaleY(-1)}

.pt-chips{display:flex;gap:8px;flex-wrap:wrap}
.pt-chip{padding:8px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;
  font-size:14.6px;font-weight:600;color:var(--slate);cursor:pointer;transition:.15s;font-family:inherit}
.pt-chip:hover{border-color:var(--teal);color:var(--teal-dark)}
.pt-chip.on{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---------- CATÁLOGO EN TABLA (estilo CRM) ---------- */
.pt-cat-panel{margin-bottom:20px;overflow:hidden}
.pt-cat-table thead th:first-child{width:96px}
/* COLOR SUTIL: encabezado tintado, filas alternas (zebra) y hover suave,
   para que la tabla no se vea plana en blanco. Solo afecta la del catálogo. */
.pt-cat-table thead th{background:var(--teal-soft);color:var(--teal-dark);
  border-bottom:1px solid #cfeae6}
.pt-cat-table tbody tr:nth-child(odd){background:#fbfdfd}
.pt-cat-table tbody tr:nth-child(even){background:#f4f9f8}
.pt-cat-table tbody tr:hover{background:#e9f6f4}
.pt-cat-table tbody td{border-bottom:1px solid #eef3f2}
.pt-cat-table td .pt-thumb{width:78px;height:78px;padding:6px}
.pt-cat-table tbody td{padding-top:10px;padding-bottom:10px}
.pt-cat-price b{font-size:15.7px}
.pt-cat-price .pt-price-was{font-weight:600}
.pt-cat-out{font-size:13px;color:var(--red);font-weight:600}
.pt-cat-add{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.pt-qty-sm button{width:28px;height:30px;font-size:15.7px}
.pt-qty-sm input{width:38px;height:30px;font-size:14px}
.pt-cat-addbtn{white-space:nowrap}

/* ---------- CATÁLOGO EN TABLA · móvil (≤640px): tarjeta tipo producto ----------
   Reemplaza el modo "tarjeta genérico" de tablas SOLO para la tabla del
   catálogo, con un layout limpio: imagen izq · info der · precio+controles abajo. */
@media(max-width:640px){
  /* ocultamos el thead; cada fila se vuelve una tarjeta */
  .pt-cat-table thead{display:none}
  .pt-cat-table, .pt-cat-table tbody{display:block;width:100%}
  .pt-cat-table tbody tr{
    display:grid;
    grid-template-columns:84px 1fr;
    grid-template-areas:
      "img  name"
      "img  cat"
      "img  unit"
      "price price"
      "add  add";
    column-gap:14px;row-gap:3px;align-items:start;
    border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;
  }
  .pt-cat-table tbody td{display:block;border:none;padding:0;text-align:left}
  .pt-cat-table tbody td::before{content:""!important;display:none!important}
  /* col imagen (ocupa las filas de info) */
  .pt-cat-table tbody td:nth-child(1){grid-area:img;align-self:center}
  .pt-cat-table tbody td:nth-child(1) .pt-thumb{width:84px;height:84px}
  /* nombre + sku */
  .pt-cat-table tbody td:nth-child(2){grid-area:name}
  .pt-cat-table tbody td:nth-child(2) .nm{font-size:15.7px;line-height:1.3}
  /* descripción: OCULTA en móvil (la tarjeta queda más limpia) */
  .pt-cat-table tbody td.pt-cat-desc{display:none!important}
  /* categoría y unidad: cada una en SU propia fila (sin cruces) */
  .pt-cat-table tbody td:nth-child(4){grid-area:cat;font-size:12.5px;color:var(--slate)}
  .pt-cat-table tbody td:nth-child(4)::before{content:"Category: "!important;display:inline!important;color:var(--slate-light);font-weight:600}
  .pt-cat-table tbody td:nth-child(5){grid-area:unit;font-size:12.5px;color:var(--slate)}
  .pt-cat-table tbody td:nth-child(5)::before{content:"Unit: "!important;display:inline!important;color:var(--slate-light);font-weight:600}
  /* precio: fila propia con separador */
  .pt-cat-table tbody td.pt-cat-price{grid-area:price;text-align:left;border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
  .pt-cat-table tbody td.pt-cat-price b{font-size:18px}
  /* acción (qty + add): fila propia a lo ancho */
  .pt-cat-table tbody td.pt-actions-cell{grid-area:add;margin-top:6px}
  .pt-cat-table .pt-cat-add{justify-content:space-between;gap:12px}
  .pt-cat-table .pt-cat-addbtn{flex:1;text-align:center;padding:10px 14px}
  .pt-qty-sm button{width:34px;height:34px}
  .pt-qty-sm input{width:44px;height:34px}
}

/* ---------- ENCABEZADO DE SECCIÓN (Featured / categoría) ---------- */
.pt-section-head{display:flex;align-items:baseline;gap:12px;margin:6px 0 14px;flex-wrap:wrap}
.pt-section-head h3{font-size:19px;letter-spacing:-.3px}
.pt-section-note{font-size:13px;color:var(--slate-light)}

/* ---------- GRID DE PRODUCTOS ---------- */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.pt-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.15s}

/* ---------- VISTA LISTA (una columna, tarjeta horizontal) ---------- */
.pt-grid.list{grid-template-columns:1fr;gap:12px}
.pt-grid.list .pt-card{flex-direction:row;align-items:stretch}
.pt-grid.list .pt-pres,
.pt-grid.list .pt-card-img{flex:0 0 180px;max-width:180px}
.pt-grid.list .pt-pres-slide,
.pt-grid.list .pt-card-img{aspect-ratio:1/1;border-bottom:none;border-right:1px solid var(--line)}
.pt-grid.list .pt-card-body{flex:1;justify-content:center}
@media(max-width:560px){
  .pt-grid.list .pt-pres,
  .pt-grid.list .pt-card-img{flex-basis:120px;max-width:120px}
}
.pt-card:hover{border-color:var(--teal)}
.pt-card-img{aspect-ratio:4/3;background:#fafcfc;display:flex;align-items:center;justify-content:center;padding:12px;position:relative;border-bottom:1px solid var(--line)}
.pt-card-img img{width:100%;height:100%;object-fit:contain}

/* ---------- CARRUSEL DE PRESENTACIONES (varias por producto) ----------
   Cada slide = una presentación (un registro/SKU físico independiente).
   Se desliza con el dedo (scroll-snap táctil) o con las flechas. */
.pt-pres{position:relative}
.pt-pres-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.pt-pres-track::-webkit-scrollbar{display:none}
.pt-pres-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;background:#fafcfc;
  display:flex;align-items:center;justify-content:center;padding:12px;position:relative;border-bottom:1px solid var(--line)}
.pt-pres-slide img{width:100%;height:100%;object-fit:contain}
/* flechas (se ocultan en los extremos vía JS con .at-start/.at-end) */
.pt-pres-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--ink);z-index:3;transition:.15s;padding:0}
.pt-pres-arrow:hover{background:#fff;border-color:var(--blue);color:var(--blue)}
.pt-pres-arrow.prev{left:8px}
.pt-pres-arrow.next{right:8px}
.pt-pres-arrow svg{width:16px;height:16px}
.pt-pres.at-start .pt-pres-arrow.prev,
.pt-pres.at-end .pt-pres-arrow.next{opacity:0;pointer-events:none}
/* puntos indicadores de presentación */
.pt-pres-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:5px;justify-content:center;z-index:3}
.pt-pres-dots i{width:6px;height:6px;border-radius:50%;background:var(--slate-light);opacity:.45;transition:.15s}
.pt-pres-dots i.on{opacity:1;background:var(--blue);width:16px;border-radius:4px}
/* etiqueta de la presentación actual (Caja 24, Six-pack, Unidad…) */
.pt-pres-label{font-size:12.9px;font-weight:700;color:var(--blue-dark);background:var(--blue-soft);
  display:inline-block;padding:3px 9px;border-radius:20px;align-self:flex-start}

/* ---------- BADGE: cantidad en carrito (por presentación) ----------
   Esquina superior IZQUIERDA de la imagen, con icono de carrito.
   Es independiente por presentación (cada SKU lleva su propia cuenta). */
.pt-qty-badge{position:absolute;top:10px;left:10px;z-index:4;display:none;align-items:center;gap:5px;
  background:var(--blue);color:#fff;font-size:12.9px;font-weight:700;padding:4px 9px 4px 7px;border-radius:20px;
  box-shadow:0 1px 4px rgba(0,0,0,.18)}
.pt-qty-badge.show{display:inline-flex}
.pt-qty-badge svg{width:14px;height:14px;stroke:#fff}
.pt-tag{position:absolute;top:10px;right:10px;font-size:11.2px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:4px 9px;border-radius:20px;z-index:4}
.pt-tag.sale{background:var(--amber);color:#fff}
.pt-tag.out{background:var(--red);color:#fff}
.pt-tag.back{background:#9a6700;color:#fff}
/* pista "tocar la foto = más info": botón circular abajo-derecha de la imagen */
.pt-info-hint{position:absolute;bottom:10px;right:10px;z-index:4;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);
  color:var(--teal-dark);box-shadow:0 1px 5px rgba(15,27,45,.18);pointer-events:none;transition:.15s}
.pt-info-hint svg{width:16px;height:16px}
.pt-pres-slide:hover .pt-info-hint{background:var(--teal);color:#fff;transform:scale(1.08)}
.pt-card-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pt-card-cat{font-size:12.3px;font-weight:700;color:var(--teal-dark);letter-spacing:.03em;text-transform:uppercase}
.pt-card-name{font-size:15.7px;font-weight:600;line-height:1.35;flex:1}
.pt-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pt-sku{font-family:ui-monospace,monospace;font-size:12.3px;color:var(--slate);background:#f1f5f8;padding:3px 8px;border-radius:6px;font-weight:600}
.pt-price{font-size:19px;font-weight:700}
.pt-price small{font-size:12.3px;color:var(--slate);font-weight:600;margin-left:3px}
/* precio de lista tachado cuando hay descuento individual */
.pt-price-was{font-size:14px;color:var(--slate-light);font-weight:600;text-decoration:line-through;margin-right:2px}
.pt-add{margin-top:4px;width:100%;border:none;border-radius:11px;padding:11px;font-family:inherit;
  font-weight:700;font-size:15.1px;cursor:pointer;background:var(--teal);color:#fff;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:7px}
.pt-add:hover{background:var(--teal-dark)}
.pt-add:disabled{background:#e9eef2;color:var(--slate-light);cursor:not-allowed}
.pt-add svg{width:16px;height:16px}
/* BACK ORDER: botones en amarillo dorado (color de la muestra) */
.pt-add.back{background:#f0c850;color:#5c4708}
.pt-add.back:hover{background:#e6ba35}
.pt-cat-addbtn.back{background:#f0c850;border-color:#f0c850;color:#5c4708}
.pt-cat-addbtn.back:hover{background:#e6ba35;border-color:#e6ba35}
.pt-btn.primary.back{background:#f0c850;color:#5c4708}
.pt-btn.primary.back:hover{background:#e6ba35}
.pt-empty{text-align:center;color:var(--slate);padding:60px 20px;font-size:15.7px}

/* ---------- PANELES / TABLAS (cart, billing, account) ---------- */
.pt-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.pt-panel-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.pt-panel-head h3{font-size:16.8px;font-weight:700}
.pt-panel-head .sub{font-size:14px;color:var(--slate);font-weight:500;margin-top:2px}
.pt-table{width:100%;border-collapse:collapse}
.pt-table th{font-size:12.3px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);font-weight:700;
  text-align:right;padding:11px 16px;border-bottom:1px solid var(--line);background:#fafcfc}
.pt-table th:first-child{text-align:left}
.pt-table td{padding:13px 16px;font-size:15.1px;text-align:right;border-bottom:1px solid var(--line)}
.pt-table td:first-child{text-align:left}
.pt-table tbody tr:last-child td{border-bottom:none}
.pt-table tbody tr:hover{background:#fafcfc}
/* filas clicables (My orders): hover más marcado + cursor */
.pt-table tbody tr.ordrow{cursor:pointer}
.pt-table tbody tr.ordrow:hover{background:var(--teal-soft)}
.pt-table tbody tr.ordrow:hover .pt-num{color:var(--teal-dark)}
.pt-num{font-weight:600}
.pt-money{font-weight:700}
.pt-money.pos{color:var(--green)}
.pt-money.neg{color:var(--red)}

/* qty stepper */
.pt-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pt-qty button{width:30px;height:32px;border:none;background:#fff;cursor:pointer;font-size:17.9px;color:var(--ink);font-family:inherit}
.pt-qty button:hover{background:var(--bg)}
.pt-qty input{width:42px;height:32px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:inherit;font-size:15.1px;font-weight:600;outline:none}
.pt-link-x{background:none;border:none;color:var(--red);cursor:pointer;font-size:14.6px;font-weight:600;font-family:inherit}
.pt-thumb{width:46px;height:46px;border-radius:9px;border:1px solid var(--line);background:#fafcfc;padding:5px;object-fit:contain;flex-shrink:0}
.pt-cell-prod{display:flex;align-items:center;gap:12px}
.pt-cell-prod .nm{font-weight:600;font-size:15.1px}
.pt-cell-prod .sk{font-family:ui-monospace,monospace;font-size:12.3px;color:var(--slate)}

/* status pills */
.pt-pill{display:inline-block;font-size:12.3px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.02em}
.pt-pill.paid{background:var(--green-soft);color:var(--green)}
.pt-pill.unpaid{background:var(--teal-soft);color:var(--teal-dark)}
.pt-pill.partial{background:var(--amber-soft);color:var(--amber)}
.pt-pill.overdue{background:var(--red-soft);color:var(--red)}
/* surtido por línea (tras revisión): despachado / back order / no surtido */
.pt-fl-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.pt-fl{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.01em}
.pt-fl.ok{background:var(--green-soft);color:var(--green)}
.pt-fl.bo{background:var(--amber-soft);color:#b45309}
.pt-fl.disc{background:#eef2f5;color:var(--slate)}
/* banner de back order del pedido (en el detalle) */
.pt-bo-banner{background:var(--amber-soft);border:1px solid #f0c850;border-radius:11px;
  padding:11px 14px;margin:12px 0 4px;font-size:13px;color:#5c4708;line-height:1.45}
.pt-bo-banner b{font-weight:800}
/* ---- bloque "Ajustado por Harvest & Co." (lo pedido vs lo ajustado) ---- */
.pt-adj{margin-top:16px;border:1px solid var(--teal);background:var(--teal-soft);border-radius:13px;padding:14px 15px}
.pt-adj-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--teal-dark)}
.pt-adj-head svg{width:16px;height:16px;flex-shrink:0}
.pt-adj-sub{font-size:12px;color:var(--slate);margin:6px 0 12px;line-height:1.45}
.pt-adj-kv{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.pt-adj-kv .pt-money{font-weight:800;color:var(--teal-dark)}
.pt-adj-changes{margin:10px 0 6px;border-top:1px dashed #9fd9d3;padding-top:10px;display:flex;flex-direction:column;gap:7px}
.pt-adj-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pt-adj-nm{font-size:12.5px;font-weight:600;color:var(--ink)}
.pt-adj-note{font-size:12px;font-weight:700;color:var(--teal-dark);margin-top:8px}
/* nota de revisión del CRM al cliente */
.pt-note{margin-top:16px;border:1px solid #cfe3ff;background:#eef5ff;border-radius:13px;padding:13px 15px}
.pt-note-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#1f5fbf}
.pt-note-h svg{width:16px;height:16px;flex-shrink:0}
.pt-note-b{font-size:13px;color:var(--ink);line-height:1.5;margin-top:7px;white-space:pre-wrap}
/* badge "Updated": el CRM cambió el estado de este pedido */
.pt-pill-updated{display:inline-block;font-size:10.6px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:6px;background:var(--teal);color:#fff;margin-left:6px;vertical-align:1px;
  animation:ptUpdGlow 1.6s ease-in-out infinite}
@keyframes ptUpdGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,179,166,0)}50%{box-shadow:0 0 0 3px rgba(16,179,166,.18)}}
/* banner de aviso de actualización (arriba de la lista) */
.pt-update-banner{display:flex;align-items:center;gap:12px;background:var(--teal-soft);border:1px solid var(--teal);
  border-radius:13px;padding:13px 16px;margin-bottom:18px}
.pt-update-ic{width:34px;height:34px;border-radius:9px;background:var(--teal);color:#fff;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.pt-update-ic svg{width:18px;height:18px}
.pt-update-tx{flex:1;font-size:14px;color:var(--teal-dark);line-height:1.45}
.pt-update-tx b{font-weight:800}
.pt-update-x{width:30px;height:30px;border:none;background:transparent;color:var(--teal-dark);cursor:pointer;
  border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-update-x:hover{background:rgba(12,140,130,.12)}
.pt-update-x svg{width:16px;height:16px}

/* ---------- KPI / summary cards ---------- */
.pt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
/* tarjeta compacta: etiqueta y número en la MISMA línea */
.pt-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
/* tarjeta clicable (filtro) */
.pt-kpi-click{cursor:pointer;transition:border-color .13s,box-shadow .13s,background .13s}
.pt-kpi-click:hover{border-color:var(--teal);box-shadow:0 4px 14px rgba(15,27,45,.08)}
.pt-kpi-click.on{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 0 0 1px var(--teal) inset}
.pt-kpi-click.on .l{color:var(--teal-dark)}

/* título + engranaje EN LÍNEA (como en el CRM) */
.pt-title-row{display:flex;align-items:center;gap:10px}
/* engranaje selector de tarjetas */
.pt-kpicfg{position:relative;flex-shrink:0}
.pt-kpicfg-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--slate);transition:.13s}
.pt-kpicfg-btn:hover{border-color:var(--teal);color:var(--teal-dark)}
.pt-kpicfg-btn svg{width:17px;height:17px}
.pt-kpicfg.open .pt-kpicfg-btn{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-soft)}
.pt-kpicfg-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 16px 38px rgba(15,27,45,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.pt-kpicfg.open .pt-kpicfg-menu{opacity:1;visibility:visible;transform:translateY(0)}
.pt-kpicfg-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:9px;
  font-size:14.6px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
.pt-kpicfg-opt:hover{background:var(--bg)}
/* totalizador */
.pt-table tfoot .pt-tfoot td{border-top:2px solid var(--line);font-weight:700;color:var(--ink);
  background:var(--bg);font-size:15.1px;padding-top:13px;padding-bottom:13px}
.pt-kpi .l{font-size:13.4px;color:var(--slate);font-weight:600;margin-bottom:0;display:flex;align-items:center;gap:6px}
/* icono de filtro en tarjetas filtrables (como el CRM) */
.pt-kpi-filter{width:13px;height:13px;flex-shrink:0;opacity:.5;transition:.13s}
.pt-kpi-click:hover .pt-kpi-filter{opacity:.9;stroke:var(--teal-dark)}
.pt-kpi-click.on .pt-kpi-filter{opacity:1;stroke:var(--teal-dark);fill:var(--teal-dark)}
.pt-kpi .v{font-size:21px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.pt-kpi .v.green{color:var(--green)}
.pt-kpi .v.red{color:var(--red)}
.pt-kpi .v.teal{color:var(--teal-dark)}

/* aging bars */
.pt-aging{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px}
.pt-aging-cell{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 15px;text-align:center}
.pt-aging-cell .lab{font-size:12.3px;color:var(--slate);font-weight:600;margin-bottom:6px}
.pt-aging-cell .amt{font-size:20.2px;font-weight:700}
.pt-aging-cell.cur .amt{color:var(--teal-dark)}
.pt-aging-cell.due .amt{color:var(--red)}
.pt-aging-cell .bar{height:4px;border-radius:3px;background:var(--line);margin-top:9px;overflow:hidden}
.pt-aging-cell .bar i{display:block;height:100%;background:var(--teal)}
.pt-aging-cell.due .bar i{background:var(--red)}

/* ---------- ORDER SUMMARY (cart) ---------- */
.pt-cart-layout{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
.pt-btn.pt-btn-inline{white-space:nowrap}
/* botón Columns: mismo look y ALTURA que el selector de fechas (.pt-dr-btn) */
.pt-cols-btn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  border:1px solid var(--line);background:#fff;border-radius:11px;
  padding:10px 14px;font-size:14.6px;font-weight:600;font-family:inherit;color:var(--ink);
  cursor:pointer;white-space:nowrap;transition:.15s}
.pt-cols-btn:hover{border-color:var(--teal);color:var(--teal-dark)}
.pt-cols-btn svg{width:16px;height:16px;flex-shrink:0}
/* panel "Columns" (modal centrado, reusa overlay .pt-modal-ov) */
.pt-colsbox{width:430px;max-width:92vw;max-height:84vh;background:#fff;border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;transform:translateY(8px);transition:.2s}
.pt-modal-ov.open .pt-colsbox{transform:translateY(0)}
.pt-colsbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.pt-colsbox-head h3{font-size:18.5px;letter-spacing:-.3px}
.pt-colsbox-head p{font-size:13px;color:var(--slate);margin-top:4px;line-height:1.4}
.pt-colslist{padding:12px 16px;overflow-y:auto;flex:1}
.pt-colrow{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;cursor:grab}
.pt-colrow:last-child{margin-bottom:0}
.pt-colrow.dragging{opacity:.55;border-color:var(--teal)}
.pt-coldrag{color:var(--slate-light);display:flex;flex-shrink:0}
.pt-coldrag svg{width:18px;height:18px}
.pt-colname{flex:1;font-size:15.1px;font-weight:600;color:var(--ink)}
.pt-colsbox-foot{display:flex;gap:10px;justify-content:space-between;padding:14px 22px;border-top:1px solid var(--line)}

/* botón eliminar como icono de caneca (ahorra ancho de columna) */
.pt-rm-btn{width:34px;height:34px;border:none;background:transparent;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--slate-light);transition:.13s}
.pt-rm-btn:hover{background:#fdecea;color:#c0392b}
.pt-rm-btn svg{width:18px;height:18px}
.pt-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:90px}
.pt-summary h3{font-size:16.8px;margin-bottom:16px}
.pt-summary .row{display:flex;justify-content:space-between;font-size:15.7px;margin-bottom:11px;color:var(--slate)}
.pt-summary .row.total{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:20.2px;font-weight:700;color:var(--ink)}
.pt-btn{width:100%;border:none;border-radius:12px;padding:13px;font-family:inherit;font-weight:700;font-size:15.7px;cursor:pointer;transition:.15s}
.pt-btn.primary{background:var(--teal);color:#fff;margin-top:8px}
.pt-btn.primary:hover{background:var(--teal-dark)}
.pt-btn.ghost{background:#fff;color:var(--teal-dark);border:1px solid var(--teal);margin-top:10px}
.pt-btn.ghost:hover{background:var(--teal-soft)}
.pt-btn.link{background:transparent;color:var(--slate);margin-top:10px;font-weight:600}
.pt-btn.link:hover{color:var(--teal-dark);background:var(--bg)}
.pt-btn:disabled{background:#e9eef2;color:var(--slate-light);cursor:not-allowed;border-color:var(--line)}
/* botón inline (no a lo ancho). DESPUÉS de .pt-btn y con !important para que
   .pt-btn{width:100%} no lo vuelva a estirar (pasó dos veces por orden de cascada). */
.pt-btn.pt-btn-inline{width:auto!important;padding:10px 18px;margin:0;
  display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none}

/* row action buttons */
.pt-rowbtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 12px;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--teal-dark);cursor:pointer;transition:.15s}
.pt-rowbtn:hover{border-color:var(--teal);background:var(--teal-soft)}

/* ---------- ACCOUNT ---------- */
.pt-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;grid-auto-flow:dense}
.pt-info{padding:16px 20px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:0}
.pt-info .l{font-size:12.3px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);font-weight:700;margin-bottom:5px}
.pt-info .v{font-size:15.7px;font-weight:600;overflow-wrap:anywhere;word-break:break-word}
/* Celda ancha para valores largos (correo): ocupa 2 columnas cuando hay espacio;
   en 1 sola columna (móvil) el navegador la limita a 1 y el texto quiebra. */
.pt-info--wide{grid-column:span 2}
.pt-addr{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pt-addr:last-child{border-bottom:none}
.pt-addr .lab{font-size:14.6px;font-weight:700;margin-bottom:3px}
.pt-addr .lab .pt-pill{margin-left:8px}
.pt-addr .ln{font-size:14.6px;color:var(--slate)}

/* ---------- FORMULARIO DE PERFIL (account, Fase 4) ---------- */
.pt-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px;padding:18px 20px}
.pt-form-grid .pt-field{margin-bottom:0}
.pt-form-grid input.pt-ro{background:#f4f7f9;color:var(--slate);cursor:not-allowed}
.pt-form-actions{display:flex;gap:10px;justify-content:flex-end;padding:0 20px 18px}
.pt-form-actions .pt-btn{width:auto;padding:11px 20px}

/* toast de confirmación */
.pt-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);background:var(--teal-dark);
  color:#fff;font-size:15.1px;font-weight:600;padding:12px 20px;border-radius:12px;opacity:0;visibility:hidden;
  transition:opacity .25s,transform .25s,visibility .25s;z-index:300}
.pt-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---------- SELECTOR DE RANGO DE FECHAS (formato CRM: dropdown) ---------- */
.pt-daterange{margin-bottom:16px}
.pt-dr{position:relative;display:inline-block}
.pt-dr-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:11px;
  padding:10px 14px;font-size:14.6px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer;white-space:nowrap;transition:.15s}
.pt-dr-btn:hover{border-color:var(--slate-light)}
.pt-dr.open .pt-dr-btn{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-soft)}
.pt-dr-btn>svg{width:16px;height:16px;flex-shrink:0}
.pt-dr-caret{width:15px;height:15px;transition:transform .2s;stroke:var(--slate)}
.pt-dr.open .pt-dr-caret{transform:rotate(180deg)}
.pt-dr-lab{min-width:70px;text-align:left}
/* el menú se posiciona con position:fixed vía JS (placeMenu) para escapar el
   overflow:hidden del panel y no empujar el layout. z-index alto. */
.pt-dr-menu{position:fixed;width:300px;background:#fff;border:1px solid var(--line);
  border-radius:13px;box-shadow:0 14px 38px rgba(15,27,45,.22);padding:6px;z-index:300;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.pt-dr.open .pt-dr-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* lista de presets (visible por defecto); el calendario oculto */
.pt-dr-list{max-height:340px;overflow-y:auto}
.pt-dr.cal .pt-dr-list{display:none}
.pt-dr-cal{display:none}
.pt-dr.cal .pt-dr-cal{display:block}
.pt-dr-opt{display:block;width:100%;text-align:left;border:none;background:none;border-radius:9px;
  padding:10px 12px;font-size:14.6px;font-weight:500;font-family:inherit;color:var(--ink);cursor:pointer;transition:.1s}
.pt-dr-opt:hover{background:var(--bg)}
.pt-dr-opt.sel{background:var(--teal-soft);color:var(--teal-dark);font-weight:700}
.pt-dr-sep{height:1px;background:var(--line);margin:5px 4px}

/* ---------- CALENDARIO de rango (estilo CRM) ---------- */
.pt-cal-top{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px}
.pt-cal-title{font-size:15.1px;font-weight:700}
.pt-cal-nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:18px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center}
.pt-cal-nav:hover{background:var(--bg)}
.pt-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.pt-cal-dow span{text-align:center;font-size:12px;font-weight:700;color:var(--slate-light);padding:4px 0}
.pt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pt-cal-cell{border:none;background:none;font-family:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;
  height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:.1s}
.pt-cal-cell.empty{cursor:default}
.pt-cal-cell:not(.empty):hover{background:var(--teal-soft)}
.pt-cal-cell.inrange{background:var(--teal-soft);border-radius:0}
.pt-cal-cell.pick{background:var(--teal);color:#fff;font-weight:700}
.pt-cal-hint{text-align:center;font-size:12.5px;color:var(--slate);padding:10px 0 8px}
.pt-cal-foot{display:flex;gap:8px;padding:4px}
.pt-cal-foot button{flex:1;border-radius:9px;padding:10px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.pt-cal-back{border:1px solid var(--line);background:#fff;color:var(--ink)}
.pt-cal-back:hover{background:var(--bg)}
.pt-cal-apply{border:none;background:var(--teal);color:#fff}
.pt-cal-apply:hover{background:var(--teal-dark)}
.pt-cal-apply:disabled{opacity:.5;cursor:default}

/* toolbar en una fila: buscador a la izq, selector de fechas a la der.
   IMPORTANTE: el elemento usa AMBAS clases (.pt-report-toolbar .pt-toolbar-row);
   como .pt-report-toolbar define flex-direction:column y está MÁS ABAJO en el
   archivo, ganaba el column y la toolbar salía en 2 líneas centradas. Forzamos
   la fila con !important para que .pt-toolbar-row siempre mande. */
.pt-toolbar-row{display:flex!important;flex-direction:row!important;align-items:center;gap:14px;flex-wrap:nowrap}
.pt-toolbar-row .pt-report-search{flex:1 1 auto;min-width:0;max-width:none;margin:0}
.pt-toolbar-row .pt-daterange{margin:0;flex:0 0 auto}
/* variante "left": buscador y fecha JUNTOS a la izquierda (no separados a los extremos) */
.pt-toolbar-left{justify-content:flex-start}
.pt-toolbar-left .pt-report-search{flex:0 1 360px}
@media(max-width:560px){
  .pt-toolbar-row{flex-wrap:wrap}
  .pt-toolbar-left .pt-report-search{flex:1 1 100%}
  .pt-toolbar-row .pt-daterange .pt-dr-btn{width:100%}
}

/* ---------- PESTAÑAS (tabs) ---------- */
.pt-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 8px;margin-bottom:0}
.pt-tab{border:none;background:none;font-family:inherit;font-size:15.1px;font-weight:600;color:var(--slate);
  cursor:pointer;padding:13px 18px;position:relative;transition:.15s}
.pt-tab:hover{color:var(--ink)}
.pt-tab.on{color:var(--teal-dark)}
.pt-tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--teal)}
.pt-tab .pt-tab-count{margin-left:7px;font-size:12.3px;font-weight:700;background:var(--bg);color:var(--slate);padding:1px 8px;border-radius:20px}
.pt-tab.on .pt-tab-count{background:var(--teal-soft);color:var(--teal-dark)}

/* ---------- TOOLBAR de reporte (buscador + rango + filtro) ---------- */
.pt-report-toolbar{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.pt-report-search{position:relative;max-width:360px}
.pt-report-search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:11px 14px 11px 40px;font-size:15.7px;font-family:inherit;outline:none}
.pt-report-search input:focus{border-color:var(--teal)}
.pt-report-search input{padding-right:40px}
.pt-report-search svg{position:absolute;left:13px;top:11px;width:18px;height:18px;stroke:var(--slate-light)}
/* X para borrar (aparece solo con texto) */
.pt-report-search .pt-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:none;background:transparent;border-radius:50%;cursor:pointer;display:none;
  align-items:center;justify-content:center;color:var(--slate-light);padding:0}
.pt-report-search .pt-search-clear:hover{background:var(--bg);color:var(--ink)}
.pt-report-search .pt-search-clear svg{position:static;width:15px;height:15px;stroke:currentColor}
.pt-report-search.has-text .pt-search-clear{display:flex}
.pt-report-meta{font-size:14px;color:var(--slate);font-weight:500}

/* color sutil a la tabla de documentos (My orders) */
#ordTable thead th{background:var(--teal-soft);color:var(--teal-dark);border-bottom:1px solid #cfeae6}
/* encabezados clicables (ordenar) con indicador de flecha */
.pt-th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.pt-th-sort:hover{background:#d8f0ec}
.pt-th-sort.on{background:#cdece8}
.pt-sort-ind{display:inline-flex;vertical-align:middle;margin-left:5px}
.pt-sort-ind svg{width:13px;height:13px}
.pt-sort-ind.dim{opacity:.35}
/* en columnas alineadas a la derecha (Total), el indicador queda pegado al texto */
#ordTable thead th.pt-money{ text-align:right }
#ordTable tbody tr:nth-child(odd){background:#fbfdfd}
#ordTable tbody tr:nth-child(even){background:#f4f9f8}
#ordTable tbody td{border-bottom:1px solid #eef3f2}

/* ---------- BILLING: filtro, upcoming, acciones (Fase 5) ---------- */
.pt-filterbar{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px 4px}
.pt-table-wrap{overflow-x:auto}
.pt-actions-cell{white-space:nowrap}
.pt-actions-cell .pt-rowbtn{padding:6px 11px;font-size:13.4px}
.invrow{cursor:pointer}
.pt-upcoming{display:flex;align-items:center;gap:10px;border-radius:13px;padding:12px 16px;margin-bottom:20px;font-size:15.1px;font-weight:600}
.pt-upcoming svg{width:18px;height:18px;flex-shrink:0}
.pt-upcoming.soon{background:var(--teal-soft);color:var(--teal-dark)}
.pt-upcoming.due{background:var(--red-soft);color:var(--red)}
.pt-upcoming .pt-rowbtn{flex-shrink:0}

/* ---------- CAJÓN LATERAL DE DETALLE (drawer) ---------- */
.pt-drawer-ov{position:fixed;inset:0;background:rgba(15,27,45,.42);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:.25s;z-index:150}
.pt-drawer-ov.open{opacity:1;visibility:visible}
.pt-drawer{position:fixed;top:0;right:0;height:100vh;width:460px;max-width:92vw;background:#fff;z-index:160;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.pt-drawer.open{transform:translateX(0)}
.pt-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--line)}
.pt-drawer-head h3{font-size:20.2px;letter-spacing:-.3px}
.pt-drawer-sub{font-size:14px;margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-drawer-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink)}
.pt-drawer-x:hover{background:var(--bg)}
.pt-drawer-x svg{width:18px;height:18px}
.pt-drawer-body{flex:1;overflow-y:auto;padding:20px 22px}
.pt-drawer-sec{font-size:12.3px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;margin:6px 0 10px}
.pt-drawer-table{margin-bottom:16px}
.pt-drawer-table th,.pt-drawer-table td{padding:9px 10px;font-size:14px}
.pt-kv{display:flex;justify-content:space-between;gap:12px;font-size:15.1px;padding:7px 2px;color:var(--slate)}
.pt-kv-total{border-top:1px solid var(--line);margin-top:6px;padding-top:11px;font-size:16.8px;font-weight:700;color:var(--ink)}
.pt-drawer-foot{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--line)}
.pt-drawer-foot .pt-btn{flex:1}
.pt-drawer-foot.stacked{flex-direction:column;align-items:stretch}
.pt-drawer-foot.stacked .pt-btn{flex:0 0 auto}

/* ---------- MATRIZ DE PRESENTACIONES (drawer 2 niveles) ---------- */
/* botón que reemplaza "Add to order" en tarjetas con matriz */
.pt-pres-btn{width:100%;border:1px solid var(--teal);background:#fff;color:var(--teal-dark);border-radius:11px;
  padding:11px 14px;font-family:inherit;font-weight:700;font-size:15.1px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.pt-pres-btn:hover{background:var(--teal-soft)}
.pt-pres-btn svg{width:17px;height:17px}
/* PESTAÑAS por axis1 (doble presentación) */
.pt-mx-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px;
  position:sticky;top:218px;z-index:2;background:#fff;padding:6px 0}
.pt-mx-tabs-lab{font-size:11.6px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-light);
  font-weight:700;margin-right:4px}
.pt-mx-tab{border:1px solid var(--line);background:#fff;color:var(--slate);border-radius:20px;
  padding:7px 14px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.13s}
.pt-mx-tab:hover{border-color:var(--teal);color:var(--teal-dark)}
.pt-mx-tab.on{background:var(--teal);border-color:var(--teal);color:#fff}
.pt-mx-panel{display:flex;flex-direction:column}
/* etiqueta Back order */
.pt-back-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#9a6700;background:#fff3d4;border:1px solid #f0d999;
  padding:1px 7px;border-radius:20px;vertical-align:middle}
.pt-mx-row.is-back{background:#fffaf0;border-color:#f0e0bd}
/* fila de carrito back order + nota al pie del resumen */
.pt-table tr.is-back{background:#fffaf0}
.pt-back-note{font-size:12.3px;color:#9a6700;background:#fff8e6;border:1px solid #f0e0bd;
  border-radius:9px;padding:9px 11px;margin-top:14px;line-height:1.45}
.pt-back-note b{font-weight:700}

/* grupo por axis1 dentro del cajón */
.pt-mx-group{margin-bottom:18px}
.pt-mx-group:last-child{margin-bottom:4px}
.pt-mx-gtitle{display:flex;align-items:center;gap:8px;font-size:15.7px;font-weight:700;color:var(--ink);
  margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.pt-mx-gtitle .ax{font-size:12.3px;font-weight:700;color:var(--teal-dark);background:var(--teal-soft);
  padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
/* fila por axis2 (combinación) — con fondo sutil tipo tarjeta (no blanco plano) */
.pt-mx-row{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:6px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;transition:background .12s,border-color .12s}
.pt-mx-row:last-child{margin-bottom:0}
.pt-mx-row:hover{background:#f1f6f5;border-color:var(--slate-light)}
.pt-mx-name{flex:1;min-width:0}
.pt-mx-name .nm{font-size:14.6px;font-weight:600;color:var(--ink)}
.pt-mx-name .sk{font-size:12.9px;color:var(--slate)}
.pt-mx-price{font-size:14.6px;font-weight:700;color:var(--ink);white-space:nowrap}
.pt-mx-price s{font-size:12.3px;color:var(--slate-light);font-weight:600;margin-right:3px}
.pt-mx-out{font-size:12.9px;font-weight:700;color:var(--slate-light)}
/* stepper de cantidad por celda (reusa el patrón pt-qty pequeño) */
.pt-mx-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex-shrink:0}
.pt-mx-qty button{width:30px;height:32px;border:none;background:#fff;cursor:pointer;font-size:17px;color:var(--ink);line-height:1}
.pt-mx-qty button:hover{background:var(--bg)}
.pt-mx-qty input{width:38px;height:32px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:inherit;font-size:14px;font-weight:600;outline:none;-moz-appearance:textfield}
.pt-mx-qty input::-webkit-outer-spin-button,.pt-mx-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pt-mx-qty.disabled{opacity:.4;pointer-events:none}
/* resumen en el pie del cajón */
.pt-mx-sum{flex:1;font-size:14px;color:var(--slate);display:flex;flex-direction:column;justify-content:center}
.pt-mx-sum b{color:var(--ink);font-size:15.7px}

/* ---------- FOTO CLICABLE + COLUMNA DESCRIPCIÓN (tabla) ---------- */
.pt-thumb-click{cursor:pointer;transition:transform .12s,box-shadow .12s}
.pt-thumb-click:hover{transform:scale(1.06);box-shadow:0 4px 12px rgba(15,27,45,.12)}
/* en grilla, la imagen del carrusel también es clicable */
.pt-pres-slide img{cursor:pointer}
/* celda de descripción: 2 líneas máx con elipsis */
.pt-cat-desc{max-width:320px;color:var(--slate);font-size:13.6px;line-height:1.45}
.pt-cat-desc{display:table-cell}
.pt-cat-desc > *,.pt-cat-desc{overflow:hidden}
@supports (-webkit-line-clamp:2){
  .pt-cat-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* bloquea el scroll de la página de fondo cuando hay un cajón abierto
   (antes: al hacer scroll sobre el overlay, la página de atrás se movía) */
body.pt-noscroll{overflow:hidden}

/* ---------- CAJÓN DE DETALLE (una presentación) ---------- */
/* La FOTO queda fija arriba del cajón mientras el cuerpo se desplaza.
   Es sticky dentro de .pt-drawer-body (el contenedor con overflow-y:auto). */
.pt-dt-img{position:sticky;top:-20px;z-index:2;width:100%;height:230px;border-radius:14px;
  background:linear-gradient(160deg,#fff,var(--bg));border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden;
  transition:none}
.pt-dt-img img{max-width:74%;max-height:74%;object-fit:contain;transition:opacity .18s}
.pt-dt-img.swap img{opacity:0}
.pt-dt-cat{font-size:12.3px;font-weight:700;color:var(--teal-dark);letter-spacing:.03em;text-transform:uppercase;margin-bottom:5px}
.pt-dt-name{font-size:20.2px;font-weight:700;letter-spacing:-.3px;line-height:1.25;margin-bottom:10px}
.pt-dt-desc{font-size:15.1px;color:var(--slate);line-height:1.55;margin-bottom:16px}
.pt-dt-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pt-dt-fact{font-size:13px;font-weight:600;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:6px 11px}
.pt-dt-fact .lab{color:var(--slate);font-weight:600;margin-right:5px}
.pt-dt-fact.stock-ok .v{color:var(--teal-dark)}
.pt-dt-fact.stock-low .v{color:#b8860b}
.pt-dt-fact.stock-out .v{color:#c0392b}
.pt-dt-price{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.pt-dt-price s{font-size:16px;color:var(--slate-light);font-weight:600}
.pt-dt-price b{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.pt-dt-price small{font-size:14px;color:var(--slate)}
/* lista de presentaciones dentro del detalle (multi-presentación) */
.pt-dt-presrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--bg)}
.pt-dt-presrow:last-child{border-bottom:none}
.pt-dt-presrow .nm{flex:1;font-size:14.6px;font-weight:600}
.pt-dt-presrow .pr{font-size:14.6px;font-weight:700;white-space:nowrap}
/* fila de presentación clicable (cambia la foto de arriba) */
.pt-presrow{cursor:pointer}
.pt-presrow.active{background:var(--teal-soft);border-color:var(--teal)}
.pt-presrow.active .nm{color:var(--teal-dark)}
.pt-presrow .pt-mx-qty{cursor:default}

/* ---------- DETALLE DE DOCUMENTO (cajón orders): formato 2 filas SIEMPRE ----------
   Mismo layout que el carrito en móvil, pero aplicado en cualquier ancho a la
   tabla read-only del detalle (.pt-cart-table-ro), porque las columnas quedan
   muy estrechas dentro del cajón. Fila 1 = imagen+nombre; fila 2 = precio·qty·total. */
.pt-cart-table-ro thead{display:none}
.pt-cart-table-ro, .pt-cart-table-ro tbody{display:block;width:100%}
.pt-cart-table-ro tr{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    "name  name  name"
    "price qty   total";
  column-gap:10px;row-gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--bg)}
.pt-cart-table-ro td{display:block;border:none;padding:0;font-size:13px}
.pt-cart-table-ro td::before{content:""!important;display:none!important}
.pt-cart-table-ro td[data-th="Product"]{grid-area:name}
.pt-cart-table-ro .pt-cell-prod{gap:10px;align-items:center}
.pt-cart-table-ro .pt-cell-prod img.pt-thumb{width:44px;height:44px;padding:5px}
.pt-cart-table-ro .pt-cell-prod .nm{font-size:14.5px;line-height:1.3;font-weight:700}
.pt-cart-table-ro .pt-cell-prod .sk{font-size:11.5px}
.pt-cart-table-ro td[data-th="Unit price"]{grid-area:price;color:var(--ink);font-weight:600}
.pt-cart-table-ro td[data-th="Qty"]{grid-area:qty;justify-self:center;font-weight:600}
.pt-cart-table-ro td[data-th="Line total"]{grid-area:total;font-weight:700;color:var(--ink);text-align:right}
.pt-cart-table-ro td[data-th="Unit price"]::before,
.pt-cart-table-ro td[data-th="Qty"]::before,
.pt-cart-table-ro td[data-th="Line total"]::before{
  content:attr(data-th)!important;display:block!important;font-size:9.5px;color:var(--slate-light);
  text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:2px}
.pt-cart-table-ro td[data-th="Qty"]::before{text-align:center}
.pt-cart-table-ro td[data-th="Line total"]::before{text-align:right}

/* ---------- TABLAS RESPONSIVE (modo tarjeta en móvil) ---------- */
@media(max-width:640px){
  .pt-table thead{display:none}
  .pt-table, .pt-table tbody, .pt-table tr, .pt-table td{display:block;width:100%}
  .pt-table tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:6px 4px}
  .pt-table td{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;
    border:none;padding:8px 14px}
  .pt-table td:first-child{text-align:left}
  .pt-table td::before{content:attr(data-th);font-size:12.3px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--slate);font-weight:700;text-align:left}
  .pt-table td:first-child::before{content:""}
  .pt-actions-cell{justify-content:flex-start}
  .pt-drawer{width:100%;max-width:100%}

  /* CARRITO EN MÓVIL: cada producto en 2 filas.
     Fila 1 = nombre (a todo el ancho, junto a la miniatura).
     Fila 2 = precio · cantidad · total · eliminar.
     Cada <tr> se vuelve una "tarjeta" con CSS grid; las celdas se ubican por
     grid-area según su data-th, así no dependemos del orden del HTML. */
  .pt-cart-table thead{display:none}
  .pt-cart-table, .pt-cart-table tbody{display:block;width:100%}
  .pt-cart-table tr{
    display:grid;
    grid-template-columns:1fr 1fr 1fr auto;
    grid-template-areas:
      "name  name  name  name"
      "price qty   total rm";
    column-gap:10px;row-gap:10px;align-items:center;
    border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;
  }
  .pt-cart-table tr.is-back{background:#fffaf0;border-color:#f0e0bd}
  .pt-cart-table td{display:block;border:none;padding:0;font-size:13px}
  .pt-cart-table td::before{content:""!important;display:none!important}
  /* FILA 1: imagen + nombre, a todo el ancho */
  .pt-cart-table td[data-th="Product"]{grid-area:name}
  .pt-cart-table .pt-cell-prod{gap:10px;align-items:center}
  .pt-cart-table .pt-cell-prod img.pt-thumb{width:44px;height:44px;padding:5px}
  .pt-cart-table .pt-cell-prod .nm{font-size:14.5px;line-height:1.3;font-weight:700}
  .pt-cart-table .pt-cell-prod .sk{font-size:11.5px}
  /* FILA 2: precio · cantidad · total · eliminar, con micro-etiqueta arriba */
  .pt-cart-table td[data-th="Unit price"]{grid-area:price;color:var(--ink);font-weight:600}
  .pt-cart-table td[data-th="Qty"]{grid-area:qty;justify-self:center}
  .pt-cart-table td[data-th="Line total"]{grid-area:total;font-weight:700;color:var(--ink);text-align:right}
  .pt-cart-table .pt-cart-rm{grid-area:rm;justify-self:end;align-self:center}
  .pt-cart-table td[data-th="Unit price"]::before,
  .pt-cart-table td[data-th="Line total"]::before{
    content:attr(data-th)!important;display:block!important;font-size:9.5px;color:var(--slate-light);
    text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:2px}
  .pt-cart-table td[data-th="Line total"]::before{text-align:right}

  /* LISTA DE ÓRDENES (#ordTable): se mantiene como TABLA con scroll horizontal
     en móvil (formato web), NO como tarjetas. Anula el modo block genérico.
     SOLO la tabla se desliza: el wrap confina el ancho y el panel no crece. */
  #ordTable{display:table;width:max-content;min-width:100%}
  #ordTable thead{display:table-header-group}
  #ordTable tbody{display:table-row-group}
  #ordTable tfoot{display:table-footer-group}
  #ordTable tr{display:table-row;border:none;margin:0;padding:0}
  #ordTable th, #ordTable td{display:table-cell;white-space:nowrap;
    border:none;border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;font-size:13.4px}
  #ordTable td::before, #ordTable th::before{content:""!important;display:none!important}
}
/* el wrap confina el scroll a la tabla (no a la vista). Fuera del @media para
   que aplique siempre; min-width:0 evita que un hijo ancho estire al flex/grid. */
.pt-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.pt-panel{min-width:0}

/* ---------- MODAL DEMO (patrón SELBUK_DEMO) ---------- */
.pt-modal-ov{position:fixed;inset:0;background:rgba(15,27,45,.42);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:.2s;z-index:200;display:flex;align-items:center;justify-content:center}
.pt-modal-ov.open{opacity:1;visibility:visible}
.pt-modal{width:360px;max-width:92vw;background:#fff;border-radius:18px;padding:26px;text-align:center;
  transform:translateY(8px);transition:.2s}
.pt-modal-ov.open .pt-modal{transform:translateY(0)}
.pt-modal-ic{width:56px;height:56px;border-radius:50%;background:var(--teal-soft);display:flex;
  align-items:center;justify-content:center;margin:0 auto 16px;color:var(--teal-dark)}
.pt-modal-ic svg{width:30px;height:30px}
/* variante destructiva del icono del modal (confirmación de borrado) */
.pt-modal-ic.danger{background:#fdecea;color:#c0392b;margin:0 0 16px}
/* botón destructivo (confirmar borrado/reinicio) */
.pt-btn-danger{flex:1;border:none;border-radius:12px;padding:13px;font-family:inherit;font-weight:700;
  font-size:15.1px;cursor:pointer;background:#c0392b;color:#fff;transition:.12s}
.pt-btn-danger:hover{background:#a93226}
.pt-modal-t{font-size:20.2px;font-weight:700;margin-bottom:10px}
.pt-modal-b{font-size:15.1px;color:var(--slate);line-height:1.55;margin-bottom:22px}
.pt-modal-btn{width:100%;border:none;border-radius:12px;padding:13px;font-family:inherit;font-weight:700;
  font-size:15.7px;cursor:pointer;background:var(--teal);color:#fff}
.pt-modal-btn:hover{background:var(--teal-dark)}

/* ---------- MODAL DE NOTIFICACIONES (confirmación al enviar pedido) ---------- */
.pt-notify{width:420px}
.pt-notify-ic{width:60px;height:60px;border-radius:50%;background:var(--green-soft,#e7f6ec);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--green,#16a34a)}
.pt-notify-ic svg{width:32px;height:32px}
.pt-notify .pt-modal-b{margin-bottom:16px}
.pt-notify-list{text-align:left;background:var(--bg,#f4f7f9);border:1px solid var(--line,#e6ebef);
  border-radius:13px;padding:8px 12px;margin-bottom:14px}
.pt-notify-row{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line,#e6ebef)}
.pt-notify-row:last-child{border-bottom:none}
.pt-notify-rowic{width:30px;height:30px;border-radius:9px;background:var(--teal-soft);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-notify-rowic svg{width:16px;height:16px}
.pt-notify-rowtx{flex:1;font-size:13.6px;color:var(--ink,#13212e);line-height:1.4}
.pt-notify-rowok{width:22px;height:22px;border-radius:50%;background:var(--green,#16a34a);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-notify-rowok svg{width:13px;height:13px}
.pt-notify-foot{font-size:12px;color:var(--slate);margin-bottom:18px;line-height:1.5}
@media(max-width:480px){.pt-notify{width:92vw}}

/* ---------- MANUAL DEL ADMINISTRADOR (drawer) ---------- */
.pt-manual-ov{position:fixed;inset:0;background:rgba(15,27,45,.42);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:.2s;z-index:400;display:flex;justify-content:flex-end}
.pt-manual-ov.open{opacity:1;visibility:visible}
.pt-manual{width:560px;max-width:96vw;height:100vh;background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 36px rgba(15,27,45,.18)}
.pt-manual-ov.open .pt-manual{transform:translateX(0)}
.pt-manual-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#0c8c82,#10b3a6);color:#fff}
.pt-manual-head b{font-size:17px;font-weight:700;display:block}
.pt-manual-head span{font-size:12.5px;opacity:.9;margin-top:3px;display:block}
.pt-manual-x{width:34px;height:34px;border:none;background:rgba(255,255,255,.18);color:#fff;border-radius:9px;
  font-size:22px;line-height:1;cursor:pointer;flex-shrink:0}
.pt-manual-x:hover{background:rgba(255,255,255,.3)}
.pt-manual-body{flex:1;display:flex;min-height:0}
.pt-manual-nav{width:198px;flex-shrink:0;border-right:1px solid var(--line);overflow-y:auto;padding:10px 8px;background:var(--bg,#f4f7f9)}
.pt-manual-link{display:block;width:100%;text-align:left;border:none;background:none;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--slate);padding:10px 11px;border-radius:9px;cursor:pointer;line-height:1.35;margin-bottom:2px}
.pt-manual-link:hover{background:#fff;color:var(--ink)}
.pt-manual-link.on{background:var(--teal-soft);color:var(--teal-dark)}
.pt-manual-content{flex:1;overflow-y:auto;padding:22px 24px}
.pt-manual-content h3{font-size:18px;font-weight:700;margin-bottom:12px;color:var(--ink)}
.pt-manual-content p{font-size:14.2px;color:var(--slate);line-height:1.65}
.pt-manual-content p b{color:var(--ink);font-weight:700}
.pt-help-btn svg{width:19px;height:19px}
@media(max-width:640px){.pt-manual-body{flex-direction:column}.pt-manual-nav{width:auto;display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line)}.pt-manual-link{white-space:nowrap}}

/* ---------- LOGIN ---------- */
.pt-login-err{background:var(--red-soft,#fdeceb);color:var(--red,#e2483d);border:1px solid #f5c6c2;
  border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px;text-align:center}
.pt-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(120deg,#0c8c82,#10b3a6)}
.pt-login{width:380px;max-width:100%;background:#fff;border-radius:20px;padding:34px 30px;text-align:center}
.pt-login .pt-logo{width:54px;height:54px;font-size:26.9px;border-radius:14px;margin:0 auto 16px}
.pt-login h1{font-size:23.5px;letter-spacing:-.3px}
.pt-login .tag{font-size:15.1px;color:var(--slate);margin-top:6px;margin-bottom:24px}
.pt-field{text-align:left;margin-bottom:14px}
.pt-field label{display:block;font-size:13.4px;font-weight:700;color:var(--slate);margin-bottom:6px}
.pt-field input{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15.7px;font-family:inherit;outline:none}
.pt-field input:focus{border-color:var(--teal)}
.pt-login .pt-btn{margin-top:6px}
.pt-login .note{font-size:12.9px;color:var(--slate-light);margin-top:18px;line-height:1.5}

/* demo banner */
.pt-demo-tag{display:inline-flex;align-items:center;gap:6px;background:var(--amber-soft);color:var(--amber);
  font-size:12.3px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:20px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .pt-cart-layout{grid-template-columns:1fr}
  .pt-summary{position:static}
  .pt-aging{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .pt-top{padding:0 14px;gap:10px}
  .pt-user-tx{display:none}
  .pt-wrap{padding:20px 16px 50px}
  .pt-hero{padding:24px}
}

/* =====================================================================
 * Menú de usuario unificado estilo CRM (rediseño 17 jul, portal_header.js).
 * Reemplaza el engranaje ⚙️ separado. Reusa tokens/estilos existentes.
 * ===================================================================== */
.pt-udd{position:relative}
.pt-udd-btn{display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;
  padding:4px 6px;border-radius:12px;transition:.12s}
.pt-udd-btn:hover{background:var(--bg)}
.pt-udd-caret{width:15px;height:15px;opacity:.6;transition:transform .18s;flex-shrink:0}
.pt-udd.open .pt-udd-caret{transform:rotate(180deg)}
.pt-udd-menu{position:absolute;top:calc(100% + 8px);right:0;width:300px;max-width:92vw;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 16px 38px rgba(15,27,45,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;
  max-height:80vh;overflow:auto}
.pt-udd.open .pt-udd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.pt-udd-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-radius:10px;padding:10px 11px;font-family:inherit;
  font-size:14.6px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s;text-decoration:none}
.pt-udd-item svg{width:16px;height:16px;flex-shrink:0;opacity:.85}
.pt-udd-item:hover{background:var(--bg)}
.pt-udd-item.danger{color:#c0392b}
.pt-udd-item.danger:hover{background:#fdecea}
.pt-udd-lab{font-size:11.6px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-light);
  font-weight:700;padding:6px 11px 5px}
.pt-udd-opt{display:flex;align-items:center;width:100%;text-align:left;border:none;background:none;
  border-radius:10px;padding:9px 12px 9px 34px;font-family:inherit;font-size:14.2px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:.12s;position:relative}
.pt-udd-opt:hover{background:var(--bg)}
.pt-udd-opt.on{background:var(--teal-soft);color:var(--teal-dark)}
.pt-udd-opt::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;border:2px solid var(--slate-light);box-sizing:border-box}
.pt-udd-opt.on::before{background:var(--teal);border-color:var(--teal)}
.pt-udd-opt.on::after{content:"";position:absolute;left:16px;top:calc(50% - 5px);
  width:4px;height:4px;border-radius:50%;background:#fff}
.pt-udd-sep{height:1px;background:var(--line);margin:6px 4px}
.pt-udd-logout{color:#c0392b}
.pt-udd-logout svg{opacity:.85}
/* fila con switch (catálogo público, comprar sin inventario) */
.pt-udd-toggle{display:flex;align-items:center;gap:12px;padding:8px 11px;border-radius:10px;cursor:pointer;transition:.12s}
.pt-udd-toggle:hover{background:var(--bg)}
.pt-udd-il{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.pt-udd-il svg{width:16px;height:16px;flex-shrink:0;opacity:.85}
.pt-udd-toggle-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.pt-udd-toggle-tx b{font-size:14px;font-weight:600;color:var(--ink)}
.pt-udd-toggle-tx small{font-size:12.2px;color:var(--slate);margin-top:1px;line-height:1.35}
/* sección Dev Tools expandible */
.pt-udd-exp .pt-udd-caret2{margin-left:auto;width:14px;height:14px;opacity:.5;transition:transform .18s}
.pt-udd-exp.open .pt-udd-caret2{transform:rotate(180deg)}
.pt-udd-devwrap{padding:2px 2px 4px}
.pt-udd-devlab{padding:6px 11px 0;font-size:12.2px;font-weight:700;color:var(--slate)}
.pt-udd-sub{padding:4px 12px 8px 13px;display:flex;flex-direction:column;gap:6px}
/* radios (envío / oos) */
.pt-orad{display:flex;align-items:flex-start;gap:8px;font-size:13.6px;color:var(--ink);cursor:pointer;line-height:1.4}
.pt-orad input[type=radio]{accent-color:var(--teal);flex-shrink:0;margin-top:2px}
.pt-orad b{font-weight:700}
.pt-orad small{color:var(--slate-light);font-weight:500}
.pt-oradios{display:flex;flex-direction:column;gap:9px;padding:4px 2px}
.pt-osec-label{font-size:12.4px;font-weight:700;color:var(--slate);padding:2px 2px 8px}
.pt-oinline{display:inline-flex;align-items:center;gap:3px;margin-left:4px;font-size:13.4px;color:var(--slate)}
.pt-oinline input{width:62px;border:1px solid var(--line);border-radius:7px;padding:4px 7px;font-family:inherit}
.pt-oinline input:focus{border-color:var(--teal);outline:none}
.pt-onote{margin-top:12px;font-size:12.6px;color:var(--slate-light);line-height:1.45;text-align:left}
/* modal de Pedidos (reusa .pt-modal-ov/.pt-modal pero alineado a la izquierda) */
.pt-omodal{position:relative;text-align:left;padding:22px}
.pt-omodal .pt-modal-t{text-align:left;margin:0 0 14px;font-size:18px}
.pt-omodal-b{text-align:left}
.pt-omodal-x{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;
  color:var(--slate-light);padding:4px;border-radius:8px;line-height:0}
.pt-omodal-x:hover{background:var(--bg);color:var(--ink)}
.pt-omodal-x svg{width:18px;height:18px}
.pt-omodal .pt-modal-btn{margin-top:18px;width:100%}
/* chip de carga (anti-flash): logo animado en lugar del nombre demo */
.pt-user-loading{opacity:.9}
.pt-ava-spin{position:relative;animation:ptAvaPulse 1.1s ease-in-out infinite}
.pt-ava-spin::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--teal-soft);border-top-color:var(--teal);animation:ptSpin .8s linear infinite}
@keyframes ptSpin{to{transform:rotate(360deg)}}
@keyframes ptAvaPulse{0%,100%{opacity:1}50%{opacity:.72}}
.pt-skel-line{display:block;height:11px;width:96px;border-radius:6px;
  background:linear-gradient(90deg,var(--line) 25%,#f2f6f8 37%,var(--line) 63%);
  background-size:400% 100%;animation:ptSkel 1.3s ease infinite;margin:2px 0}
.pt-skel-line.sm{width:64px;height:9px}
@keyframes ptSkel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Anti-flash de la MARCA del header (17 jul): mientras el perfil real no resuelve,
   NO se pinta el demo 'Harvest & Co.' — logo pulsa y el nombre va como skeleton. */
.pt-logo-load{background:linear-gradient(135deg,var(--teal-soft),#dbeee9)!important;color:transparent!important;animation:ptAvaPulse 1.1s ease-in-out infinite}
.pt-brand-skel{display:inline-block;width:120px;max-width:38vw;height:15px;vertical-align:middle}
/* Modal de Pedidos (18 jul) — opciones en filas estilo estándar (.pt-colrow) con interruptor .pt-switch (igual al panel "Configurar vista") */
.pt-orows{display:block}
.pt-orow{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.pt-orow:last-child{margin-bottom:0}
.pt-orow .pt-orow-lbl{flex:1;font-size:15.1px;font-weight:600;color:var(--ink);line-height:1.3}
.pt-orow .pt-orow-lbl small{font-weight:500;color:var(--slate-light);font-size:12.6px}
.pt-orow .pt-oinline{flex-shrink:0}

/* ===== ⚙️ Configuración de la tienda (admin) — cajón estilo hub (18 jul) ===== */
.pt-cfg-btn{color:var(--slate)}
.pt-cfg-ov{position:fixed;inset:0;background:rgba(15,27,45,.42);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.25s;z-index:1200}
.pt-cfg-ov.open{opacity:1;visibility:visible}
.pt-cfg-drawer{position:absolute;top:0;right:0;height:100%;width:440px;max-width:94vw;background:var(--bg);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(15,27,45,.18);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden}
.pt-cfg-ov.open .pt-cfg-drawer{transform:translateX(0)}
.pt-cfg-head{display:flex;align-items:center;gap:10px;padding:16px 18px;background:#fff;border-bottom:1px solid var(--line);flex-shrink:0}
.pt-cfg-ttl{flex:1;min-width:0}
.pt-cfg-ttl h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin:0}
.pt-cfg-ttl p{font-size:12.5px;color:var(--slate);margin:2px 0 0;line-height:1.35}
.pt-cfg-back{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.pt-cfg-back:hover{background:var(--bg)}
.pt-cfg-back svg{width:18px;height:18px}
.pt-cfg-back[hidden]{display:none}
.pt-cfg-body{flex:1;overflow-y:auto;padding:18px}
/* filas estilo hub del CRM (.set-*) scopeadas al cajón */
.pt-cfg-drawer .set-wrap{display:flex;flex-direction:column;gap:22px}
.pt-cfg-drawer .set-group-h{display:flex;align-items:center;gap:11px;width:100%;padding:0 2px 12px}
.pt-cfg-drawer .gh-ic{width:34px;height:34px;border-radius:10px;background:var(--teal-soft);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-cfg-drawer .gh-ic svg{width:18px;height:18px}
.pt-cfg-drawer .gh-label{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.pt-cfg-drawer .gh-count{font-size:12px;font-weight:700;color:var(--slate);background:#eef2f5;padding:2px 9px;border-radius:20px;flex-shrink:0}
.pt-cfg-drawer .set-list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:-2px}
.pt-cfg-drawer .set-row{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:none;border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;transition:.13s;font-family:inherit}
.pt-cfg-drawer .set-row:last-child{border-bottom:none}
.pt-cfg-drawer .set-row:hover{background:var(--teal-soft)}
.pt-cfg-drawer .set-ic{width:40px;height:40px;border-radius:11px;background:var(--teal-soft);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.13s}
.pt-cfg-drawer .set-row:hover .set-ic{background:var(--teal);color:#fff}
.pt-cfg-drawer .set-ic svg{width:20px;height:20px}
.pt-cfg-drawer .set-tx{flex:1;min-width:0}
.pt-cfg-drawer .set-tx b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.pt-cfg-drawer .set-tx span{display:block;font-size:12.5px;color:var(--slate);line-height:1.5;margin-top:1px}
.pt-cfg-drawer .set-badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:20px;flex-shrink:0;background:var(--teal-soft);color:var(--teal-dark)}
.pt-cfg-drawer .set-chev{width:16px;height:16px;color:var(--slate-light);flex-shrink:0}
/* sub-panel */
.pt-cfg-subbody{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pt-cfg-note{font-size:13px;color:var(--slate);line-height:1.5;margin-bottom:12px}
.pt-cfg-opt{cursor:pointer}
.pt-cfg-check{margin-left:auto;color:var(--teal);display:inline-flex;align-items:center;flex-shrink:0}
.pt-cfg-check[hidden]{display:none}
.pt-cfg-check svg{width:20px;height:20px}
.pt-cfg-foot{display:flex;justify-content:flex-start;padding:14px 2px 0}
@media(max-width:560px){.pt-cfg-drawer{width:100%}}
.pt-cfg-drawer .pt-cfg-toggle{cursor:pointer}
.pt-cfg-drawer .pt-cfg-toggle .pt-orow-lbl small{display:block;font-weight:500;color:var(--slate-light);font-size:12.6px;margin-top:2px}
.pt-cfg-drawer .pt-cfg-oosmode{margin-top:12px;display:flex;flex-direction:column;gap:9px;padding:2px 2px 0}

/* ============================================================
   Ajustes portal (23 jul): botón de WhatsApp + campos de config
   ============================================================ */
/* Botón de WhatsApp — verde WhatsApp (reconocible) tanto en header como flotante */
.pt-wa-btn{color:#25d366;border-color:#25d366;background:#fff}
.pt-wa-btn:hover{background:#25d366;color:#fff;border-color:#25d366}
.pt-wa-btn svg{width:22px;height:22px}
.pt-wa-float{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#25d366;color:#fff;text-decoration:none;
  box-shadow:0 6px 18px rgba(37,211,102,.45);transition:transform .15s,box-shadow .15s}
.pt-wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.55)}
.pt-wa-float svg{width:30px;height:30px}
@media (max-width:900px){.pt-wa-float{right:14px;bottom:14px;width:52px;height:52px}.pt-wa-float svg{width:28px;height:28px}}

/* Utilidades y campos de los paneles de configuración (idioma, whatsapp) */
.pt-hidden{display:none!important}
/* ---- filas con checkbox cuadrado del panel de configuración (idiomas, ubicación de WhatsApp) ---- */
/* las filas seleccionables del panel son <button>: sin esto se encogen al ancho
   del texto y se ven como pastillas sueltas en vez de filas del panel */
button.pt-orow{width:100%;text-align:left;font-family:inherit;font-size:inherit}
.pt-cfg-cbrow{gap:10px}
.pt-cfg-cb{flex-shrink:0;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);background:#fff;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .15s,border-color .15s}
.pt-cfg-cb svg{width:14px;height:14px;opacity:0}
.pt-cfg-cb.on{background:var(--teal);border-color:var(--teal)}
.pt-cfg-cb.on svg{opacity:1}
.pt-cfg-cbrow.pt-cfg-off .pt-orow-lbl{color:var(--slate-light)}
.pt-cfg-def{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:6px 12px;font-size:12.4px;font-weight:700;color:var(--slate);font-family:inherit;cursor:pointer}
.pt-cfg-def:disabled{opacity:.4;cursor:default}
.pt-cfg-def.on{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.pt-cfg-def .pt-cfg-check{margin-left:0}
.pt-cfg-def .pt-cfg-check svg{width:15px;height:15px}
.pt-cfg-warn{color:var(--red);font-weight:600;margin-top:8px}
.pt-cfg-hint{margin:8px 0 0}
/* subtítulo dentro de una fila seleccionable (modos de PayPal) */
.pt-cfg-opt .pt-orow-lbl small{display:block;font-weight:500;color:var(--slate-light);font-size:12.5px;margin-top:3px;line-height:1.35}
/* ---- bloque de pago con PayPal en el resumen del carrito ---- */
.pt-pp-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pt-pp-title{font-size:12.5px;font-weight:700;color:var(--slate);margin-bottom:9px}
.pt-pp-note{font-size:12.6px;color:var(--slate);line-height:1.45;margin-top:9px}
.pt-pp-manual{font-size:13.4px;color:var(--ink);line-height:1.45;margin-bottom:10px}
.pt-pp-ok{font-size:13.8px;font-weight:700;color:var(--teal-dark);line-height:1.4}
.pt-pp-err{font-size:12.8px;color:var(--red);margin-top:9px}
.pt-pp-btn{display:block;width:100%;margin:0;padding:12px 18px;border-radius:10px;border:1px solid #e5a800;
  background:#ffc439;color:#003087;font-weight:800;font-size:14.6px;text-align:center;text-decoration:none;cursor:pointer}
.pt-pp-btn:hover{background:#f2b300}
.pt-pp-btn:disabled{opacity:.5;cursor:default}

/* botón flotante de WhatsApp en la esquina inferior IZQUIERDA */
.pt-wa-float-left{left:20px;right:auto}
@media (max-width:900px){.pt-wa-float-left{left:14px;right:auto}}

.pt-cfg-sublabel{font-size:12.5px;font-weight:700;color:var(--slate);margin:14px 2px 7px}
.pt-cfg-defwrap,.pt-cfg-wabody{margin-top:6px}
.pt-input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;transition:border-color .15s}
.pt-input::placeholder{color:var(--slate-light)}
.pt-input:focus{outline:none;border-color:var(--teal)}
.pt-textarea{resize:vertical;min-height:52px;line-height:1.4}

/* ============================================================
   Banner del hero de la tienda (23 jul ·banner)
   ============================================================ */
.pt-hero{position:relative}                 /* ancla del engranaje admin */
.pt-hero-cfg{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.18);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.pt-hero-cfg:hover{background:#fff;color:var(--teal-dark);border-color:#fff}
.pt-hero-cfg svg{width:19px;height:19px}
/* Con banner: la imagen reemplaza el bloque verde; el eslogan va debajo. */
.pt-hero-hasbanner{background:none!important;padding:0!important;display:block}
.pt-hero-hasbanner .pt-hero-cfg{border-color:var(--line);background:rgba(255,255,255,.92);color:var(--slate)}
.pt-hero-hasbanner .pt-hero-cfg:hover{background:#fff;color:var(--teal-dark)}
.pt-hero-img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;border-radius:var(--radius)}
.pt-hero-tag{margin:14px 2px 0;font-size:16.2px;color:var(--slate);line-height:1.5;max-width:640px}

/* Panel de subida del banner (dentro del cajón de Ajustes) */
.pt-banner-prev{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:4px 0 14px;background:var(--bg)}
.pt-banner-prev img{display:block;width:100%;height:auto;max-height:220px;object-fit:cover}
.pt-banner-prev.pt-banner-empty{display:flex;align-items:center;justify-content:center;min-height:120px;color:var(--slate-light);font-size:13.5px}
.pt-banner-status{margin-top:10px}

/* WhatsApp: variante con etiqueta (ícono + palabra) y ajustes de config (23 jul ·refino) */
.pt-wa-label{width:auto;gap:7px;padding:0 12px}
.pt-wa-tx{font-size:12.5px;font-weight:800;letter-spacing:.3px}
.pt-wa-float-label{width:auto;border-radius:28px;padding:0 20px;gap:9px}
.pt-wa-float-label .pt-wa-tx{font-size:14.5px;font-weight:700}
.pt-cfg-rbody{margin-top:6px}


/* ================= PIE DE PÁGINA (todas las páginas) =================
   Mismo lenguaje visual que el encabezado: navy de marca, teal para los
   enlaces. Tres columnas que colapsan a una en móvil. Los enlaces
   BLOQUEADOS (tienda privada, visitante sin sesión) se ven atenuados con
   candado — presentes, no ocultos — y llevan al formulario de acceso. */
.pt-footer{background:var(--navy,#0f1b2d);color:#cbd5e1;margin-top:48px}
.pt-footer-in{max-width:1200px;margin:0 auto;padding:34px 22px 26px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
/* El pie tiene de 2 a 4 columnas segun la tienda (contacto y paginas de
   contenido son opcionales). La clase la pone el JS que arma el pie: con
   auto-fit quedaban huecos cuando faltaba una de las dos. */
.pt-footer-in.cols-2{grid-template-columns:1.4fr 1fr}
.pt-footer-in.cols-3{grid-template-columns:1.4fr 1fr 1fr}
.pt-footer-in.cols-4{grid-template-columns:1.4fr 1fr 1fr 1fr}
.pt-foot-brand{display:flex;align-items:center;gap:12px}
.pt-foot-brand .pt-logo{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--teal,#10b3a6);color:#fff;font-weight:800;font-size:19px;flex:0 0 auto}
.pt-foot-brand-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pt-foot-brand-tx b{color:#fff;font-size:16.5px;font-weight:700}
.pt-foot-brand-tx small{color:#94a3b8;font-size:12.5px}
.pt-foot-h{color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.pt-foot-col{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.pt-foot-row{display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.pt-foot-row svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--teal,#10b3a6)}
.pt-foot-row a{color:#cbd5e1;text-decoration:none}
.pt-foot-row a:hover{color:#fff;text-decoration:underline}
.pt-foot-nav .pt-foot-link{display:inline-flex;align-items:center;gap:7px;color:#cbd5e1;text-decoration:none;font-size:13.5px;padding:2px 0}
.pt-foot-nav .pt-foot-link:hover{color:#fff;text-decoration:underline}
.pt-foot-link.is-locked{color:#7c8ba1;cursor:pointer}
.pt-foot-link.is-locked:hover{color:#cbd5e1;text-decoration:none}
.pt-foot-lock{width:13px;height:13px;flex:0 0 auto;opacity:.85}
.pt-foot-legal{border-top:1px solid rgba(255,255,255,.10);max-width:1200px;margin:0 auto;padding:15px 22px 22px;font-size:12.5px;color:#8fa0b4;text-align:center}
@media (max-width:900px){
  .pt-footer-in,.pt-footer-in.cols-2,.pt-footer-in.cols-3,.pt-footer-in.cols-4{grid-template-columns:1fr;gap:24px;padding:28px 18px 20px}
  .pt-foot-legal{text-align:left;padding:14px 18px 20px}
}

/* ========== VISTA RESTRINGIDA (tienda solo para clientes) ==========
   Encabezado + banner + mensaje de la configuración + pie. El formulario
   de acceso NO se muestra en la página: lo abre el botón del encabezado
   dentro de un modal (.pt-login-ov). */
.pt-restrict{max-width:820px;margin:26px auto 40px;padding:0 22px}
.pt-restrict-card{background:#fff;border:1px solid #fde3c2;border-top:5px solid #f59e0b;border-radius:16px;padding:30px 26px 26px;box-shadow:0 12px 34px rgba(15,27,45,.09);text-align:center}
.pt-restrict-ic{width:56px;height:56px;border-radius:50%;background:#fff7ed;color:#d97706;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.pt-restrict-ic svg{width:27px;height:27px}
.pt-restrict-msg{margin:0;font-size:21px;font-weight:800;line-height:1.35;letter-spacing:-.25px;color:var(--ink,#1a2433)}
.pt-restrict-note{margin:12px auto 0;max-width:52ch;font-size:15.5px;line-height:1.55;color:var(--slate,#64748b)}
.pt-restrict-actions{margin:18px 0 0;display:flex;justify-content:center}
.pt-login-ov{position:fixed;inset:0;background:rgba(15,27,45,.55);display:none;align-items:flex-start;justify-content:center;padding:34px 16px;z-index:80;overflow:auto}
.pt-login-ov.open{display:flex}
.pt-login-ov .pt-login{margin:0;max-height:none}
/* Dentro del modal, el contenedor del formulario pierde el fondo teal y el
   alto de pantalla completa que usa cuando ES la página de acceso. */
.pt-login-ov .pt-login-wrap{min-height:0;padding:0;background:none;display:block}
.pt-login-x{position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer;color:var(--slate,#64748b);padding:6px;line-height:0}
.pt-login-box{position:relative;width:100%;max-width:430px}
/* Botón "Iniciar sesión" del encabezado (solo vista restringida) */
.pt-signin-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:10px;background:var(--teal,#10b3a6);color:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.pt-signin-btn:hover{background:var(--teal-dark,#0c8c82)}
.pt-signin-btn svg{width:17px;height:17px}
@media (max-width:600px){ .pt-signin-btn span{display:none} .pt-signin-btn{padding:0 11px} }


/* ---- Panel de Ajustes: sub-bloques con etiqueta + control ---- */
.pt-cfg-sub{margin:16px 0 0}
.pt-cfg-lbl{display:block;font-size:13px;font-weight:700;color:var(--slate,#64748b);margin:0 0 7px}
.pt-cfg-sel{width:100%;border:1px solid var(--line,#e9eef2);border-radius:10px;padding:10px 12px;font-size:14.5px;font-family:inherit;background:#fff;outline:none}
.pt-cfg-sel:focus{border-color:var(--teal,#10b3a6)}
/* los <select> del panel salían con el look nativo del sistema: mismo marco que
   los demás campos + chevron propio para que no desentonen */
select.pt-cfg-sel{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
select.pt-cfg-sel:hover{border-color:var(--slate-light)}

.pt-cfg-ta{width:100%;border:1px solid var(--line,#e9eef2);border-radius:10px;padding:10px 12px;font-size:14.5px;font-family:inherit;line-height:1.5;resize:vertical;outline:none}
.pt-cfg-ta:focus{border-color:var(--teal,#10b3a6)}
/* Etiqueta de cantidad disponible sobre la foto (interruptor "Mostrar cantidad") */
.pt-tag.qty{background:rgba(15,27,45,.78);color:#fff}


/* ============================================================
   PAGINAS DE CONTENIDO — Nosotros / Contactanos / Terminos
   Publicas (no exigen sesion) y compartidas por es/en. El texto lo escribe la
   tienda desde el cajon de configuracion; aqui solo esta el envoltorio.
   ============================================================ */
.pt-crumbs{display:flex;align-items:center;gap:9px;color:var(--slate-light);font-size:13.5px;margin-bottom:18px}
.pt-crumbs a{color:var(--slate);text-decoration:none}
.pt-crumbs a:hover{color:var(--teal-dark);text-decoration:underline}
.pt-crumbs svg{width:14px;height:14px;flex:none;opacity:.8}
.pt-crumbs b{color:var(--ink);font-weight:600}

/* Imagen a la izquierda + texto a la derecha; en movil se apilan. Sin imagen,
   el texto ocupa el ancho completo (clase .is-solo). */
.pt-doc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.pt-doc-split.is-solo{grid-template-columns:minmax(0,1fr)}
.pt-doc-img{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block}
/* Prosa de la pagina: parrafos con aire y ancho de lectura comodo. */
.pt-doc{color:var(--ink);font-size:15.7px;line-height:1.7;max-width:70ch}
.pt-doc p{margin:0 0 15px}
.pt-doc p:last-child{margin-bottom:0}
.pt-doc-empty{color:var(--slate);font-style:italic}

/* Contactanos: datos de la tienda a la izquierda, formulario a la derecha. */
.pt-contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:start}
.pt-contact-info{display:flex;flex-direction:column;gap:22px}
.pt-contact-block{display:flex;flex-direction:column;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pt-contact-block:last-child{border-bottom:none;padding-bottom:0}
.pt-contact-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;color:var(--ink)}
.pt-contact-h svg{width:20px;height:20px;color:var(--teal-dark);flex:none}
.pt-contact-v{color:var(--slate);font-size:15px;line-height:1.6}
.pt-contact-v a{color:var(--slate);text-decoration:none}
.pt-contact-v a:hover{color:var(--teal-dark);text-decoration:underline}
.pt-contact-form{display:flex;flex-direction:column;gap:12px}
/* Trampa para robots: invisible para una persona, rellenable por un script. */
.pt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pt-form-msg{border-radius:11px;padding:11px 13px;font-size:14px;line-height:1.5}
.pt-form-msg.ok{background:var(--green-soft);color:#166534}
.pt-form-msg.err{background:var(--red-soft);color:#9f2d24}
.pt-input.is-bad{border-color:var(--red)}

/* Aviso "Guardado" del editor de paginas del cajon de configuracion. */
.pt-page-saved{color:var(--teal-dark);font-weight:700}

@media(max-width:900px){
  .pt-doc-split,.pt-contact{grid-template-columns:1fr;gap:24px}
}

/* --- Pie: redes sociales de la tienda --- */
.pt-foot-social{display:flex;gap:10px;margin-top:4px}
.pt-foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.08);color:#cbd5e1;text-decoration:none;transition:.15s}
.pt-foot-social a:hover{background:var(--teal-dark);color:#fff}
.pt-foot-social svg{width:18px;height:18px}

/* --- Cajon de configuracion: bloques del pie/contacto --- */
.pt-ct-block{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:6px}
.pt-ct-block:last-of-type{border-bottom:none}
.pt-ct-body{display:flex;flex-direction:column;gap:8px;padding:2px 2px 6px}
.pt-ct-field{display:flex;align-items:flex-start;gap:8px}
/* Etiqueta ES/EN al lado del campo: dice de que idioma es sin gastar un renglon. */
.pt-ct-lg{flex:none;margin-top:11px;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--slate-light);width:20px}
.pt-ct-field .pt-input{flex:1;min-width:0}

/* --- Pagina de contacto: horario y redes --- */
.pt-contact-social{display:flex;gap:10px;flex-wrap:wrap}
.pt-contact-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;
  border:1px solid var(--line);color:var(--slate);text-decoration:none;transition:.15s}
.pt-contact-social a:hover{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-soft)}
.pt-contact-social svg{width:20px;height:20px}

/* --- Traduccion asistida de los textos bilingues del cajon --- */
.pt-tr-row{display:flex;align-items:center;gap:10px;margin:8px 2px 0;flex-wrap:wrap}
/* .pt-btn es de ancho completo por defecto; aqui va junto a su contador. */
.pt-tr-btn{width:auto;margin:0;padding:9px 16px;font-size:14px}
.pt-tr-btn[disabled]{opacity:.5;cursor:not-allowed}
.pt-tr-left{font-size:12.5px;font-weight:700;color:var(--slate-light)}
.pt-tr-msg{margin:6px 2px 0}
.pt-tr-other{margin-top:6px}