/* ===================================================================
   TEMA TAT — dirección "Graphite"
   Única fuente de verdad de los valores visuales (color, tipografía,
   espaciado, radios, sombras). Se carga DESPUÉS del CSS del template
   (NiceAdmin/Bootstrap precompilados). NO editar archivos vendor:
   acá van tokens + overrides de selector puntuales donde el color está
   horneado en el CSS compilado.
   =================================================================== */

:root {
  /* Acento ADMIN = VERDE (demo "versión seria"). El STOREFRONT re-define estos tokens a su
     verde Graphite en body.tat-store (más abajo) → cada superficie con su acento; el admin
     usa un verde MÁS PROFUNDO en el chrome. Neutros y semánticos compartidos. */
  --tat-primary:#16864A; --tat-primary-hover:#106A3A; --tat-primary-tint:#E3F4EA; --tat-on-primary:#FFFFFF;
  --tat-primary-rgb:22,134,74;
  /* Acento VIVO (verde de la tienda) para destacar sobre el chrome profundo */
  --tat-accent:#34D399; --tat-accent-rgb:52,211,153;
  /* Superficies (neutro con un velo verde sutil) */
  --tat-body-bg:#F1F5F2; --tat-surface:#FFFFFF; --tat-border:#E5E9E6;
  /* Texto */
  --tat-text:#39423D; --tat-heading:#16201A; --tat-muted:#8A938C;
  /* Sidebar VERDE PROFUNDO con degradado vertical (oscuro → más profundo) */
  --tat-sidebar-bg:#0E3D2C;
  --tat-sidebar-grad:linear-gradient(180deg,#15563E 0%,#0E3D2C 58%,#0A3022 100%);
  --tat-sidebar-text:#C5D7CC; --tat-sidebar-muted:#7BA08D;
  --tat-sidebar-active-text:#FFFFFF;
  --tat-sidebar-active-bg:linear-gradient(90deg,rgba(52,211,153,.20),rgba(52,211,153,.03));
  --tat-sidebar-active-accent:var(--tat-accent);
  /* Topbar verde profundo — texto/iconos CLAROS sobre verde */
  --tat-topbar-bg:#0E3D2C;
  --tat-topbar-grad:linear-gradient(100deg,#124A36 0%,#0E3D2C 100%);
  --tat-topbar-border:rgba(255,255,255,.08); --tat-topbar-text:#E9F3EC;
  --tat-footer-grad:linear-gradient(180deg,#0E3D2C,#0A3022);
  /* Estados */
  --tat-success:#2E7D46; --tat-success-bg:#E6F2EA;
  --tat-warning:#B7791F; --tat-warning-bg:#FBF1DD;
  --tat-info:#2563EB;    --tat-info-bg:#E7EEFC;
  --tat-danger:#B42318;  --tat-danger-bg:#FBE9E7;
  /* Tipografía */
  --tat-font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tat-fs-base:14px; --tat-fs-h1:22px; --tat-fs-h2:18px; --tat-fs-sm:12.5px; --tat-fs-table-head:11.5px;
  --tat-fw-regular:400; --tat-fw-medium:500; --tat-fw-semibold:600;
  /* Forma / densidad — esquinas marcadas, casi sin sombra, compacto */
  --tat-radius:4px; --tat-radius-sm:3px; --tat-shadow:none; --tat-shadow-pop:0 1px 2px rgba(16,24,40,.06);
  --tat-cell-pad-y:.4rem; --tat-cell-pad-x:.6rem; --tat-control-h:36px;

  /* Puente hacia variables de Bootstrap 5.2 (lo que SÍ lee de --bs-*) */
  --bs-primary:var(--tat-primary);
  --bs-primary-rgb:var(--tat-primary-rgb);
  --bs-link-color:var(--tat-primary);
  --bs-link-hover-color:var(--tat-primary-hover);
  --bs-border-color:var(--tat-border);
  --bs-border-radius:var(--tat-radius);
  --bs-border-radius-sm:var(--tat-radius-sm);
  --bs-body-color:var(--tat-text);
  --bs-body-font-family:var(--tat-font);
}

/* -------------------------------------------------- Base */
body {
  font-family:var(--tat-font);
  background:var(--tat-body-bg);
  color:var(--tat-text);
  font-size:var(--tat-fs-base);
}
h1,h2,h3,h4,h5,h6 { font-family:var(--tat-font); color:var(--tat-heading); }
a { color:var(--tat-primary); }
a:hover { color:var(--tat-primary-hover); }
.text-muted, .small.text-muted { color:var(--tat-muted) !important; }

/* -------------------------------------------------- Topbar */
.header {
  background:var(--tat-topbar-grad, var(--tat-topbar-bg));
  box-shadow:0 2px 14px -6px rgba(8,40,28,.45);
  border-bottom:1px solid var(--tat-topbar-border);
}
.header .toggle-sidebar-btn { color:var(--tat-topbar-text); }
.header-nav .nav-profile { color:var(--tat-topbar-text); }
.header-nav .nav-profile span { color:var(--tat-topbar-text); }
.header .logo span { color:var(--tat-topbar-text); }
/* Wordmark "TAT" en el área de logo (reemplaza el logo-imagen del template) */
.header .logo .logo-wordmark {
  color:var(--tat-sidebar-active-text); font-weight:var(--tat-fw-semibold);
  font-size:1.2rem; letter-spacing:.14em;
}
/* Barra de bienvenida central del topbar (estructura firma POS, texto claro sobre marino) */
.header-welcome {
  position:absolute; left:50%; transform:translateX(-50%);
  color:var(--tat-topbar-text); font-size:var(--tat-fs-sm); white-space:nowrap;
}
.header-welcome .header-welcome__hi { font-weight:var(--tat-fw-semibold); }
.header-welcome .header-welcome__item { opacity:.85; }

/* Footer admin marino (3 zonas: marca · créditos · soporte), texto claro */
.footer {
  background:var(--tat-footer-grad, var(--tat-topbar-bg)); color:var(--tat-topbar-text);
  border-top:1px solid var(--tat-topbar-border); font-size:var(--tat-fs-sm); padding:.85rem 1.5rem;
}
.footer .footer-left strong { color:var(--tat-sidebar-active-text); font-weight:var(--tat-fw-semibold); }
.footer .footer-center { opacity:.9; }
.footer .footer-right a { color:var(--tat-topbar-text); text-decoration:none; opacity:.9; }
.footer .footer-right a:hover { opacity:1; color:var(--tat-sidebar-active-text); }
/* Footer ANCLADO al fondo: #main llena el alto disponible (header ~60px + footer ~46px),
   así el footer marino queda pegado al fondo aunque el contenido sea corto. */
#main { min-height: calc(100vh - 106px); }

/* -------------------------------------------------- Sidebar (oscuro) */
.sidebar {
  background:var(--tat-sidebar-grad, var(--tat-sidebar-bg));
  box-shadow:2px 0 22px -10px rgba(8,40,28,.5);
  border-right:1px solid rgba(255,255,255,.05);
}
.sidebar-nav .nav-heading { color:var(--tat-sidebar-muted); }

/* Links de primer nivel (parent y leaf usan .nav-link.collapsed) */
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
  color:var(--tat-sidebar-text);
  background:transparent;
  font-weight:var(--tat-fw-medium);
  border-radius:var(--tat-radius);
}
.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i { color:var(--tat-sidebar-muted); }

/* Hover y parent abierto (:not(.collapsed)) = estado activo con acento verde */
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:not(.collapsed) {
  color:var(--tat-sidebar-active-text);
  background:var(--tat-sidebar-active-bg);
  box-shadow:inset 3px 0 0 var(--tat-sidebar-active-accent);
}
.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link:not(.collapsed) i { color:var(--tat-accent); }

/* Sub-items (nav-content) */
.sidebar-nav .nav-content a { color:var(--tat-sidebar-text); font-weight:var(--tat-fw-regular); }
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active { color:var(--tat-sidebar-active-text); }
.sidebar-nav .nav-content a:hover i,
.sidebar-nav .nav-content a.active i { background-color:var(--tat-accent); }

/* -------------------------------------------------- Page title */
.pagetitle h1 { font-size:var(--tat-fs-h1); color:var(--tat-heading); font-weight:var(--tat-fw-semibold); }
.breadcrumb, .breadcrumb a { color:var(--tat-muted); }
.breadcrumb-item.active { color:var(--tat-text); }

/* -------------------------------------------------- Cards */
.card {
  background:var(--tat-surface);
  border:1px solid var(--tat-border);
  border-radius:var(--tat-radius);
  box-shadow:var(--tat-shadow);
}
.card-header, .card-footer { background-color:var(--tat-surface); border-color:var(--tat-border); color:var(--tat-text); }
.card-title { color:var(--tat-heading); font-family:var(--tat-font); font-size:var(--tat-fs-h2); font-weight:var(--tat-fw-semibold); }
/* DEMO — profundidad del ADMIN (no toca el storefront): cards que "flotan" + más respiración */
body:not(.tat-store) .card {
  border-radius:14px; border-color:#E8EDE9;
  box-shadow:0 10px 28px -18px rgba(13,50,35,.32), 0 1px 2px rgba(13,50,35,.04);
}
body:not(.tat-store) .card-body { padding:1.3rem 1.4rem; }

/* -------------------------------------------------- Dashboard (verde profundo, jerarquía) */
.tat-kpi-hero {
  background:linear-gradient(150deg,#15563E 0%,#0E3D2C 60%,#0A3022 100%);
  color:#EAF6EF; border-radius:18px; padding:1.5rem 1.6rem;
  box-shadow:0 18px 44px -22px rgba(10,48,34,.6); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.tat-kpi-hero::after { content:""; position:absolute; right:-40px; top:-50px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(52,211,153,.22),transparent 70%); }
.tat-kpi-hero__top { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.tat-kpi-hero__label { font-size:.8rem; letter-spacing:.05em; color:#A7D3BD; text-transform:uppercase; font-weight:600; }
.tat-kpi-hero__chip { font-size:.72rem; background:rgba(52,211,153,.16); color:#7CF2A6; border:1px solid rgba(52,211,153,.3); padding:.22rem .6rem; border-radius:999px; }
.tat-kpi-hero__value { font-size:2.7rem; font-weight:700; line-height:1.1; margin:.5rem 0 .25rem; color:#fff; position:relative; z-index:1; }
.tat-kpi-hero__meta { font-size:.85rem; color:#B9DBCA; position:relative; z-index:1; }
.tat-kpi-hero__spark { display:flex; align-items:flex-end; gap:7px; height:48px; margin-top:auto; padding-top:16px; position:relative; z-index:1; }
.tat-kpi-hero__spark span { flex:1; background:linear-gradient(180deg,#34D399,rgba(52,211,153,.22)); border-radius:4px 4px 0 0; min-height:8px; }

.tat-kpi {
  background:#fff; border:1px solid #E8EDE9; border-radius:14px; padding:1.15rem 1.2rem;
  box-shadow:0 10px 28px -18px rgba(13,50,35,.32); display:flex; flex-direction:column; gap:.12rem;
}
.tat-kpi__ic { width:38px; height:38px; border-radius:11px; background:var(--tat-primary-tint); color:var(--tat-primary); display:grid; place-items:center; font-size:1.15rem; margin-bottom:.45rem; }
.tat-kpi__label { font-size:.8rem; color:var(--tat-muted); font-weight:600; }
.tat-kpi__value { font-size:1.7rem; font-weight:700; color:var(--tat-heading); line-height:1.1; }
.tat-kpi__delta { font-size:.78rem; color:var(--tat-muted); }
.tat-kpi__delta.is-up { color:var(--tat-success); }
.tat-kpi__delta.is-down { color:var(--tat-danger); }

.tat-donut2 { width:170px; height:170px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; }
.tat-donut2__hole { width:106px; height:106px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; box-shadow:inset 0 0 0 1px #ECF1EE; }
.tat-donut2__num { display:block; font-size:1.7rem; font-weight:700; color:var(--tat-heading); }
.tat-donut2__cap { font-size:.72rem; color:var(--tat-muted); }
.tat-legend2 { list-style:none; margin:0; padding:0; font-size:.88rem; min-width:170px; }
.tat-legend2 li { display:flex; align-items:center; gap:.5rem; padding:.22rem 0; color:var(--tat-text); }
.tat-legend2 .dot { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.tat-legend2 strong { margin-left:auto; color:var(--tat-heading); }
@media (prefers-reduced-motion:reduce) { .tat-kpi-hero::after { display:none; } }

/* -------------------------------------------------- Placeholder de producto sin imagen
   Verde de la tienda (Graphite), ícono genérico → se ve a propósito, no el gris roto.
   Aplica en grilla storefront (.tat-product-card__media), PDP (.tat-detail__gallery-main)
   y miniatura admin (.tat-admin-thumb). */
.tat-media-ph, .tat-thumb-ph {
  display:flex !important; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#e9f4ee,#d4e9dc) !important; color:#2E7D46;
}
.tat-media-ph i { font-size:2rem; opacity:.6; }
.tat-thumb-ph i { font-size:1.05rem; opacity:.7; }

/* -------------------------------------------------- Botones */
.btn-primary {
  --bs-btn-bg:var(--tat-primary);
  --bs-btn-border-color:var(--tat-primary);
  --bs-btn-hover-bg:var(--tat-primary-hover);
  --bs-btn-hover-border-color:var(--tat-primary-hover);
  --bs-btn-active-bg:var(--tat-primary-hover);
  --bs-btn-active-border-color:var(--tat-primary-hover);
  --bs-btn-disabled-bg:var(--tat-primary);
  --bs-btn-disabled-border-color:var(--tat-primary);
  --bs-btn-color:var(--tat-on-primary);
  --bs-btn-hover-color:var(--tat-on-primary);
  --bs-btn-active-color:var(--tat-on-primary);
}
.btn-outline-primary {
  --bs-btn-color:var(--tat-primary);
  --bs-btn-border-color:var(--tat-primary);
  --bs-btn-hover-bg:var(--tat-primary);
  --bs-btn-hover-border-color:var(--tat-primary);
  --bs-btn-hover-color:var(--tat-on-primary);
  --bs-btn-active-bg:var(--tat-primary-hover);
  --bs-btn-active-border-color:var(--tat-primary-hover);
}
.btn { border-radius:var(--tat-radius); font-weight:var(--tat-fw-medium); }

/* -------------------------------------------------- Forms */
.form-control, .form-select {
  border-color:var(--tat-border);
  border-radius:var(--tat-radius);
  min-height:var(--tat-control-h);
  color:var(--tat-text);
}
.form-control:focus, .form-select:focus {
  border-color:var(--tat-primary);
  box-shadow:0 0 0 .2rem rgba(var(--tat-primary-rgb),.18);
}
.input-group-text { border-color:var(--tat-border); border-radius:var(--tat-radius); background:var(--tat-body-bg); color:var(--tat-muted); }
.form-label { color:var(--tat-text); font-weight:var(--tat-fw-medium); }
.form-check-input:checked { background-color:var(--tat-primary); border-color:var(--tat-primary); }

/* -------------------------------------------------- Tablas (compactas) */
.table {
  --bs-table-border-color:var(--tat-border);
  color:var(--tat-text);
  font-size:var(--tat-fs-sm);
}
.table > thead th, .table > thead td {
  text-transform:uppercase;
  font-size:var(--tat-fs-table-head);
  letter-spacing:.03em;
  font-weight:var(--tat-fw-semibold);
  color:var(--tat-muted);
  background:var(--tat-body-bg);
  border-bottom:1px solid var(--tat-border);
}
.table > :not(caption) > * > * {
  padding:var(--tat-cell-pad-y) var(--tat-cell-pad-x);
  border-color:var(--tat-border);
}
.table-bordered > :not(caption) > * > * { border-color:var(--tat-border); }

/* -------------------------------------------------- Paginación / DataTables (bootstrap4) */
.page-link { color:var(--tat-text); border-color:var(--tat-border); }
.page-link:hover { color:var(--tat-primary-hover); background:var(--tat-primary-tint); border-color:var(--tat-border); }
.page-item.active .page-link {
  background-color:var(--tat-primary);
  border-color:var(--tat-primary);
  color:var(--tat-on-primary);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border:1px solid var(--tat-border);
  border-radius:var(--tat-radius);
  min-height:var(--tat-control-h);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color:var(--tat-primary);
  box-shadow:0 0 0 .2rem rgba(var(--tat-primary-rgb),.18);
  outline:none;
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label { color:var(--tat-muted); }
.dataTables_wrapper .dataTables_filter { text-align:right; }
.dataTables_wrapper .dataTables_filter input { margin-left:.5rem; }
.dataTables_wrapper .row:first-child { padding:.25rem .25rem .75rem; }
.dataTables_wrapper .row:last-child { padding-top:.75rem; align-items:center; }
.dataTables_wrapper .paginate_button.page-item.disabled .page-link { color:var(--tat-muted); }
table.tat-datatable thead th { cursor:pointer; white-space:nowrap; }
table.tat-datatable thead th.no-sort { cursor:default; }

/* -------------------------------------------------- Badges de estado (NO pill, radius 4px) */
.badge { border-radius:var(--tat-radius); font-weight:var(--tat-fw-semibold); }
.badge.bg-success { background-color:var(--tat-success-bg) !important; color:var(--tat-success) !important; }
.badge.bg-warning { background-color:var(--tat-warning-bg) !important; color:var(--tat-warning) !important; }
.badge.bg-info    { background-color:var(--tat-info-bg)    !important; color:var(--tat-info)    !important; }
.badge.bg-danger  { background-color:var(--tat-danger-bg)  !important; color:var(--tat-danger)  !important; }
.badge.bg-secondary { background-color:var(--tat-body-bg) !important; color:var(--tat-muted) !important; }

/* -------------------------------------------------- Login (card centrada, pre-auth) */
.section.register .card { border:1px solid var(--tat-border); box-shadow:var(--tat-shadow-pop); }
.section.register .card-title { color:var(--tat-heading); }

/* -------------------------------------------------- Login rediseñado (card sobre fondo) */
/* Fondo en 3 capas: overlay verde (siempre) + foto opcional + color sólido de fallback.
   Si /uploads/login/login-bg.jpg no existe, la capa de imagen queda transparente y se ve el
   degradado verde sobre el sólido. Julián sube la foto a /uploads/login/ (carpeta git-excluida). */
.tat-login {
  min-height:100vh; display:grid; place-items:center; padding:2.5rem 1rem;
  background:
    linear-gradient(135deg, rgba(22,63,35,.93), rgba(31,90,49,.82)),
    url('/uploads/login/login-bg.jpg') center/cover no-repeat,
    #17502E;
}
.tat-login__card {
  width:100%; max-width:400px; background:#fff; border-radius:18px; padding:2.3rem 2rem;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.5);
}
.tat-login__brand { display:flex; align-items:center; justify-content:center; gap:.55rem; margin-bottom:1.4rem; }
.tat-login__brand .dot { width:12px; height:12px; border-radius:50%; background:var(--tat-primary); box-shadow:0 0 0 4px rgba(46,125,70,.18); }
.tat-login__brand .name { font-weight:700; font-size:1.32rem; color:var(--tat-heading); letter-spacing:-.02em; }
.tat-login__title { text-align:center; font-weight:700; font-size:1.28rem; color:var(--tat-heading); margin-bottom:.15rem; }
.tat-login__sub { text-align:center; color:var(--tat-muted); font-size:.9rem; margin-bottom:1.3rem; }
.tat-login__links { text-align:center; margin-top:1rem; font-size:.88rem; color:var(--tat-muted); }
.tat-login__links a { color:var(--tat-primary); text-decoration:none; }
.tat-login__links a:hover { text-decoration:underline; }
.tat-login__credits { text-align:center; margin-top:1.4rem; color:#e7f5ec; font-size:.82rem; }
.tat-login__credits a { color:#fff; font-weight:600; text-decoration:none; }

/* -------------------------------------------------- Dashboard: stat-cards */
.tat-stat-card {
  background:var(--tat-surface);
  border:1px solid var(--tat-border);
  border-radius:var(--tat-radius);
  box-shadow:var(--tat-shadow);
  padding:1rem 1.1rem;
  height:100%;
}
.tat-stat-card__label {
  text-transform:uppercase;
  font-size:var(--tat-fs-table-head);
  letter-spacing:.04em;
  font-weight:var(--tat-fw-semibold);
  color:var(--tat-muted);
  margin-bottom:.4rem;
}
.tat-stat-card__value {
  font-size:1.75rem;
  line-height:1.1;
  font-weight:var(--tat-fw-semibold);
  color:var(--tat-heading);
  margin-bottom:.45rem;
}
.tat-stat-card__delta {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:var(--tat-fs-sm);
  color:var(--tat-muted);
}
.tat-stat-card__delta.is-up { color:var(--tat-success); }
.tat-stat-card__delta.is-down { color:var(--tat-muted); }

/* Tabla de la card de recientes: que la fila respire un poco más que la densidad base */
.section.dashboard .card .table > :not(caption) > * > * { vertical-align:middle; }

/* ===================================================================
   STOREFRONT (tienda) — superficie separada del admin. Comparte SOLO
   estos tokens; shell y componentes propios (no reusa NiceAdmin).
   =================================================================== */

/* Acento del STOREFRONT = verde Graphite. Re-define los tokens de acento SOLO para la
   superficie tienda, revirtiendo el azul del admin que viene de :root. Las custom props
   cascadean: todo lo que está dentro de body.tat-store hereda el verde. Neutros,
   tipografía y semánticos (success/warning/info/danger) se heredan de :root sin cambios.
   PROHIBIDO mover el acento de una superficie sin scopearlo: tocar --tat-primary en :root
   sin este override teñiría la tienda de azul. */
body.tat-store {
  --tat-primary:#2E7D46; --tat-primary-hover:#266B3B; --tat-primary-tint:#E6F2EA; --tat-on-primary:#FFFFFF;
  --tat-primary-rgb:46,125,70;
  --bs-primary:var(--tat-primary); --bs-primary-rgb:var(--tat-primary-rgb);
  --bs-link-color:var(--tat-primary); --bs-link-hover-color:var(--tat-primary-hover);
}

.tat-store { background:var(--tat-body-bg); min-height:100vh; }
/* deja lugar para la bottom-nav fija en móvil */
@media (max-width:767.98px){ .tat-store { padding-bottom:64px; } }

/* --- Header de tienda --- */
.tat-store-header {
  background:var(--tat-surface);
  border-bottom:1px solid var(--tat-border);
  position:sticky; top:0; z-index:1030;
}
.tat-store-logo {
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:var(--tat-fw-semibold); color:var(--tat-heading); text-decoration:none;
  font-size:1.05rem;
}
.tat-store-logo__mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--tat-radius);
  background:var(--tat-primary); color:var(--tat-on-primary); font-weight:var(--tat-fw-semibold);
}
.tat-store-cartbtn .tat-badge-count {
  background:var(--tat-on-primary); color:var(--tat-primary);
  font-size:var(--tat-fs-table-head); font-weight:var(--tat-fw-semibold);
  border-radius:999px; padding:0 .4rem; margin-left:.35rem;
}
.tat-store-iconbtn { position:relative; color:var(--tat-text); font-size:1.25rem; line-height:1; }
.tat-store-iconbtn .tat-badge-count {
  position:absolute; top:-6px; right:-8px; background:var(--tat-primary); color:var(--tat-on-primary);
  font-size:10px; font-weight:var(--tat-fw-semibold); border-radius:999px; padding:0 .3rem; min-width:16px; text-align:center;
}

/* --- Nav de categorías (desktop horizontal) --- */
.tat-store-catnav { display:flex; gap:1.25rem; overflow-x:auto; }
.tat-store-catnav a {
  white-space:nowrap; padding:.6rem 0; color:var(--tat-muted); text-decoration:none;
  font-size:var(--tat-fs-sm); font-weight:var(--tat-fw-medium); border-bottom:2px solid transparent;
}
.tat-store-catnav a:hover { color:var(--tat-text); }
.tat-store-catnav a.is-active { color:var(--tat-heading); border-bottom-color:var(--tat-primary); }

/* --- Chips de categoría (móvil) --- */
.tat-store-catpills { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; }
.tat-store-catpill {
  white-space:nowrap; border:1px solid var(--tat-border); background:var(--tat-surface);
  color:var(--tat-text); border-radius:999px; padding:.3rem .8rem; font-size:var(--tat-fs-sm); text-decoration:none;
}
.tat-store-catpill.is-active { background:var(--tat-primary); border-color:var(--tat-primary); color:var(--tat-on-primary); }

/* --- Banner de promo --- */
.tat-promo {
  background:var(--tat-primary); color:var(--tat-on-primary);
  border-radius:var(--tat-radius); overflow:hidden;
}
.tat-promo__kicker { text-transform:uppercase; letter-spacing:.05em; font-size:var(--tat-fs-table-head); opacity:.85; }
.tat-promo__title { font-size:1.35rem; font-weight:var(--tat-fw-semibold); line-height:1.15; }
.tat-promo__meta { font-size:var(--tat-fs-sm); opacity:.9; }
.tat-promo__media {
  background:var(--tat-on-primary); opacity:.15;
  border-radius:var(--tat-radius); min-height:110px;
}

/* --- Card de producto (el componente reusado) --- */
.tat-product-card {
  background:var(--tat-surface); border:1px solid var(--tat-border);
  border-radius:var(--tat-radius); box-shadow:var(--tat-shadow);
  height:100%; display:flex; flex-direction:column; position:relative; padding:.75rem;
}
.tat-product-card__media {
  aspect-ratio:1/1; border-radius:var(--tat-radius-sm); margin-bottom:.6rem;
  background:repeating-linear-gradient(45deg, var(--tat-body-bg) 0 8px, var(--tat-surface) 8px 16px);
  border:1px solid var(--tat-border);
}
.tat-product-card__brand { font-size:var(--tat-fs-table-head); color:var(--tat-muted); text-transform:uppercase; letter-spacing:.03em; }
.tat-product-card__name { font-size:var(--tat-fs-sm); color:var(--tat-text); line-height:1.25; margin:.15rem 0 .5rem; min-height:2.4em; }
.tat-product-card__price { font-size:1.05rem; font-weight:var(--tat-fw-semibold); color:var(--tat-heading); }
.tat-product-card__price-old { font-size:var(--tat-fs-sm); color:var(--tat-muted); text-decoration:line-through; margin-left:.35rem; }
.tat-product-card__cta { margin-top:auto; padding-top:.6rem; }
.tat-product-card__badge {
  position:absolute; top:.6rem; left:.6rem; font-size:var(--tat-fs-table-head); font-weight:var(--tat-fw-semibold);
  border-radius:var(--tat-radius-sm); padding:.1rem .45rem; color:var(--tat-on-primary);
}
.tat-product-card__badge.is-sale  { background:var(--tat-danger); }
.tat-product-card__badge.is-stock { background:var(--tat-warning); }

/* --- Stepper (− N +) cuando el ítem ya estaría en el carrito --- */
.tat-stepper { display:inline-flex; align-items:stretch; border:1px solid var(--tat-primary); border-radius:var(--tat-radius); overflow:hidden; }
.tat-stepper button {
  border:0; background:var(--tat-surface); color:var(--tat-primary); width:34px;
  font-size:1rem; line-height:1; cursor:pointer;
}
.tat-stepper button:hover { background:var(--tat-primary-tint); }
.tat-stepper__qty { display:inline-flex; align-items:center; justify-content:center; min-width:34px; font-weight:var(--tat-fw-semibold); color:var(--tat-text); }

/* --- Bottom-nav (móvil) --- */
.tat-bottomnav {
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; background:var(--tat-surface); border-top:1px solid var(--tat-border);
}
.tat-bottomnav a {
  flex:1; text-align:center; padding:.45rem 0; color:var(--tat-muted); text-decoration:none;
  font-size:10px; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.tat-bottomnav a i { font-size:1.2rem; }
.tat-bottomnav a.is-active { color:var(--tat-primary); }

/* --- Footer de tienda --- */
.tat-store-footer { background:var(--tat-surface); border-top:1px solid var(--tat-border); color:var(--tat-muted); font-size:var(--tat-fs-sm); }
.tat-store-footer a { color:var(--tat-muted); text-decoration:none; }
.tat-store-footer a:hover { color:var(--tat-text); }

/* --- Detalle de producto (PDP) --- */
.tat-detail__gallery-main {
  position:relative; aspect-ratio:1/1; border:1px solid var(--tat-border); border-radius:var(--tat-radius);
  background:repeating-linear-gradient(45deg, var(--tat-body-bg) 0 10px, var(--tat-surface) 10px 20px);
  display:flex; align-items:center; justify-content:center;
}
.tat-detail__media-label { color:var(--tat-muted); font-size:var(--tat-fs-sm); }
.tat-detail__badge {
  position:absolute; top:.6rem; left:.6rem; font-size:var(--tat-fs-table-head); font-weight:var(--tat-fw-semibold);
  border-radius:var(--tat-radius-sm); padding:.15rem .5rem; color:var(--tat-on-primary); background:var(--tat-danger);
}
.tat-detail__thumbs { display:flex; gap:.5rem; margin-top:.6rem; }
.tat-detail__thumb {
  width:64px; height:64px; border:1px solid var(--tat-border); border-radius:var(--tat-radius-sm);
  background:repeating-linear-gradient(45deg, var(--tat-body-bg) 0 6px, var(--tat-surface) 6px 12px); cursor:pointer;
}
.tat-detail__thumb.is-active { border-color:var(--tat-primary); box-shadow:0 0 0 1px var(--tat-primary); }

.tat-detail__brand { font-size:var(--tat-fs-table-head); color:var(--tat-muted); text-transform:uppercase; letter-spacing:.03em; }
.tat-detail__title { font-size:1.4rem; font-weight:var(--tat-fw-semibold); color:var(--tat-heading); line-height:1.2; }
.tat-detail__sku { font-size:var(--tat-fs-sm); color:var(--tat-muted); }
.tat-detail__price { font-size:1.9rem; font-weight:var(--tat-fw-semibold); color:var(--tat-heading); }
.tat-detail__price-old { font-size:1.05rem; color:var(--tat-muted); text-decoration:line-through; }
.tat-detail__discount {
  font-size:var(--tat-fs-sm); font-weight:var(--tat-fw-semibold); color:var(--tat-on-primary);
  background:var(--tat-danger); border-radius:var(--tat-radius-sm); padding:.05rem .4rem;
}
.tat-detail__taxnote { font-size:var(--tat-fs-sm); color:var(--tat-muted); }
.tat-detail__desc { color:var(--tat-text); font-size:var(--tat-fs-sm); line-height:1.55; }
.tat-detail__microcopy { color:var(--tat-muted); font-size:var(--tat-fs-sm); }
.tat-detail__microcopy i { color:var(--tat-primary); }

/* Barra de acción inferior (móvil) — reemplaza la bottom-nav en esta pantalla */
.tat-detail-actionbar {
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  background:var(--tat-surface); border-top:1px solid var(--tat-border);
  padding:.6rem .9rem; display:flex; align-items:center; gap:.6rem;
}

/* --- Carrito: cuerpo único (offcanvas desktop + página móvil) --- */
.tat-cart { display:flex; flex-direction:column; }
.tat-cart--page { min-height:calc(100vh - 56px); }
.tat-cart__items { flex:1 1 auto; overflow-y:auto; }
.tat-cart__summary { flex:0 0 auto; border-top:1px solid var(--tat-border); padding-top:.75rem; }

.tat-cart-item { display:flex; gap:.75rem; padding:.85rem 0; border-bottom:1px solid var(--tat-border); }
.tat-cart-item__media {
  flex:0 0 auto; width:56px; height:56px; border:1px solid var(--tat-border); border-radius:var(--tat-radius-sm);
  background:repeating-linear-gradient(45deg, var(--tat-body-bg) 0 6px, var(--tat-surface) 6px 12px);
}
.tat-cart-item__info { flex:1 1 auto; min-width:0; }
.tat-cart-item__name { font-size:var(--tat-fs-sm); font-weight:var(--tat-fw-medium); color:var(--tat-heading); }
.tat-cart-item__unit { font-size:var(--tat-fs-table-head); color:var(--tat-muted); }
.tat-cart-item__line { font-weight:var(--tat-fw-semibold); color:var(--tat-heading); }
.tat-cart-item__remove { border:0; background:transparent; color:var(--tat-muted); line-height:1; padding:0; }
.tat-cart-item__remove:hover { color:var(--tat-danger); }

.tat-cart-coupon {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--tat-border); border-radius:var(--tat-radius); background:var(--tat-surface);
  color:var(--tat-text); padding:.6rem .8rem; margin-top:.85rem; font-size:var(--tat-fs-sm);
}
.tat-cart-coupon i:first-child { color:var(--tat-primary); }

.tat-cart__total-label { font-weight:var(--tat-fw-semibold); color:var(--tat-heading); font-size:1.05rem; }
.tat-cart__total { font-weight:var(--tat-fw-semibold); color:var(--tat-heading); font-size:1.15rem; }

/* --- Admin: listado de módulo (molde Productos) --- */
/* miniatura de fila en tablas admin */
.tat-admin-thumb {
  display:inline-block; flex:0 0 auto; width:38px; height:38px;
  border:1px solid var(--tat-border); border-radius:var(--tat-radius-sm);
  background:repeating-linear-gradient(45deg, var(--tat-body-bg) 0 6px, var(--tat-surface) 6px 12px);
}

/* --- Admin: detalle de despacho + timeline de estados (trazabilidad) --- */
/* Timeline vertical (responsive: misma estructura en desktop y móvil). Los estados
   cumplidos se pintan con el verde de marca; los pendientes quedan en hueco/muted. */
.tat-timeline { list-style:none; margin:0; padding:0; position:relative; }
.tat-timeline-item { position:relative; padding:0 0 1.15rem 1.85rem; }
.tat-timeline-item:last-child { padding-bottom:0; }
/* conector vertical entre marcadores */
.tat-timeline-item::before {
  content:""; position:absolute; left:7px; top:1.2rem; bottom:-.05rem; width:2px;
  background:var(--tat-border);
}
.tat-timeline-item:last-child::before { display:none; }
.tat-timeline-item.is-done::before { background:var(--tat-primary); }
/* marcador */
.tat-timeline-marker {
  position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--tat-border); background:var(--tat-surface); z-index:1;
}
.tat-timeline-item.is-done .tat-timeline-marker {
  border-color:var(--tat-primary); background:var(--tat-primary);
}
.tat-timeline-item.is-cancel .tat-timeline-marker {
  border-color:var(--tat-danger); background:var(--tat-danger);
}
.tat-timeline-title { font-weight:var(--tat-fw-semibold); color:var(--tat-heading); line-height:1.2; }
.tat-timeline-item.is-pending .tat-timeline-title { color:var(--tat-muted); font-weight:var(--tat-fw-regular); }
.tat-timeline-item.is-cancel .tat-timeline-title { color:var(--tat-danger); }
.tat-timeline-time { font-size:var(--tat-fs-sm); color:var(--tat-muted); }
.tat-timeline-item.is-pending .tat-timeline-time { font-style:italic; }
/* lista clave/valor del panel de entrega */
.tat-deliv-list { margin:0; }
.tat-deliv-list dt { font-size:var(--tat-fs-sm); color:var(--tat-muted); font-weight:var(--tat-fw-regular); }
.tat-deliv-list dd { margin:0 0 .6rem; color:var(--tat-text); font-weight:var(--tat-fw-medium); }
.tat-deliv-list dd:last-child { margin-bottom:0; }

/* --- Admin: Mensajería — hilo de conversación (burbujas cliente↔empresa) --- */
.tat-chat { display:flex; flex-direction:column; gap:.6rem; }
.tat-bubble {
  max-width:78%; padding:.55rem .75rem; border-radius:var(--tat-radius);
  border:1px solid var(--tat-border); background:var(--tat-surface);
  font-size:var(--tat-fs-base); line-height:1.35; color:var(--tat-text);
}
.tat-bubble__meta { display:block; margin-top:.25rem; font-size:var(--tat-fs-sm); color:var(--tat-muted); }
/* cliente = entrante, alineado a la izquierda */
.tat-bubble.is-cliente { align-self:flex-start; border-bottom-left-radius:0; }
/* empresa = saliente, alineado a la derecha, en tinte de marca */
.tat-bubble.is-empresa {
  align-self:flex-end; border-bottom-right-radius:0;
  background:var(--tat-primary-tint); border-color:var(--tat-primary-tint);
}
.tat-bubble.is-empresa .tat-bubble__author { color:var(--tat-primary); }
.tat-bubble__author { font-size:var(--tat-fs-sm); font-weight:var(--tat-fw-semibold); display:block; margin-bottom:.15rem; }
/* caja de respuesta (diseño, no funcional) */
.tat-chat-reply { border-top:1px solid var(--tat-border); margin-top:.9rem; padding-top:.9rem; }

/* --- Admin: Reportes — gráficos estáticos (SIN librería: CSS puro) --- */
/* Dona: el conic-gradient (segmentos) se arma con tokens --tat-* + ángulos derivados,
   inline porque es DATA. El hueco central es un ::before sobre la superficie. */
.tat-donut { width:170px; height:170px; border-radius:50%; position:relative; flex:0 0 auto; }
.tat-donut::before {
  content:""; position:absolute; inset:24%; background:var(--tat-surface); border-radius:50%;
}
.tat-chart-legend { list-style:none; margin:0; padding:0; font-size:var(--tat-fs-sm); }
.tat-chart-legend li { display:flex; align-items:center; gap:.45rem; margin-bottom:.3rem; color:var(--tat-text); }
.tat-chart-legend li:last-child { margin-bottom:0; }
.tat-chart-legend .tat-dot { width:11px; height:11px; border-radius:2px; flex:0 0 auto; }
.tat-chart-legend .tat-legend-val { margin-left:auto; color:var(--tat-muted); font-weight:var(--tat-fw-medium); }
/* Barras verticales: altura por bar = DATA (inline %); color y caja = tokens */
.tat-bars { display:flex; align-items:flex-end; gap:.6rem; height:150px; padding-top:.5rem; }
.tat-bars__col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.35rem; height:100%; }
.tat-bars__bar { width:100%; max-width:40px; min-height:2px; background:var(--tat-primary); border-radius:var(--tat-radius-sm) var(--tat-radius-sm) 0 0; }
.tat-bars__label { font-size:var(--tat-fs-sm); color:var(--tat-muted); text-align:center; }
.tat-bars__val { font-size:var(--tat-fs-sm); color:var(--tat-heading); font-weight:var(--tat-fw-medium); }