/* GbLux · capa de pulido (correcciones móviles + animaciones). Se carga DESPUÉS de gbl/panel/admin.css.
   Solo usa transform y opacity; todo se apaga con prefers-reduced-motion al final del archivo. */
:root{
  --pol-ease:cubic-bezier(.2,.7,.2,1);
  --pol-fast:160ms; --pol-med:260ms; --pol-slow:420ms;
}

/* ======================= CORRECCIONES ======================= */

/* Logo: "IMPORT" ya no baja de 11 px */
.brand span{font-size:.7rem}

/* Precios y códigos no se parten en dos líneas */
td.mono,td .mono,.num,td.num{white-space:nowrap}

/* Portal: "Cerrar sesión" duplicado con "Salir" del encabezado en móvil/tablet; WhatsApp ocupa todo el ancho */
@media (max-width:1020px){
  #btnLogout2{display:none}
  .pn-foot{display:grid}
  .pn-foot .btn{justify-content:center}
}

/* Zonas táctiles de 44 px en pantallas táctiles/estrechas */
@media (max-width:768px),(pointer:coarse){
  footer ul{gap:0}
  footer li a{display:inline-flex;align-items:center;min-height:44px}
  footer .foot-bottom a,footer .link{display:inline-flex;align-items:center;min-height:44px}
  .sec-row .link{display:inline-flex;align-items:center;min-height:44px}
  .car-dots button{position:relative}
  .car-dots button::after{content:"";position:absolute;inset:-18px -8px}
  .btn.sm,.btn-sm{min-height:44px}
  .chip{padding:11px 14px;min-height:44px}
  header .brand,.nav-links .btn,.nav-links a{min-height:44px}
  .cart-btn{width:44px;height:44px}
  .icon-btn{width:44px;height:44px}
}

/* Pestañas del portal: borde que insinúa que se puede deslizar */
@media (max-width:1020px){
  .pn-nav{--fade-l:0;--fade-r:1;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fade-l)*28px),#000 calc(100% - var(--fade-r)*28px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fade-l)*28px),#000 calc(100% - var(--fade-r)*28px),transparent 100%)}
}

/* Tablas → tarjetas en móvil (portal y admin). Las etiquetas data-label las pone polish.js */
@media (max-width:600px){
  .table-wrap{background:transparent;border:0;overflow:visible}
  .table-wrap table,.table-wrap tbody{display:block;min-width:0;width:100%}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap tbody tr{display:grid;gap:8px;padding:14px 16px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--radius,var(--r-sm,14px));background:var(--panel,var(--card,#fff))}
  .table-wrap tbody tr:hover{background:var(--panel,var(--card,#fff))}
  .table-wrap td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:0;border:0;text-align:right;min-width:0}
  .table-wrap td[data-label]:not([data-label=""])::before{content:attr(data-label);flex:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left}
  .table-wrap td>*{min-width:0}
  .table-wrap td[colspan]{display:block;text-align:center}
  .table-wrap td .cell-actions{justify-content:flex-end;flex-wrap:wrap;width:100%}
  .table-wrap td.num{text-align:right}
  .table-wrap td:not([data-label]),.table-wrap td[data-label=""]{justify-content:flex-end}
  .trunc{max-width:60vw}
}

/* Admin en tablet: las tablas anchas también pasan a tarjetas para ver Estado y Gestionar sin deslizar */
@media (min-width:601px) and (max-width:860px){
  .views .table-wrap{background:transparent;border:0;overflow:visible}
  .views .table-wrap table,.views .table-wrap tbody{display:block;min-width:0;width:100%}
  .views .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .views .table-wrap tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;padding:14px 16px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
  .views .table-wrap td{display:grid;gap:2px;padding:0;border:0;min-width:0;text-align:left}
  .views .table-wrap td[data-label]:not([data-label=""])::before{content:attr(data-label);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
  .views .table-wrap td.num{text-align:left}
  .views .table-wrap td[colspan]{grid-column:1/-1;text-align:center}
}

/* ======================= ANIMACIONES ======================= */

@keyframes pol-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pol-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes pol-shake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes pol-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes pol-dlg{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pol-fade{from{opacity:0}to{opacity:1}}
@keyframes pol-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pol-toast-out{to{opacity:0;transform:translateY(8px)}}

/* Cambio de pestaña (portal) y de vista (admin): entrada corta */
.pn-main .tab-content:not([hidden]){animation:pol-in var(--pol-med) var(--pol-ease) both}
.views>*{animation:pol-in var(--pol-med) var(--pol-ease) both}

/* Escalonado de tarjetas y filas (solo las primeras 8) */
:is(.pn-stat,.pn-q,.kpi,.card,.table-wrap tbody tr,.pn-act li){animation:pol-in var(--pol-slow) var(--pol-ease) both}
:is(.pn-stat,.pn-q,.kpi,.table-wrap tbody tr,.pn-act li):nth-child(2){animation-delay:40ms}
:is(.pn-stat,.pn-q,.kpi,.table-wrap tbody tr,.pn-act li):nth-child(3){animation-delay:80ms}
:is(.pn-stat,.pn-q,.kpi,.table-wrap tbody tr,.pn-act li):nth-child(4){animation-delay:120ms}
:is(.pn-stat,.pn-q,.kpi,.table-wrap tbody tr,.pn-act li):nth-child(5){animation-delay:160ms}
:is(.pn-stat,.pn-q,.kpi,.table-wrap tbody tr,.pn-act li):nth-child(6){animation-delay:200ms}
:is(.pn-stat,.pn-q,.kpi,.table-wrap tbody tr,.pn-act li):nth-child(n+7){animation-delay:240ms}

/* Pestañas del portal: transición de color/fondo */
.pn-nav button{transition:background var(--pol-fast) var(--pol-ease),color var(--pol-fast) var(--pol-ease),transform var(--pol-fast) var(--pol-ease)}
.pn-nav button:active,.btn:active,.chip:active,.pn-q:active,.pn-stat:active{transform:scale(.97)}

/* Botones y chips: respuesta táctil */
.btn,.chip,.pn-q,.pn-stat,.nav button{transition:transform var(--pol-fast) var(--pol-ease),background var(--pol-fast) var(--pol-ease),border-color var(--pol-fast) var(--pol-ease),box-shadow var(--pol-fast) var(--pol-ease),filter var(--pol-fast) var(--pol-ease)}

/* Tarjetas del catálogo: elevación al pasar el cursor */
@media (hover:hover){
  .card-p,.prod,.product-card,a[class*="prod"]{transition:transform var(--pol-med) var(--pol-ease),box-shadow var(--pol-med) var(--pol-ease)}
  .card-p:hover,.prod:hover,.product-card:hover{transform:translateY(-4px)}
}

/* Contador de insignias / carrito: "pop" cuando cambia (polish.js añade .pol-pop) */
.pol-pop{animation:pol-pop 320ms var(--pol-ease)}

/* Campo con error: sacudida (polish.js añade .pol-shake al detectar :invalid tras enviar) */
.pol-shake{animation:pol-shake 360ms var(--pol-ease)}

/* Diálogos del admin: escala y fundido; telón con fundido */
dialog[open]{animation:pol-dlg var(--pol-med) var(--pol-ease)}
dialog[open]::backdrop{animation:pol-fade var(--pol-med) ease}

/* Toasts: entrada y salida (salida con .pol-out de polish.js) */
.toast{animation:pol-in var(--pol-med) var(--pol-ease) both}
.toast.pol-out{animation:pol-toast-out 200ms ease forwards}

/* Gráfico de barras del admin: crecen desde abajo */
.bar i{transform-origin:bottom;animation:pol-grow 600ms var(--pol-ease) both}
.bar:nth-child(2) i{animation-delay:30ms}.bar:nth-child(3) i{animation-delay:60ms}.bar:nth-child(4) i{animation-delay:90ms}
.bar:nth-child(5) i{animation-delay:120ms}.bar:nth-child(6) i{animation-delay:150ms}.bar:nth-child(n+7) i{animation-delay:180ms}

/* "Cargando…": línea con brillo */
.pol-skel{display:block;height:14px;border-radius:8px;background:linear-gradient(90deg,rgba(128,136,150,.14) 25%,rgba(128,136,150,.28) 37%,rgba(128,136,150,.14) 63%);background-size:400% 100%;animation:pol-shimmer 1.4s linear infinite}


/* Esqueletos de carga: las cuadrículas vacías muestran bloques con brillo hasta que llegan los datos */
:is(#cats,#grid,#gridDest):empty{min-height:220px;border-radius:var(--r,16px);
  background:linear-gradient(90deg,rgba(128,136,150,.10) 25%,rgba(128,136,150,.22) 37%,rgba(128,136,150,.10) 63%);background-size:400% 100%;animation:pol-shimmer 1.4s linear infinite}
.pol-skel-wrap{display:grid;gap:10px;max-width:420px}
.pol-skel-wrap .pol-skel:nth-child(2){width:80%}.pol-skel-wrap .pol-skel:nth-child(3){width:55%}


/* Titular rotativo del hero: mientras se borra/escribe no hay fundido y aparece un cursor parpadeante */
@keyframes pol-caret{50%{opacity:0}}
.hero .rot.typing>.hs{transition:none;transform:none}
.pol-hid{visibility:hidden}
.pol-caret{display:none;width:0;position:relative}
#heroTitulo.typing .pol-caret{display:inline-block}
.pol-caret::after{content:"";position:absolute;left:.04em;top:.12em;width:.07em;height:.85em;background:currentColor;animation:pol-caret .7s steps(1) infinite}


/* ======================= CATÁLOGO ======================= */
@keyframes pol-in-x{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes pol-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Imágenes: fundido al cargar (solo si polish.js está activo) y zoom suave al pasar el cursor */
.pimg img{transition:opacity .45s ease,transform .6s var(--pol-ease)}
.pol-js .pimg img.pol-loading{opacity:0}
@media (hover:hover){.prod:hover .pimg img{transform:scale(1.06)}}

/* Tarjetas del catálogo: entrada escalonada al filtrar u ordenar */
.grid-4>.prod:nth-child(2){animation-delay:40ms}.grid-4>.prod:nth-child(3){animation-delay:80ms}.grid-4>.prod:nth-child(4){animation-delay:120ms}
.grid-4>.prod:nth-child(5){animation-delay:160ms}.grid-4>.prod:nth-child(6){animation-delay:200ms}.grid-4>.prod:nth-child(7){animation-delay:240ms}
.grid-4>.prod:nth-child(n+8){animation-delay:280ms}
.grid-4>.prod{animation:pol-in var(--pol-slow) var(--pol-ease) both}

/* Móvil: categorías en una sola fila deslizable y filtros avanzados plegables */
@media (max-width:768px){
  #chips,.chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%)}
  #chips::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
  #chips .chip,.chips .chip{flex:none;scroll-snap-align:start;white-space:nowrap}
  .pol-ft .filt-row:not(.pol-open){display:none}
  .pol-ftoggle{justify-self:start;display:inline-flex;align-items:center;gap:8px}
  .pol-ftoggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--pol-fast) var(--pol-ease)}
  .pol-ftoggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
  .pol-ft .filt-row.pol-open{animation:pol-in var(--pol-med) var(--pol-ease) both}
}
@media (min-width:769px){.pol-ftoggle{display:none}}

/* ======================= ADMIN ======================= */
.top{transition:box-shadow var(--pol-med) ease,background var(--pol-med) ease}
.top.scrolled{box-shadow:0 10px 26px -14px rgba(0,0,0,.75)}
.kpi,.card{transition:transform var(--pol-med) var(--pol-ease),border-color var(--pol-med) ease}
@media (hover:hover){.kpi:hover,.card:hover{border-color:var(--line-2)}.kpi:hover{transform:translateY(-2px)}}
.nav button[aria-current="page"]::before{transform-origin:center;animation:pol-bar var(--pol-med) var(--pol-ease)}
tbody tr{transition:background var(--pol-fast) ease}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 4px rgba(240,20,20,.18)}
.scrim:not([hidden]){animation:pol-fade var(--pol-med) ease}
@media (max-width:980px){
  .sidebar.open .nav button{animation:pol-in-x var(--pol-med) var(--pol-ease) both}
  .sidebar.open .nav button:nth-child(2){animation-delay:25ms}.sidebar.open .nav button:nth-child(3){animation-delay:50ms}
  .sidebar.open .nav button:nth-child(4){animation-delay:75ms}.sidebar.open .nav button:nth-child(5){animation-delay:100ms}
  .sidebar.open .nav button:nth-child(6){animation-delay:125ms}.sidebar.open .nav button:nth-child(7){animation-delay:150ms}
  .sidebar.open .nav button:nth-child(n+8){animation-delay:175ms}
}

/* ======================= MOVIMIENTO REDUCIDO ======================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  dialog[open]::backdrop{animation:none!important}
}