/* ============================================================
   Azttec — Tienda en línea (storefront público)
   Sistema de diseño: paleta derivada del acento del tenant
   (color-mix), precio como héroe tipográfico, papel cálido.
   Display: Bricolage Grotesque · Cuerpo: system-ui.
   ============================================================ */
:root{
  --t-bg:#fbfaf8; --t-card:#ffffff; --t-text:#17181c; --t-text2:#6a6f7a;
  --t-border:#ecebe4; --t-accent:#6c63ff;
  /* Derivados del acento (un solo color del tenant → paleta completa) */
  --t-ink:color-mix(in srgb, var(--t-accent) 74%, #0c0c14);
  --t-accent2:color-mix(in srgb, var(--t-accent) 82%, #000);
  --t-soft:color-mix(in srgb, var(--t-accent) 9%, #fff);
  --t-soft2:color-mix(in srgb, var(--t-accent) 16%, #fff);
  --t-tint:color-mix(in srgb, var(--t-accent) 7%, var(--t-bg));
  --t-ph:color-mix(in srgb, var(--t-accent) 8%, #eef0f3);
  --t-green:#0f6e56;
  --t-disp:'Bricolage Grotesque',var(--t-body);
  --t-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --t-r:14px; --t-r-sm:10px; --t-wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--t-body);background:var(--t-bg);color:var(--t-text);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Loader / no disponible */
.td-loader,.td-nodisp{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;color:var(--t-text2)}
.td-nodisp h2{color:var(--t-text);font-family:var(--t-disp);font-weight:700}
.td-spin{width:34px;height:34px;border:3px solid var(--t-border);border-top-color:var(--t-accent);border-radius:50%;animation:tdspin .7s linear infinite}
@keyframes tdspin{to{transform:rotate(360deg)}}

/* Header */
.td-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--t-card) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--t-border)}
/* Barra del sitio (enlaces a la página del negocio) — configurable por tenant */
.td-sitebar{border-bottom:1px solid var(--t-border);background:var(--t-tint)}
.td-sitebar-in{max-width:var(--t-wrap);margin:0 auto;display:flex;align-items:center;gap:4px;padding:7px 22px;overflow-x:auto;scrollbar-width:none}
.td-sitebar-in::-webkit-scrollbar{display:none}
.td-sitelink{font-size:12.5px;font-weight:600;color:var(--t-text2);text-decoration:none;padding:4px 11px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
.td-sitelink:hover{color:var(--t-text);background:color-mix(in srgb,var(--t-accent) 10%,transparent)}
.td-sitelink.cta{background:var(--t-accent);color:#fff}
.td-sitelink.cta:hover{background:var(--t-accent);filter:brightness(1.08)}
.td-header-in{max-width:var(--t-wrap);margin:0 auto;display:flex;align-items:center;gap:18px;padding:14px 22px}
.td-brand{display:flex;align-items:center;gap:11px;flex:none;min-width:0}
.td-logo{height:40px;max-width:150px;object-fit:contain}
.td-nombre{font-family:var(--t-disp);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-search{flex:1;position:relative}
.td-search::before{content:'';position:absolute;left:16px;top:50%;width:15px;height:15px;transform:translateY(-50%);background:var(--t-text2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3-3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3-3'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.6}
.td-search input{width:100%;padding:11px 16px 11px 40px;border:1px solid var(--t-border);border-radius:999px;font-size:14px;font-family:inherit;outline:none;background:var(--t-bg);color:var(--t-text);transition:border-color .15s,box-shadow .15s}
.td-search input::placeholder,.td-inp::placeholder{color:var(--t-text2);opacity:.8}
.td-search input:focus{border-color:var(--t-accent);box-shadow:0 0 0 3px var(--t-soft2)}
.td-cart-btn{flex:none;background:var(--t-accent);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .12s,filter .15s}
.td-cart-btn:hover{filter:brightness(1.06)}
.td-cart-btn:active{transform:scale(.96)}
.td-cart-count{background:#fff;color:var(--t-ink);border-radius:999px;min-width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;padding:0 6px}
.td-cats{max-width:var(--t-wrap);margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:0 22px 12px}
.td-cats-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.td-cats-row::-webkit-scrollbar{display:none}
.td-subcats{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Ruta (breadcrumb): SIEMPRE una línea con scroll horizontal — nunca crece hacia abajo. */
.td-crumbs{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.td-crumbs::-webkit-scrollbar{display:none}
/* Chip «+N más»: abre el panel con buscador cuando hay muchas subcategorías. */
.td-subcat-more{background:transparent;border-style:dashed;color:var(--t-ink)}
.td-subcat-more:hover{background:var(--t-soft)}
/* Panel de subcategorías: buscador + chips con ALTO MÁXIMO (no tapa los productos). */
.td-subpanel{border:1px solid var(--t-border);border-radius:var(--t-r);background:var(--t-card);padding:9px}
.td-subpanel-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.td-subpanel-head input{flex:1;min-width:0;padding:8px 13px;border:1px solid var(--t-border);border-radius:999px;background:var(--t-bg);color:var(--t-text);font-size:13px;font-family:inherit;outline:none}
.td-subpanel-head input:focus{border-color:var(--t-accent);box-shadow:0 0 0 3px var(--t-soft2)}
.td-subcats-scroll{max-height:44vh;overflow-y:auto;align-content:flex-start}
.td-subpanel-none{font-size:12.5px;color:var(--t-text2);padding:6px 2px}
.td-subcat-chip{flex:none;background:var(--t-card,#f1f1f4);border:1px solid var(--t-border);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--t-text2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.td-subcat-chip:hover{color:var(--t-ink)}
.td-subcat-chip.active{background:var(--t-accent);border-color:var(--t-accent);color:#fff}
.td-crumb-sep{color:var(--t-text2);font-size:13px;opacity:.6}
.td-cat-chip{flex:none;background:transparent;border:none;border-radius:999px;padding:7px 4px;margin:0 8px;font-size:14px;font-weight:600;color:var(--t-text2);cursor:pointer;white-space:nowrap;position:relative;transition:color .15s}
.td-cat-chip:hover{color:var(--t-text)}
.td-cat-chip.active{color:var(--t-ink)}
.td-cat-chip.active::after{content:'';position:absolute;left:4px;right:4px;bottom:-1px;height:2.5px;border-radius:3px;background:var(--t-accent)}

/* Catálogo */
.td-main{max-width:var(--t-wrap);margin:0 auto;padding:26px 22px 80px}
.td-cat-titulo{font-family:var(--t-disp);font-size:27px;font-weight:700;letter-spacing:-.02em;margin-bottom:20px}
.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.td-card{background:var(--t-card);border:1px solid var(--t-border);border-radius:var(--t-r);overflow:hidden;cursor:pointer;box-shadow:0 1px 2px color-mix(in srgb,var(--t-ink) 7%,transparent);transition:transform .16s ease,box-shadow .16s ease,border-color .16s;display:flex;flex-direction:column}
.td-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px color-mix(in srgb,var(--t-accent) 30%,transparent);border-color:color-mix(in srgb,var(--t-accent) 35%,var(--t-border))}
.td-card:focus-visible,.td-card-add:focus-visible,.tdv-cat:focus-visible,.td-cat-chip:focus-visible,.td-cart-btn:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
.td-card-imgwrap{aspect-ratio:1;overflow:hidden;background:var(--t-ph)}
.td-card-img{aspect-ratio:1;object-fit:contain;width:100%;height:100%;transition:transform .4s ease}
.td-card:hover .td-card-img{transform:scale(1.05)}
.td-card-img-ph{aspect-ratio:1;background:var(--t-ph);display:flex;align-items:center;justify-content:center;font-size:34px;opacity:.5}
.td-card-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:3px;flex:1}
.td-card-marca{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t-text2)}
.td-card-title{font-size:14px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.td-compat{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.td-compat-lbl{font-size:11px;color:var(--t-text2)}
.td-compat-chip{font-size:11px;font-weight:500;color:var(--t-text2);background:color-mix(in srgb,var(--t-ink) 7%,transparent);border:1px solid color-mix(in srgb,var(--t-ink) 14%,transparent);padding:2px 9px;border-radius:20px;white-space:nowrap}
.td-compat-lg{margin:12px 0;padding:8px 11px;border-radius:10px;background:color-mix(in srgb,var(--t-accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--t-accent) 22%,transparent)}
.td-compat-lg .td-compat-lbl{font-size:12.5px;color:var(--t-ink)}
.td-compat-lg .td-compat-chip{color:var(--t-ink)}
.td-card-price{font-family:var(--t-disp);font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--t-ink);margin-top:6px}
.td-vacio{text-align:center;color:var(--t-text2);padding:60px 0}

/* ── Filtros (facetas) ── */
.td-cat-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.td-cat-bar .td-cat-titulo{margin-bottom:0}
.td-filtros-btn{display:none;align-items:center;gap:7px;background:var(--t-card);border:1px solid var(--t-border);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;color:var(--t-text);cursor:pointer;font-family:inherit}
.td-fbadge{background:var(--t-accent);color:#fff;border-radius:999px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:0 5px}
.td-catalog{display:flex;align-items:flex-start;gap:26px}
.td-grid-col{flex:1;min-width:0}
.td-filtros{width:226px;flex:none;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto}
.td-filtros-head{display:none;align-items:center;justify-content:space-between;margin-bottom:8px}
.td-filtros-head b{font-family:var(--t-disp);font-size:18px}
.td-fclear{display:block;width:100%;background:none;border:1px dashed var(--t-border);border-radius:var(--t-r-sm);color:var(--t-text2);padding:7px;font-size:12.5px;font-weight:600;cursor:pointer;margin-bottom:12px;font-family:inherit}
.td-fclear:hover{color:var(--t-accent);border-color:var(--t-accent)}
.td-fnone{color:var(--t-text2);font-size:13px;padding:8px 0}
.td-fsec{border-bottom:1px solid var(--t-border);padding:4px 0}
.td-fsec-h{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:9px 2px;font-size:13.5px;font-weight:700;color:var(--t-text);cursor:pointer;font-family:inherit}
.td-fchev{color:var(--t-text2);font-size:11px;transition:transform .15s}
.td-fsec.td-fcol .td-fsec-b{display:none}
.td-fsec.td-fcol .td-fchev{transform:rotate(-90deg)}
.td-fsec-b{display:flex;flex-direction:column;gap:3px;padding:2px 2px 10px}
.td-fopt,.td-fcolor{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:var(--t-r-sm);cursor:pointer;font-size:13px;background:none;border:none;color:var(--t-text);text-align:left;font-family:inherit;width:100%}
.td-fopt:hover,.td-fcolor:hover{background:var(--t-tint)}
.td-fopt input{accent-color:var(--t-accent);width:15px;height:15px;flex:none}
.td-fcname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-fcount{color:var(--t-text2);font-size:11.5px}
.td-fcolor.on .td-fcname,.td-fopt.on .td-fcname{font-weight:700;color:var(--t-ink)}
.td-sw{width:16px;height:16px;border-radius:50%;border:1px solid color-mix(in srgb,var(--t-ink) 20%,transparent);flex:none}
.td-fcolor.on .td-sw{box-shadow:0 0 0 2px var(--t-card),0 0 0 4px var(--t-accent)}
.td-fprice{display:flex;align-items:center;gap:8px;padding:2px}
.td-fprice input{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--t-border);border-radius:var(--t-r-sm);font-size:13px;font-family:inherit;background:var(--t-bg);color:var(--t-text);outline:none}
.td-fprice input:focus{border-color:var(--t-accent)}
.td-fprice span{color:var(--t-text2)}
.td-fbackdrop{display:none}
/* Especificaciones en el detalle */
.td-specs{display:flex;flex-direction:column;gap:6px;margin:14px 0;padding:12px 14px;background:var(--t-tint);border-radius:var(--t-r-sm);font-size:13.5px}
.td-spec-row{display:flex;gap:10px}
.td-spec-k{color:var(--t-text2);min-width:120px;font-weight:600}
.td-spec-v{flex:1;font-weight:600}
.td-spec-color{display:inline-flex;align-items:center;gap:5px;margin-right:8px}
/* Filtros en móvil: botón + drawer lateral */
@media(max-width:820px){
  /* El botón de Filtros se mudó a la barra inferior (#tdBbFiltros); aquí ya no se muestra. */
  .td-catalog{gap:0}
  .td-filtros{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;max-height:none;z-index:60;background:var(--t-card);border-right:1px solid var(--t-border);padding:18px 18px 40px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .td-catalog.td-filtros-open .td-filtros{transform:none}
  .td-filtros-head{display:flex}
  .td-fbackdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  .td-catalog.td-filtros-open .td-fbackdrop{opacity:1;pointer-events:auto}
}

/* Footer */
.td-footer{background:var(--t-card);border-top:1px solid var(--t-border);padding:34px 22px;color:var(--t-text2);font-size:13.5px}
.td-footer-in{max-width:var(--t-wrap);margin:0 auto;display:flex;flex-direction:column;gap:7px}
.td-footer b{color:var(--t-text);font-family:var(--t-disp);font-weight:700;font-size:16px}

/* Botones */
.td-btn{border:none;border-radius:var(--t-r);padding:13px 18px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;width:100%;transition:filter .15s,transform .12s}
.td-btn-primary{background:var(--t-accent);color:#fff}
.td-btn-primary:hover{filter:brightness(1.06)}
.td-btn-primary:active{transform:scale(.99)}
.td-btn:disabled{opacity:.45;cursor:not-allowed}

/* Modales */
.td-modal-bg{position:fixed;inset:0;background:color-mix(in srgb,var(--t-ink) 55%,rgba(0,0,0,.55));z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;animation:tdfade .2s ease}
@keyframes tdfade{from{opacity:0}to{opacity:1}}
.td-modal{background:var(--t-card);border-radius:18px;max-width:780px;width:100%;max-height:92vh;overflow-y:auto;position:relative;padding:26px;animation:tdpop .22s cubic-bezier(.2,.8,.3,1)}
@keyframes tdpop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.td-modal-sm{max-width:430px}
.td-modal-x{position:absolute;top:14px;right:14px;background:var(--t-bg);border:none;border-radius:50%;width:34px;height:34px;font-size:15px;cursor:pointer;color:var(--t-text2);transition:background .15s}
.td-modal-x:hover{background:var(--t-border)}
.td-modal h3{font-family:var(--t-disp);font-weight:700;font-size:20px;margin-bottom:4px}
.td-det{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.td-det-imgs{display:flex;flex-direction:column;gap:10px}
.td-det-main{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--t-r);background:var(--t-ph)}
.td-det-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.td-det-thumbs img{width:58px;height:58px;object-fit:cover;border-radius:9px;border:1px solid var(--t-border);cursor:pointer;transition:border-color .15s}
.td-det-thumbs img:hover{border-color:var(--t-accent)}
.td-det h2{font-family:var(--t-disp);font-weight:700;font-size:23px;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px}
.td-det-price{font-family:var(--t-disp);font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--t-ink);margin:12px 0}
.td-det-desc{color:var(--t-text2);font-size:14.5px;line-height:1.6;white-space:pre-wrap}
.td-acc{border:1px solid var(--t-border);border-radius:var(--t-r);margin-top:14px;overflow:hidden}
.td-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;background:transparent;border:none;color:var(--t-ink);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;text-align:left}
.td-acc-chev{transition:transform .2s;color:var(--t-text2);flex:none}
.td-acc.open .td-acc-chev{transform:rotate(180deg)}
.td-acc-body{display:none;padding:0 16px 14px}
.td-acc.open .td-acc-body{display:block}
.td-qty{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.td-qty button{width:38px;height:38px;border:1px solid var(--t-border);background:var(--t-bg);color:var(--t-text);border-radius:10px;font-size:19px;cursor:pointer;transition:border-color .15s}
.td-qty button:hover{border-color:var(--t-accent)}
.td-qty input{width:56px;text-align:center;padding:8px;border:1px solid var(--t-border);border-radius:10px;font-size:15px;font-family:inherit;background:var(--t-bg);color:var(--t-text)}
.td-modal-share{position:absolute;top:14px;left:14px;z-index:2;background:var(--t-bg);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t-text2);transition:background .15s,color .15s}
.td-modal-share:hover{background:var(--t-border);color:var(--t-accent)}
.td-modal-share-ok{position:absolute;left:42px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--t-ink);color:var(--t-card);font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
.td-modal-share.copiado .td-modal-share-ok{opacity:1}
@media(max-width:560px){.td-det{grid-template-columns:1fr}}

/* Inputs checkout */
.td-lbl{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}
.td-inp{width:100%;padding:11px 13px;border:1px solid var(--t-border);border-radius:10px;font-size:14px;outline:none;font-family:inherit;background:var(--t-bg);color:var(--t-text);transition:border-color .15s,box-shadow .15s}
.td-inp:focus{border-color:var(--t-accent);box-shadow:0 0 0 3px var(--t-soft2)}
.td-muted{color:var(--t-text2);font-size:13px;margin-bottom:6px}
.td-err{color:#dc2626;font-size:13px;min-height:18px;margin:6px 0}

/* Carrito drawer */
.td-drawer-bg{position:fixed;inset:0;background:color-mix(in srgb,var(--t-ink) 50%,rgba(0,0,0,.5));z-index:50;display:flex;justify-content:flex-end;animation:tdfade .2s ease}
.td-drawer{background:var(--t-card);width:400px;max-width:92vw;height:100%;display:flex;flex-direction:column;animation:tdslide .25s cubic-bezier(.2,.8,.3,1)}
@keyframes tdslide{from{transform:translateX(40px);opacity:.5}to{transform:none;opacity:1}}
.td-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--t-border)}
.td-drawer-head b{font-family:var(--t-disp);font-weight:700;font-size:18px}
.td-cart-items{flex:1;overflow-y:auto;padding:14px 20px}
.td-cart-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--t-border)}
.td-cart-row img{width:54px;height:54px;object-fit:cover;border-radius:10px;background:var(--t-ph);flex:none}
.td-cart-row-info{flex:1;min-width:0}
.td-cart-row-title{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-cart-row-price{font-family:var(--t-disp);font-size:14px;color:var(--t-ink);font-weight:700;margin-top:1px}
.td-cart-qty{display:flex;align-items:center;gap:7px}
.td-cart-qty button{width:28px;height:28px;border:1px solid var(--t-border);background:var(--t-bg);color:var(--t-text);border-radius:7px;cursor:pointer;transition:border-color .15s}
.td-cart-qty button:hover{border-color:var(--t-accent)}
.td-cart-empty{text-align:center;color:var(--t-text2);padding:48px 0}
.td-cart-foot{border-top:1px solid var(--t-border);padding:18px 20px;display:flex;flex-direction:column;gap:13px}
.td-cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:16px}
.td-cart-total b{font-family:var(--t-disp);font-size:22px;font-weight:800;color:var(--t-ink)}

/* Hero / banners */
#tdHero{max-width:var(--t-wrap);margin:0 auto;padding:18px 22px 0}
.td-hero-carrusel{position:relative;border-radius:var(--t-r);overflow:hidden;aspect-ratio:1580/300;background:var(--t-ph)}
.td-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.td-hero-img.on{opacity:1}
.td-hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:color-mix(in srgb,var(--t-ink) 55%,rgba(0,0,0,.4));color:#fff;border:none;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1;transition:background .15s}
.td-hero-nav:hover{background:var(--t-ink)}
.td-hero-prev{left:12px}.td-hero-next{right:12px}
.td-hero-text{position:relative;border-radius:var(--t-r);padding:42px 34px;background:var(--t-soft);overflow:hidden}
.td-hero-text::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--t-accent)}
.td-hero-title{font-family:var(--t-disp);font-size:30px;font-weight:800;letter-spacing:-.025em;color:var(--t-ink);line-height:1.1}
.td-hero-sub{color:var(--t-text2);margin-top:8px;font-size:15px;max-width:48ch}

/* Referencia (id chico) en el detalle: discreta, bajo el título */
.td-det-ref{font-size:11px;color:var(--t-text2);opacity:.7;letter-spacing:.02em;margin-top:4px}

/* Precio rebaja / stock */
.td-card-price-row,.td-det-price-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:6px}
.td-det-price-row{margin:12px 0}
.td-price-old{text-decoration:line-through;color:var(--t-text2);font-size:14px}
.td-off{font-family:var(--t-disp);font-size:13px;font-weight:700;color:var(--t-ink);background:var(--t-soft);padding:1px 8px;border-radius:999px;align-self:center}
.td-det-price-row .td-off{font-size:15px;padding:2px 11px}

/* Compra rápida (botón en la tarjeta) */
.td-card-add{margin-top:11px;width:100%;border:1px solid var(--t-accent);background:transparent;color:var(--t-ink);border-radius:10px;padding:9px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.td-card-add:hover{background:var(--t-accent);color:#fff}
[data-modo="oscuro"] .td-card-add{color:var(--t-ink)}
[data-modo="oscuro"] .td-card-add:hover{color:#0f1116}
.td-stock{display:inline-block;font-size:11px;font-weight:600;margin-top:6px;padding:2px 9px;border-radius:999px;width:fit-content}
.td-stock-si{background:#e1f5ee;color:#0f6e56}
.td-stock-no{background:#faece7;color:#993c1d}
.td-card.td-agotado{opacity:.65}
.td-no-pedir{background:#faece7;color:#993c1d;border-radius:var(--t-r);padding:12px 14px;font-size:13.5px;font-weight:600}

/* Variantes agrupadas */
.td-card-desde{font-size:12px;color:var(--t-text2);font-weight:600;align-self:center}
.td-card-sw{display:flex;align-items:center;gap:5px;margin-top:8px;flex-wrap:wrap}
.td-sw-sm{width:14px;height:14px}
.td-sw-more{font-size:11px;font-weight:700;color:var(--t-text2)}
.td-var-sel{margin:14px 0}
.td-var-lbl{font-size:12px;font-weight:700;color:var(--t-text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.td-var-chips{display:flex;flex-wrap:wrap;gap:8px}
.td-var-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1.5px solid var(--t-border);background:var(--t-card);color:var(--t-ink);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.td-var-chip:hover{border-color:var(--t-accent)}
.td-var-chip.on{border-color:var(--t-accent);background:var(--t-tint)}
.td-var-chip .td-sw{width:15px;height:15px}
.td-var-chip.td-var-agot{opacity:.5;text-decoration:line-through}
.td-var-chip.td-var-static{cursor:default}
.td-var-chip.td-var-static:hover{border-color:var(--t-border)}

/* Redes / horario en footer */
.td-soc{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.td-soc-link{font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--t-soft);color:var(--t-ink);transition:background .15s}
.td-soc-link:hover{background:var(--t-soft2)}
.td-abierto{font-size:12.5px;font-weight:600;color:var(--t-green)}
.td-cerrado{font-size:12.5px;font-weight:600;color:#dc2626}


/* ── Tema Vitrina: página de inicio por secciones ── */
#tdVitrina{max-width:var(--t-wrap);margin:0 auto;padding:18px 22px 0}
.tdv-sec{margin:54px 0}
.tdv-title{font-family:var(--t-disp);font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.025em;margin-bottom:20px;position:relative}
/* Acento editorial bajo los títulos de sección (ritmo visual) */
.tdv-title:not(.tdv-title-c)::after{content:'';display:block;width:44px;height:3px;border-radius:3px;background:var(--t-accent);margin-top:10px}
.tdv-title-c{text-align:center}
.tdv-title-c::after{content:'';display:block;width:44px;height:3px;border-radius:3px;background:var(--t-accent);margin:10px auto 0}
.tdv-carrusel{position:relative;border-radius:var(--t-r);overflow:hidden;aspect-ratio:1580/460;background:var(--t-ph);margin:22px 0}
/* Las diapositivas ocultas siguen en el DOM: con opacity:0 aún capturarían clics (su
   enlace/botón quedaría encima del banner visible). Solo la activa es interactiva. */
.tdv-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s;display:flex;align-items:center}
.tdv-slide.on{opacity:1;pointer-events:auto}
.tdv-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tdv-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.2) 48%,transparent 72%)}
/* Toda la imagen es el enlace del banner (si se configuró un URL): así puedes usar solo
   la imagen, sin botón encima. Va DEBAJO del texto/botón (z-2) y de las flechas (z-4),
   para que esos sigan siendo clicables por su cuenta. */
.tdv-slide-link{position:absolute;inset:0;z-index:1;display:block;cursor:pointer}
.tdv-slide-cap{position:relative;z-index:2;padding:0 0 0 7%;max-width:60%;color:#fff}
.tdv-slide-t{font-family:var(--t-disp);font-size:clamp(24px,4vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.tdv-slide-d{font-size:clamp(14px,1.6vw,18px);margin-top:10px;opacity:.95;max-width:42ch}
.tdv-slide-btn{display:inline-block;margin-top:20px;background:var(--t-accent);color:#fff;padding:12px 28px;border-radius:999px;font-weight:600;transition:filter .15s}
.tdv-slide-btn:hover{filter:brightness(1.08)}
/* Banner de solo imagen: el botón es el único contenido → sin margen que descuadre el centrado. */
.tdv-car-img .tdv-slide-btn{margin-top:0}
.tdv-banners{display:grid;gap:16px;margin:22px 0}
.tdv-banners img{width:100%;border-radius:var(--t-r);object-fit:cover}
.tdv-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tdv-cat{position:relative;aspect-ratio:16/10;border-radius:var(--t-r);overflow:hidden;background:var(--t-ph);cursor:pointer;display:flex;align-items:flex-end;box-shadow:0 1px 2px color-mix(in srgb,var(--t-ink) 7%,transparent);transition:transform .16s ease,box-shadow .16s ease}
.tdv-cat:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--t-ink) 38%,transparent)}
.tdv-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tdv-cat:hover img{transform:scale(1.06)}
.tdv-cat-ph{position:absolute;inset:0;background:var(--t-soft)}
.tdv-cat>span{position:relative;z-index:2;width:100%;padding:14px 16px;font-family:var(--t-disp);font-weight:700;font-size:19px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.tdv-marcas-sec{padding:8px 0}
.tdv-marcas{display:flex;flex-wrap:wrap;gap:30px 44px;align-items:center;justify-content:center}
.tdv-marcas img{height:42px;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:opacity .2s,filter .2s}
.tdv-marcas img:hover{filter:none;opacity:1}
@media(max-width:680px){
  #tdVitrina{padding:14px 16px 0}
  .tdv-sec{margin:28px 0}
  .tdv-title{font-size:21px;margin-bottom:14px}
  /* Con texto encima, el banner es fondo: se alarga (3/2) para que quepa el título/botón. */
  .tdv-carrusel{aspect-ratio:3/2}
  /* Solo imagen (texto dentro del banner): NO recortar — el JS le pone la proporción real
     de la imagen; este 1580/460 es solo el respaldo mientras carga. */
  .tdv-carrusel.tdv-car-img{aspect-ratio:1580/460}
  /* Banner bajo en celular: el botón se achica para caber sin tapar la imagen. */
  .tdv-car-img .tdv-slide-btn{padding:8px 16px;font-size:12.5px}
  .tdv-slide-cap{max-width:82%;padding-left:6%}
  .tdv-cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .tdv-marcas{gap:22px 30px}
  .tdv-marcas img{height:32px}
}

/* ── Modo oscuro (personalizable por el admin: claro / oscuro / auto) ── */
body[data-modo="oscuro"]{
  --t-bg:#0f1116; --t-card:#181b22; --t-text:#f1f3f6; --t-text2:#99a0ad;
  --t-border:#272b34;
  --t-ink:color-mix(in srgb, var(--t-accent) 30%, #fff);
  --t-soft:color-mix(in srgb, var(--t-accent) 20%, #181b22);
  --t-soft2:color-mix(in srgb, var(--t-accent) 32%, #181b22);
  --t-tint:color-mix(in srgb, var(--t-accent) 12%, #0f1116);
  --t-ph:color-mix(in srgb, var(--t-accent) 10%, #20242d);
}
body[data-modo="oscuro"] .td-cart-count{color:color-mix(in srgb,var(--t-accent) 62%,#000)}
body[data-modo="oscuro"] .td-stock-si{background:color-mix(in srgb,#0f6e56 28%,#181b22);color:#7fe0c2}
body[data-modo="oscuro"] .td-stock-no{background:color-mix(in srgb,#993c1d 30%,#181b22);color:#f0a98c}
body[data-modo="oscuro"] .td-no-pedir{background:color-mix(in srgb,#993c1d 26%,#181b22);color:#f0a98c}

/* Responsive */
@media(max-width:680px){
  .td-header-in{gap:12px;padding:12px 16px;flex-wrap:wrap}
  /* Móvil: 1) logo · 2) buscador (renglón completo) · 3) carrito + "Entrar" (mismo renglón). */
  .td-brand{order:1}
  .td-search{order:2;flex-basis:100%}
  .td-cart-btn{order:3;margin-left:0}
  .td-nombre{font-size:18px}
  .td-cats{padding:0 16px 11px}
  /* Celular: el panel de subcategorías nunca ocupa más de ~1/3 de pantalla. */
  .td-subcats-scroll{max-height:34vh}
  .td-sitebar-in{padding:6px 16px}
  .td-main{padding:20px 16px 70px}
  .td-cat-titulo{font-size:22px}
  .td-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
  .td-hero-text{padding:30px 22px}
  .td-hero-title{font-size:23px}
  #tdHero{padding:14px 16px 0}
}

/* Entrada escalonada de tarjetas y mosaicos (stagger 30–50ms; UI/UX Pro Max) */
@keyframes tdreveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.td-grid .td-card,.tdv-cats .tdv-cat{animation:tdreveal .42s cubic-bezier(.2,.8,.3,1) both}
.td-grid .td-card:nth-child(1),.tdv-cats .tdv-cat:nth-child(1){animation-delay:.02s}
.td-grid .td-card:nth-child(2),.tdv-cats .tdv-cat:nth-child(2){animation-delay:.06s}
.td-grid .td-card:nth-child(3),.tdv-cats .tdv-cat:nth-child(3){animation-delay:.10s}
.td-grid .td-card:nth-child(4),.tdv-cats .tdv-cat:nth-child(4){animation-delay:.14s}
.td-grid .td-card:nth-child(5),.tdv-cats .tdv-cat:nth-child(5){animation-delay:.18s}
.td-grid .td-card:nth-child(6),.tdv-cats .tdv-cat:nth-child(6){animation-delay:.22s}
.td-grid .td-card:nth-child(7),.tdv-cats .tdv-cat:nth-child(7){animation-delay:.26s}
.td-grid .td-card:nth-child(n+8),.tdv-cats .tdv-cat:nth-child(n+8){animation-delay:.30s}

/* Accesibilidad: respeta reduce-motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .td-card:hover,.tdv-cat:hover{transform:none}
  .td-card:hover .td-card-img{transform:none}
  .td-grid .td-card,.tdv-cats .tdv-cat{animation:none}
}

/* ── Portal de clientes: botón "Entrar/Mi cuenta" + login + Mi cuenta ── */
.td-cuenta-btn{flex:none;background:transparent;color:var(--t-accent2);border:1px solid var(--t-border);border-radius:999px;padding:9px 15px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.td-cuenta-btn:hover{background:var(--t-soft);border-color:var(--t-accent)}
.td-btn-ghost{background:transparent;border:1px solid var(--t-border);color:var(--t-text);width:auto;padding:9px 16px;font-size:14px}
.td-btn-ghost:hover{background:var(--t-soft)}
.td-login-ayuda{text-align:center;margin-top:13px;font-size:13px}
.td-login-ayuda a{color:var(--t-text2);text-decoration:none}
.td-login-ayuda a:hover{color:var(--t-accent);text-decoration:underline}
.td-cuenta-hola{font-size:16px;margin:2px 0 15px}
.td-badge-may{display:inline-block;background:var(--t-accent);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;vertical-align:middle;margin-left:5px}
/* Variante chica del badge para el renglón de precio (tarjeta/detalle) */
.td-badge-may-sm{font-size:9.5px;padding:1px 7px;margin-left:2px;letter-spacing:.02em;text-transform:uppercase}
/* Aviso fijo bajo el header: el cliente está viendo precios de mayoreo */
.td-may-banner{max-width:var(--t-wrap);margin:0 auto;padding:8px 22px;font-size:13px;font-weight:600;color:var(--t-ink);background:var(--t-soft);border-bottom:1px solid var(--t-border);display:flex;align-items:center;gap:8px}
.td-may-banner b{font-weight:800}
.td-may-dot{color:var(--t-accent);font-size:10px;line-height:1}
@media(max-width:680px){ .td-may-banner{padding:7px 16px;font-size:12px} }

/* ══ ENVÍOS (Fase 1, v3.159.0): listón de envío gratis + checkout con entrega ══ */
.td-env-banner{text-align:center;padding:6px 14px;font-size:13px;font-weight:600;color:#fff;background:var(--t-accent)}
.td-env-banner b{font-weight:800}
@media(max-width:680px){ .td-env-banner{padding:5px 10px;font-size:12px} }
.td-ent-radios{display:flex;flex-direction:column;gap:7px;margin:2px 0 10px;font-size:14px}
.td-ent-radios label{display:flex;align-items:center;gap:8px;cursor:pointer}
.td-ent-radios input{accent-color:var(--t-accent)}
.td-env-resumen{margin:10px 0 4px}
.td-env-linea{display:flex;justify-content:space-between;font-size:13.5px;padding:2px 0;color:var(--t-text2)}
.td-env-linea .td-env-gratis{color:#1d9e75;font-weight:800}
.td-env-total{font-size:15px;font-weight:800;color:var(--t-ink);border-top:1px solid var(--t-border);margin-top:5px;padding-top:7px}

/* ══ PAGOS EN LÍNEA (Fase 2, v3.160.0): botón de pago + modal de estado ══ */
.td-btn-pay{margin-top:8px;background:#009ee3;color:#fff}   /* azul Mercado Pago */
.td-btn-pay:hover{filter:brightness(1.08)}
.td-btn-pay:disabled{opacity:.65;cursor:default}
.td-pago{text-align:center;padding-top:30px}
.td-pago-ico{font-size:46px;margin-bottom:8px}
.td-pago h3{margin:0 0 6px}

/* ══ NAVEGACIÓN MÓVIL/TABLET (≤1024px): barra inferior + header que se condensa ══ */
/* Barra inferior fija: Menú · Carrito · Cuenta. Oculta en escritorio. */
.td-bottombar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:stretch;gap:4px;
  background:var(--t-card);border-top:1px solid var(--t-border);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 20px color-mix(in srgb,var(--t-ink) 14%,transparent)}
.td-bb-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;color:var(--t-text2);font-family:inherit;font-size:11px;font-weight:600;
  cursor:pointer;padding:6px 4px;border-radius:12px;transition:background .15s,color .15s}
.td-bb-btn:active{background:var(--t-soft)}
.td-bb-btn:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px}
/* Oculta un botón de la barra (p. ej. Filtros en la portada, donde no hay catálogo). */
.td-bb-hide{display:none}
/* Arriba de 820px los filtros son barra lateral fija → el botón no hace falta. */
@media(min-width:821px){ #tdBbFiltros{display:none} }
.td-bb-ic{position:relative;font-size:20px;line-height:1}
.td-bb-cart{color:var(--t-ink)}
.td-bb-cart .td-bb-ic{font-size:23px}
/* Contador como globo sobre el carrito (comparte la clase .td-cart-count del header). */
.td-bb-badge{position:absolute;top:-5px;right:-11px;background:var(--t-accent);color:#fff;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* Hoja inferior del menú del sitio. */
.td-sheet-bg{align-items:flex-end;padding:0}
.td-sheet{background:var(--t-card);border-radius:18px 18px 0 0;width:100%;max-width:560px;margin:0 auto;
  padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:tdsheet .22s ease}
@keyframes tdsheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
.td-sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:16px}
.td-sheet-link{display:block;padding:13px 14px;margin-bottom:8px;border:1px solid var(--t-border);
  border-radius:12px;color:var(--t-text);text-decoration:none;font-weight:600;font-size:15px}
.td-sheet-link:hover{background:var(--t-soft)}
.td-sheet-link.cta{background:var(--t-accent);border-color:var(--t-accent);color:#fff;text-align:center}

@media(max-width:1024px){
  .td-bottombar{display:flex}
  /* Espacio para que la barra no tape el footer ni la última fila de productos. */
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  /* Estos tres se mudaron a la barra inferior / hoja del menú. */
  .td-sitebar{display:none}
  .td-cart-btn,.td-cuenta-anchor{display:none}
  /* Header condensado al bajar: se van el logo y las categorías, queda el buscador.
     Se usa display:none (no max-height) para no recortar el panel de subcategorías,
     que puede medir hasta 34vh de alto con su propio scroll. */
  .td-header--min .td-brand{display:none}
  .td-header--min .td-cats{display:none}
  .td-header--min .td-header-in{padding-top:8px;padding-bottom:8px}
}
/* El drawer de filtros llega a bottom:0: deja aire para que su último filtro
   no quede escondido detrás de la barra inferior. */
@media(max-width:820px){
  .td-filtros{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

.td-cuenta-card{background:var(--t-tint);border:1px solid var(--t-border);border-radius:var(--t-r);padding:14px 16px;margin-bottom:12px}
.td-cc-t{font-weight:700;font-size:14px;margin-bottom:6px}
.td-cc-big{font-family:var(--t-disp);font-size:28px;font-weight:800;color:var(--t-ink);line-height:1}
.td-cc-sub{color:var(--t-text2);font-size:13px}
.td-cc-venc{color:#dc2626;font-weight:600}
/* Crédito: desglose (disponible/utilizado/vencido) + tickets pendientes */
.td-cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.td-cc-stat{display:flex;flex-direction:column;gap:2px;background:var(--t-bg);border:1px solid var(--t-border);border-radius:var(--t-r);padding:9px 11px;min-width:0}
.td-cc-stat span{color:var(--t-text2);font-size:11px}
.td-cc-stat b{font-family:var(--t-disp);font-size:19px;font-weight:800;color:var(--t-ink);line-height:1.05;font-variant-numeric:tabular-nums}
.td-cc-stat b.ok{color:#16a34a}
.td-cc-stat b.venc{color:#dc2626}
.td-cc-tks{margin-top:12px;border-top:1px solid var(--t-border);padding-top:6px}
.td-cc-tk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--t-border)}
.td-cc-tk:last-child{border-bottom:none}
.td-cc-tk .tk-id{font-weight:700;font-size:13.5px;color:var(--t-ink)}
.td-cc-tk .tk-sub{color:var(--t-text2);font-size:12px;margin-top:1px}
.td-cc-tk .tk-m{font-weight:800;font-size:15px;color:var(--t-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.td-cuenta-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.td-cuenta-email{color:var(--t-text2);font-size:12px;word-break:break-all}
/* Página «Mi cuenta» (v3.175.0): modal más ancho + pestañas + Mis datos/Mis pedidos */
.td-modal-cuenta{max-width:520px}
.td-cuenta-tabs{display:flex;gap:4px;border-bottom:1px solid var(--t-border);margin:0 0 14px}
.td-cuenta-tab{flex:1;padding:9px 6px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--t-text2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.td-cuenta-tab.on{color:var(--t-accent);border-bottom-color:var(--t-accent)}
.td-cuenta-cont{min-height:60px}
.td-cc-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--t-border);font-size:13.5px}
.td-cc-kv:last-child{border-bottom:none}
.td-cc-kv span{color:var(--t-text2)}
.td-cc-kv b{text-align:right;word-break:break-word}
.td-ped{background:var(--t-tint);border:1px solid var(--t-border);border-radius:var(--t-r);padding:11px 13px;margin-bottom:10px}
.td-ped-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.td-ped-id{font-weight:700;font-size:13.5px}
.td-ped-fecha{color:var(--t-text2);font-size:11.5px;white-space:nowrap}
.td-ped-est{margin:7px 0 5px}
.td-ped-pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-right:5px}
.td-ped-sub{color:var(--t-text2);font-size:12.5px}
.td-ped-sub b{color:var(--t-ink)}

/* ── Pestaña Consigna: buscador + lista con imagen y precios (v3.177.0) ── */
.td-cons-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.td-cons-print{flex:none;white-space:nowrap}
.td-cons-q{margin-bottom:12px}
.td-cons-lista{max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.td-cons-row{display:flex;gap:11px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--t-border)}
.td-cons-row:last-child{border-bottom:none}
.td-cons-im{flex:none;width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--t-ph);display:flex;align-items:center;justify-content:center}
.td-cons-im img{width:100%;height:100%;object-fit:cover}
.td-cons-ph{font-size:22px}
.td-cons-info{min-width:0;flex:1}
.td-cons-t{font-weight:600;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.td-cons-meta{color:var(--t-text2);font-size:12px;margin-top:2px}
.td-cons-meta b{color:var(--t-ink)}
.td-cons-id{font-variant-numeric:tabular-nums}
.td-cons-prs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.td-cons-pr{display:inline-flex;align-items:center;gap:5px;background:var(--t-bg);border:1px solid var(--t-border);border-radius:999px;padding:3px 9px;font-size:11.5px;line-height:1.2}
.td-cons-pr i{font-style:normal;color:var(--t-text2)}
.td-cons-pr b{font-variant-numeric:tabular-nums;color:var(--t-ink)}
.td-cons-pr-of b{color:#dc2626}
.td-cons-pr-may{background:var(--t-soft);border-color:transparent}
.td-cons-pr-may b{color:var(--t-accent)}

/* ── Menú desplegable del botón «Mi cuenta» (escritorio, v3.176.0) ── */
.td-cuenta-anchor{position:relative;flex:none}
.td-cuenta-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--t-card);
  border:1px solid var(--t-border);border-radius:12px;padding:6px;z-index:30;
  box-shadow:0 14px 34px -12px color-mix(in srgb,var(--t-ink) 45%,transparent);animation:tdpop .16s ease}
.td-cuenta-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--t-text);padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s}
.td-cuenta-menu button:hover{background:var(--t-soft)}
.td-cuenta-menu .td-cm-salir{color:#dc2626}
.td-cuenta-menu .td-cm-salir:hover{background:color-mix(in srgb,#dc2626 10%,transparent)}

/* ── Vista de PÁGINA «Mi cuenta» (reemplaza el modal; ruta #/cuenta) ──
   La clase .td-en-cuenta (en #tdApp) oculta el catálogo y muestra la vista. */
.td-cuenta-view{display:none}
.td-en-cuenta #tdHero,.td-en-cuenta #tdVitrina,.td-en-cuenta .td-main,
.td-en-cuenta #tdMayBanner,.td-en-cuenta #tdEnvBanner{display:none!important}
.td-en-cuenta .td-cuenta-view{display:block;animation:tdfade .2s ease}
.td-cuenta-page{max-width:760px;margin:0 auto;padding:26px 22px 90px}
.td-cuenta-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t-text2);margin-bottom:16px}
.td-cuenta-crumbs button{background:none;border:none;font:inherit;color:var(--t-text2);cursor:pointer;padding:0}
.td-cuenta-crumbs button:hover{color:var(--t-accent);text-decoration:underline}
.td-cuenta-crumbs b{color:var(--t-text);font-weight:600}
/* En página, encabezado y pestañas respiran más que en el viejo modal */
.td-cuenta-view .td-cuenta-hola{font-family:var(--t-disp);font-size:24px;font-weight:800;margin:0 0 18px}
.td-cuenta-view .td-cuenta-tabs{gap:6px}
.td-cuenta-view .td-cuenta-tab{flex:0 0 auto;padding:11px 18px;font-size:14px}
.td-cuenta-view .td-cuenta-foot{border-top:1px solid var(--t-border);padding-top:16px;margin-top:24px}

/* Móvil: "Entrar" va al final del renglón del carrito (alineado a la derecha), no arriba
   junto al logo. El orden del carrito lo fija el bloque de arriba (order:3). */
@media(max-width:680px){
  .td-cuenta-btn{order:4;margin-left:auto;padding:8px 14px}
  .td-cuenta-page{padding:18px 16px 90px}
  .td-cuenta-view .td-cuenta-hola{font-size:20px}
  .td-cuenta-view .td-cuenta-tab{flex:1 1 auto;padding:10px 8px}
}