/* ============================================================================
   LAT SYSTEMS — sistema de diseño
   Paleta: tinta (ink), papel (paper), azul voltio (volt), niebla (mist)
   Tipografía: Space Grotesk (display/técnica) + Inter (texto) + JetBrains Mono (datos)
   Firma visual: corte diagonal tipo "obturador" en botones primarios y tarjetas
   ============================================================================ */

:root {
    --lat-ink: #0B0E14;
    --lat-ink-soft: #161B25;
    --lat-paper: #F4F5F8;
    --lat-surface: #FFFFFF;
    --lat-volt: #2F5BFF;
    --lat-volt-deep: #15309E;
    --lat-mist: #6B7280;
    --lat-line: #E3E5EA;

    --lat-display: "Space Grotesk", system-ui, sans-serif;
    --lat-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
    --lat-mono: "JetBrains Mono", ui-monospace, monospace;

    /* corte diagonal estilo obturador, usado con moderación */
    --lat-cut: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);

    font-family: var(--lat-body);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--lat-ink);
    background: var(--lat-paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--lat-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.6em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

a { color: var(--lat-volt); }

:focus-visible {
    outline: 2px solid var(--lat-volt);
    outline-offset: 2px;
}

/* ---------- Header / nav ---------- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 2rem;
    background: var(--lat-ink);
    color: white;
}

.app-header .logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--lat-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: white;
    text-decoration: none;
}

.app-header .logo img {
    height: 32px;
    width: auto;
}

.nav-publica {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-publica a {
    color: #C7CCD6;
    text-decoration: none;
    font-size: 0.92rem;
    position: relative;
    padding-bottom: 4px;
}

.nav-publica a:hover {
    color: white;
}

.nav-publica a:hover::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--lat-volt);
}

.usuario-actual {
    color: white;
    font-size: 0.88rem;
    border-left: 1px solid #2A3140;
    padding-left: 1.2rem;
}

.lat-icono-carrito {
    display: flex;
    align-items: center;
    color: #C7CCD6;
}

.lat-icono-carrito:hover {
    color: white;
}

/* ---------- Mega menú de categorías ---------- */
.lat-menu-wrap {
    position: relative;
}

.lat-boton-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: white;
    border: 1px solid #2A3140;
    clip-path: none;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
}

.lat-boton-menu:hover {
    background: var(--lat-ink-soft);
}

.lat-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11,14,20,0.35);
    z-index: 40;
}

.lat-mega-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 50;
    display: flex;
    background: var(--lat-surface);
    color: var(--lat-ink);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    min-width: 620px;
    max-width: 90vw;
}

.lat-mega-categorias {
    width: 220px;
    background: var(--lat-paper);
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    max-height: 460px;
    overflow-y: auto;
}

.lat-mega-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    color: var(--lat-ink);
    border: none;
    clip-path: none;
    text-align: left;
    padding: 0.7rem 1.1rem;
    font-size: 0.92rem;
    border-radius: 0;
}

.lat-mega-item:hover, .lat-mega-item.activo {
    background: var(--lat-surface);
    color: var(--lat-volt);
}

.lat-mega-item span {
    color: var(--lat-mist);
}

.lat-mega-panel {
    display: flex;
    gap: 2.5rem;
    padding: 1.5rem 2rem;
    flex: 1;
    max-height: 460px;
    overflow-y: auto;
}

.lat-mega-columna {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 150px;
}

.lat-mega-columna h3 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.lat-mega-columna a {
    color: var(--lat-ink);
    text-decoration: none;
    font-size: 0.88rem;
}

.lat-mega-columna a:hover {
    color: var(--lat-volt);
}

.lat-mega-vertodo {
    font-weight: 600;
    color: var(--lat-volt) !important;
}

.lat-boton-salir {
    background: transparent;
    color: #C7CCD6;
    border: 1px solid #2A3140;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    clip-path: none;
}

.lat-boton-salir:hover {
    background: #1A2030;
    color: white;
}

.lat-estado-pedido {
    background: var(--lat-paper);
    border: 1px solid var(--lat-line);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.82rem;
}

/* ---------- Slider / carrusel de banners ---------- */
.lat-slider {
    position: relative;
    overflow: hidden;
    background: var(--lat-ink);
    width: 100%;
    height: 420px;
    max-height: 60vh;
}

.lat-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}

.lat-slider-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}

.lat-slider-imagen-link, .lat-slider-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lat-slider-cta {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: var(--lat-volt);
    color: white;
    text-decoration: none;
    font-family: var(--lat-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    width: auto;
    height: auto;
}

.lat-slider-cta:hover {
    background: var(--lat-volt-deep);
}

.lat-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(11,14,20,0.55);
    color: white;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    clip-path: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lat-slider-prev { left: 14px; }
.lat-slider-next { right: 14px; }

.lat-slider-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
}

.lat-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    clip-path: none;
}

.lat-slider-dot.activo {
    background: var(--lat-volt);
    width: 22px;
    border-radius: 4px;
}

/* ---------- Búsqueda y categorías ---------- */
.lat-busqueda {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 1.75rem auto 0;
}

.lat-busqueda input {
    flex: 1;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    font-family: var(--lat-body);
}

.lat-categorias {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.25rem 0 0.5rem;
}

.lat-categoria-pill {
    background: var(--lat-surface);
    color: var(--lat-ink);
    border: 1px solid var(--lat-line);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    clip-path: none;
}

.lat-categoria-pill:hover {
    border-color: var(--lat-volt);
    color: var(--lat-volt);
}

.lat-categoria-pill.activo {
    background: var(--lat-ink);
    color: white;
    border-color: var(--lat-ink);
}

/* ---------- Etiqueta de precio en tarjetas ---------- */
.tarjeta-producto-imagen {
    position: relative;
}

.lat-badge-descuento {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--lat-volt);
    color: white;
    font-family: var(--lat-mono);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.lat-precio-tag {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Detalle de producto ---------- */
.lat-breadcrumb {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--lat-mist);
    margin-bottom: 1.5rem;
}

.lat-breadcrumb a {
    color: var(--lat-mist);
    text-decoration: none;
}

.lat-breadcrumb a:hover {
    color: var(--lat-volt);
}

.lat-detalle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
}

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

.lat-galeria {
    display: flex;
    gap: 1rem;
}

.lat-galeria-miniaturas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lat-miniatura {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--lat-surface);
    clip-path: none;
}

.lat-miniatura.activa {
    border-color: var(--lat-volt);
    border-width: 2px;
}

.lat-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lat-galeria-principal {
    flex: 1;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--lat-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--lat-surface);
}

.lat-galeria-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lat-marca {
    font-family: var(--lat-mono);
    font-size: 0.78rem;
    color: var(--lat-volt);
    letter-spacing: 0.06em;
}

.lat-sku {
    color: var(--lat-mist);
    font-size: 0.85rem;
    font-family: var(--lat-mono);
}

.lat-precio-grande {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.5rem;
}

.lat-precio-grande .precio {
    font-size: 2rem;
}

.lat-badge-inline {
    position: static;
}

.lat-selector-atributo {
    margin-bottom: 1.25rem;
}

.lat-selector-atributo label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lat-mist);
    margin-bottom: 0.4rem;
}

.lat-opciones-atributo {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lat-opcion-chip {
    background: var(--lat-surface);
    border: 1px solid var(--lat-line);
    color: var(--lat-ink);
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    clip-path: none;
    font-size: 0.9rem;
}

.lat-opcion-chip:hover {
    border-color: var(--lat-volt);
}

.lat-opcion-chip.activo {
    background: var(--lat-ink);
    color: white;
    border-color: var(--lat-ink);
}

.lat-combo-items {
    background: var(--lat-paper);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.lat-combo-items label {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--lat-mist);
}

.lat-combo-items ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
}

.lat-acciones-compra {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.lat-cantidad-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
}

.lat-cantidad-stepper button {
    background: transparent;
    color: var(--lat-ink);
    clip-path: none;
    padding: 0.5rem 0.9rem;
    font-size: 1.1rem;
}

.lat-cantidad-stepper button:hover {
    background: var(--lat-paper);
}

.lat-cantidad-stepper span {
    min-width: 2rem;
    text-align: center;
    font-family: var(--lat-mono);
}

.lat-boton-agregar {
    flex: 1;
    background: var(--lat-volt);
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
}

.lat-boton-agregar:hover {
    background: var(--lat-volt-deep);
}

.lat-descripcion-corta {
    color: var(--lat-mist);
}

/* ---------- Hero ---------- */
.lat-hero {
    background: var(--lat-ink);
    color: white;
    padding: 3.5rem 2rem 4.5rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
    margin-bottom: -1.5rem;
    width: 100%;
    position: relative;
}

.lat-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.lat-hero .eyebrow {
    font-family: var(--lat-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--lat-volt);
    display: block;
    margin-bottom: 0.8rem;
}

.lat-hero h1 {
    font-size: 2.6rem;
    max-width: 18ch;
    margin-bottom: 0.4rem;
}

.lat-hero p {
    color: #AEB4C0;
    max-width: 50ch;
    font-size: 1.02rem;
}

/* ---------- Layout general ---------- */
.app-main {
    padding: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.app-footer {
    text-align: center;
    padding: 2rem;
    color: var(--lat-mist);
    font-size: 0.85rem;
    border-top: 1px solid var(--lat-line);
    margin-top: 3rem;
}

/* ---------- Catálogo ---------- */
.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

.tarjeta-producto {
    display: block;
    border: 1px solid var(--lat-line);
    border-radius: 10px;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    background: var(--lat-surface);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tarjeta-producto:hover {
    border-color: var(--lat-volt);
    transform: translateY(-2px);
}

.tarjeta-producto img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--lat-paper);
    clip-path: var(--lat-cut);
}

.tarjeta-producto h3 {
    font-size: 0.98rem;
    margin: 0.7rem 0 0.3rem;
}

.precio {
    font-family: var(--lat-mono);
    font-weight: 600;
    font-size: 1.05rem;
}

.precio-anterior {
    font-family: var(--lat-mono);
    text-decoration: line-through;
    color: var(--lat-mist);
    font-size: 0.85rem;
}

/* ---------- Formularios ---------- */
.formulario {
    max-width: 400px;
    background: var(--lat-surface);
    border: 1px solid var(--lat-line);
    border-radius: 12px;
    padding: 1.75rem;
}

.campo {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.campo label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lat-mist);
}

.campo input, .campo textarea, .campo select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    font-family: var(--lat-body);
    font-size: 0.95rem;
    width: 100%;
}

.campo-inline input, .formulario-producto select, .formulario-producto textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    font-family: var(--lat-body);
    font-size: 0.95rem;
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--lat-volt);
}

button, .boton-link {
    background: var(--lat-ink);
    color: white;
    border: none;
    padding: 0.65rem 1.3rem;
    border-radius: 6px;
    font-family: var(--lat-body);
    font-weight: 500;
    cursor: pointer;
    clip-path: var(--lat-cut);
    transition: background 0.15s ease;
}

/* Dentro del panel admin, los botones NO llevan clip-path por defecto.
   También reseteamos clip-path para que los botones no tengan formas recortadas. */
.admin-shell button,
.admin-shell .boton-link {
    clip-path: none !important;
}

/* Storefront: botones redondos de ícono no deben heredar estilo global de button */
button.home-prod-fav {
    background: #F9FAFB !important;
    clip-path: none !important;
    color: inherit;
}
button.home-prod-fav:hover {
    background: #FFF1F2 !important;
}

/* Botón de favoritos en páginas de catálogo */
button.cat-fav-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #D1D5DB;
    background: #F9FAFB !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    clip-path: none !important;
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
    padding: 0;
}
button.cat-fav-btn svg { stroke: #6B7280; transition: stroke .15s; }
button.cat-fav-btn:hover {
    border-color: #EF4444 !important;
    background: #FFF1F2 !important;
}
button.cat-fav-btn:hover svg { stroke: #EF4444; }

/* Los botones del sidebar mantienen su color propio */
.admin-shell .admin-nav-toggle {
    clip-path: none !important;
}

button:hover, .boton-link:hover {
    background: var(--lat-volt-deep);
}

button:disabled {
    background: var(--lat-mist);
    cursor: not-allowed;
}

.boton-link {
    display: inline-block;
    text-decoration: none;
}

.mensaje-error {
    color: #B91C1C;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.mensaje-exito {
    color: #15803D;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    display: inline-block;
}

.acceso-denegado {
    padding: 3rem 2rem;
    text-align: center;
    color: #B91C1C;
}

/* ---------- Login / Registro flotante ---------- */
.lat-auth-fondo {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.lat-auth-card {
    background: var(--lat-surface);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(11,14,20,0.18);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.lat-auth-marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--lat-line);
}

.lat-auth-marca img {
    height: 28px;
}

.lat-auth-marca strong {
    font-family: var(--lat-display);
    font-size: 1.05rem;
}

.lat-auth-card h1 {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.lat-auth-subtitulo {
    color: var(--lat-mist);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.lat-auth-card .campo label {
    color: var(--lat-ink);
    font-weight: 500;
}

.lat-campo-password {
    position: relative;
}

.lat-campo-password input {
    width: 100%;
    padding-right: 2.6rem;
}

.lat-boton-ojo {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--lat-mist);
    clip-path: none;
    padding: 0.2rem;
    cursor: pointer;
}

.lat-auth-card button[type="submit"] {
    width: 100%;
    background: var(--lat-ink);
    border-radius: 999px;
    padding: 0.85rem;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.lat-auth-card button[type="submit"]:hover {
    background: var(--lat-volt-deep);
}

.lat-auth-pie {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--lat-mist);
}
.total-carrito {
    font-family: var(--lat-mono);
    font-size: 1.1rem;
    margin: 1rem 0;
}

/* ---------- Admin / cPanel ---------- */
.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 230px;
    background: var(--lat-ink, #0B0E14);
    color: white;
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    transition: width .2s, background .2s;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--lat-display);
    font-weight: 600;
    margin-bottom: 2rem;
    padding: 0 1.25rem;
}

.admin-logo img {
    height: 26px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.admin-nav a {
    color: var(--sb-muted, #B7BCC8);
    text-decoration: none;
    padding: 0.65rem 1.25rem;
    font-size: var(--sb-fs, 0.84rem);
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}

.admin-nav a:hover {
    color: white;
    background: var(--sb-hover, #161B25);
    border-left-color: var(--sb-activo, #7C3AED);
}

.admin-nav a.activo {
    color: white;
    background: var(--sb-hover, #161B25);
    border-left-color: var(--sb-activo, #7C3AED);
    font-weight: 600;
}

.admin-nav a.activo svg {
    stroke: var(--sb-activo, #7C3AED);
}

.admin-volver {
    color: #8B91A0;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0 1.25rem;
}

.admin-content {
    flex: 1;
    padding: 2.5rem;
    min-width: 0;
}

/* ---------- Sidebar admin (logo + iconos + badge) ---------- */
.admin-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    padding: 0 1.25rem;
}

.admin-logo img {
    height: 34px;
}

.admin-logo strong {
    display: block;
    font-family: var(--lat-display);
    font-size: 0.95rem;
}

.admin-logo span {
    display: block;
    font-size: 0.72rem;
    color: #8B91A0;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.admin-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.admin-badge {
    margin-left: auto;
    background: var(--lat-volt);
    color: white;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* ---------- Dashboard ---------- */
.admin-topheader {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lat-line);
}

.admin-topheader-acciones {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-icono-boton {
    position: relative;
    background: white;
    border: 1.5px solid #E5E7EB;
    color: #374151;
    clip-path: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    overflow: visible;
}

.admin-icono-boton svg { width: 18px; height: 18px; stroke: #374151; }

.admin-icono-boton:hover {
    background: var(--lat-paper);
}
/* ── Botón de acción en tablas (ícono cuadrado pequeño) ────────────── */
button.lat-accion-btn, .lat-accion-btn {
    background: #FFF !important;
    color: inherit !important;
    clip-path: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    cursor: pointer !important;
    flex-shrink: 0;
}
button.lat-accion-btn:hover, .lat-accion-btn:hover {
    background: #F9FAFB !important;
}
button.lat-accion-btn svg, .lat-accion-btn svg {
    display: block;
    flex-shrink: 0;
}


.admin-notif-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #DC2626;
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    z-index: 1;
    border: 2px solid #FFF;
    pointer-events: none;
}

.admin-usuario-wrap {
    position: relative;
}

.admin-usuario-boton {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    clip-path: none;
    color: var(--lat-ink);
    padding: 0.3rem 0.5rem;
}

.admin-usuario-boton:hover {
    background: var(--lat-paper);
    border-radius: 8px;
}

.admin-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lat-volt);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lat-display);
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.admin-usuario-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.admin-usuario-texto span {
    font-size: 0.74rem;
    color: var(--lat-mist);
}

.admin-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.admin-usuario-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    background: var(--lat-surface);
    border: 1px solid var(--lat-line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    min-width: 180px;
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
}

.admin-usuario-menu a, .admin-usuario-menu button {
    background: transparent;
    border: none;
    clip-path: none;
    text-align: left;
    color: var(--lat-ink);
    text-decoration: none;
    padding: 0.55rem 0.7rem;
    font-size: 0.88rem;
    border-radius: 6px;
}

.admin-usuario-menu a:hover, .admin-usuario-menu button:hover {
    background: var(--lat-paper);
}
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}

.admin-subtitulo {
    color: var(--lat-mist);
    margin-top: -0.4rem;
}

.lat-card {
    background: var(--lat-surface);
    border-radius: 12px;
    border: 1px solid var(--lat-line);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.lat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lat-card-header a {
    font-size: 0.82rem;
}

.lat-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.lat-kpi-card {
    background: var(--lat-surface);
    border: 1px solid var(--lat-line);
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.lat-kpi-icono {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 0.9rem;
}

.lat-kpi-icono svg { width: 19px; height: 19px; }

.lat-kpi-volt { background: var(--lat-volt); }
.lat-kpi-verde { background: #22C55E; }
.lat-kpi-naranja { background: #F59E0B; }
.lat-kpi-azul { background: #06B6D4; }

.lat-kpi-label {
    color: var(--lat-mist);
    font-size: 0.85rem;
    margin: 0 0 0.2rem;
}

.lat-kpi-valor {
    font-family: var(--lat-mono);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.lat-kpi-cambio {
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

.lat-kpi-cambio.positivo { color: #16A34A; }
.lat-kpi-cambio.negativo { color: #DC2626; }

.lat-dashboard-graficas {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

@media (max-width: 900px) {
    .lat-dashboard-graficas { grid-template-columns: 1fr; }
}

.lat-grafica-lineas {
    width: 100%;
    height: 180px;
    overflow: visible;
}

.lat-grafica-leyenda-x {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--lat-mist);
    margin-top: 0.4rem;
}

.lat-dona-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.lat-dona {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.lat-dona circle {
    transition: stroke-dasharray 0.4s ease;
}

.lat-dona-total {
    font-family: var(--lat-mono);
    font-size: 0.95rem;
    font-weight: 600;
    fill: var(--lat-ink);
}

.lat-dona-total-label {
    font-size: 0.65rem;
    fill: var(--lat-mist);
}

.lat-dona-leyenda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.lat-dona-leyenda li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lat-dona-leyenda strong {
    margin-left: auto;
    font-family: var(--lat-mono);
}

.lat-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.lat-dashboard-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.lat-lista-simple {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.lat-lista-simple li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--lat-paper);
    padding-bottom: 0.7rem;
}

.lat-lista-simple li > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lat-lista-simple li > div:first-child span {
    color: var(--lat-mist);
    font-size: 0.78rem;
}

.lat-lista-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-family: var(--lat-mono);
}

.lat-ranking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--lat-paper);
    border-radius: 4px;
    font-size: 0.72rem;
    margin-right: 0.4rem;
}

.lat-badge-stock {
    background: #FEF3C7;
    color: #92400E;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.lat-celda-mono {
    font-family: var(--lat-mono);
}

/* ---------- Catálogo admin en cuadrícula ---------- */
.lat-toolbar-productos {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.lat-toolbar-productos select {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--lat-line);
    border-radius: 8px;
}

.lat-buscador-productos {
    flex: 1;
    min-width: 200px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--lat-line);
    border-radius: 8px;
}

.lat-grid-productos-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.lat-tarjeta-producto-admin {
    background: var(--lat-surface);
    border: 1px solid var(--lat-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.lat-tarjeta-producto-admin-imagen {
    position: relative;
    background: var(--lat-paper);
}

.lat-tarjeta-producto-admin-imagen img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.lat-estado-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.lat-estado-chip.activo { background: #DCFCE7; color: #15803D; }
.lat-estado-chip.inactivo { background: #F1F5F9; color: #475569; }
.lat-estado-chip.sin-stock { background: #FEE2E2; color: #B91C1C; }

.lat-tarjeta-producto-admin-info {
    padding: 1rem;
}

.lat-tarjeta-producto-admin-info h3 {
    font-size: 0.95rem;
    margin: 0 0 0.15rem;
}

.lat-tarjeta-categoria {
    color: var(--lat-mist);
    font-size: 0.8rem;
    margin: 0 0 0.6rem;
}

.lat-tarjeta-precio-stock {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--lat-mist);
    margin-bottom: 0.85rem;
}

.lat-tarjeta-precio-stock .precio {
    font-size: 1.05rem;
    color: var(--lat-ink);
}

.lat-tarjeta-producto-admin-acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lat-tarjeta-producto-admin-acciones .admin-icono-boton {
    width: 32px;
    height: 32px;
}

.lat-tarjeta-producto-admin-acciones .admin-icono-boton svg {
    width: 15px;
    height: 15px;
}

/* Switch activo/inactivo */
.lat-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 21px;
    margin-right: auto;
}

.lat-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lat-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #CBD5E1;
    border-radius: 999px;
    transition: 0.2s;
}

.lat-switch-slider::before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.lat-switch input:checked + .lat-switch-slider {
    background: var(--lat-volt);
}

.lat-switch input:checked + .lat-switch-slider::before {
    transform: translateX(17px);
}

/* Paginación */
.lat-paginacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--lat-mist);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lat-paginacion-botones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lat-paginacion-botones button {
    background: var(--lat-surface);
    color: var(--lat-ink);
    border: 1px solid var(--lat-line);
    clip-path: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
}

.lat-paginacion-botones button:disabled {
    opacity: 0.4;
    background: var(--lat-surface);
}

.lat-pagina-actual {
    background: var(--lat-ink);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lat-mono);
}

/* ---------- Modal de exportación ---------- */
.lat-boton-exportar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.lat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11,14,20,0.45);
    z-index: 60;
}

.lat-modal-exportar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    background: var(--lat-surface);
    border-radius: 14px;
    width: 100%;
    max-width: 800px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0,0,0,0.3);
}

.lat-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--lat-line);
}

.lat-modal-header h2 { margin-bottom: 0.2rem; }

.lat-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    padding: 1.5rem 1.75rem;
}

@media (max-width: 700px) {
    .lat-modal-body { grid-template-columns: 1fr; }
}

.lat-modal-body h3 {
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}

.lat-formato-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--lat-line);
    border-radius: 10px;
    padding: 0.85rem;
    margin-bottom: 0.7rem;
    cursor: pointer;
    position: relative;
}

.lat-formato-card.seleccionado {
    border-color: var(--lat-volt);
    background: #F5F7FF;
}

.lat-formato-card.deshabilitado {
    opacity: 0.55;
    cursor: not-allowed;
}

.lat-formato-card input[type="radio"] {
    margin-left: auto;
    width: 18px;
    height: 18px;
    accent-color: var(--lat-volt);
}

.lat-formato-icono {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lat-formato-icono.xlsx { background: #1D6F42; }
.lat-formato-icono.csv { background: #2563EB; }
.lat-formato-icono.json { background: #7C3AED; }
.lat-formato-icono.pdf { background: #DC2626; }

.lat-formato-texto {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.lat-formato-texto strong { font-size: 0.9rem; }
.lat-formato-texto span { font-size: 0.78rem; color: var(--lat-mist); }

.lat-formato-recomendado {
    background: #EDE9FE;
    color: #6D28D9;
    font-size: 0.68rem !important;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
}

.lat-opcion-exportar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--lat-line);
    border-radius: 10px;
    padding: 0.85rem;
    margin-bottom: 0.7rem;
}

.lat-opcion-exportar strong { display: block; font-size: 0.88rem; }
.lat-opcion-exportar span { font-size: 0.78rem; color: var(--lat-mist); }

.lat-campos-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    background: var(--lat-paper);
    border-radius: 8px;
    padding: 0.85rem;
    margin: -0.3rem 0 0.7rem;
    font-size: 0.85rem;
}

.lat-campos-checklist label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lat-input-nombre-archivo {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    font-size: 0.85rem;
}

.lat-resumen-exportar {
    display: flex;
    gap: 2rem;
    background: #F0FDF4;
    border-top: 1px solid var(--lat-line);
    border-bottom: 1px solid var(--lat-line);
    padding: 1rem 1.75rem;
}

.lat-resumen-exportar strong {
    display: block;
    font-family: var(--lat-mono);
    color: #15803D;
    font-size: 1.1rem;
}

.lat-resumen-exportar span {
    font-size: 0.78rem;
    color: var(--lat-mist);
}

.lat-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.75rem;
}

.lat-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    background: var(--lat-ink);
    color: white;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
    max-width: 360px;
}

.lat-toast-icono {
    background: #16A34A;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.lat-toast p {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: #C7CCD6;
}

.lat-toast button {
    background: transparent;
    clip-path: none;
    color: #8B91A0;
    margin-left: auto;
    padding: 0;
    font-size: 1.1rem;
}

/* ---------- Panel de filtros lateral ---------- */
.lat-boton-filtros {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}

.lat-boton-filtros.activo {
    border-color: var(--lat-volt);
    color: var(--lat-volt);
}

.lat-filtros-contador {
    background: var(--lat-volt);
    color: white;
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.lat-filtros-contador.claro {
    background: rgba(255,255,255,0.25);
}

.lat-filtros-activos {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--lat-mist);
}

.lat-chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #EEF2FF;
    color: var(--lat-volt-deep);
    padding: 0.3rem 0.5rem 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
}

.lat-chip-filtro button {
    background: transparent;
    clip-path: none;
    color: var(--lat-volt-deep);
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.lat-filtros-activos a {
    font-size: 0.82rem;
}

.lat-filtros-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11,14,20,0.35);
    z-index: 60;
}

.lat-panel-filtros {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 340px;
    background: var(--lat-surface);
    z-index: 70;
    box-shadow: -16px 0 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

.lat-panel-filtros-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.lat-panel-filtros-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--lat-line);
}

.lat-panel-filtros-footer button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.lat-rango-precio {
    width: 100%;
    accent-color: var(--lat-volt);
    margin: 0.6rem 0;
}

.lat-rango-inputs {
    display: flex;
    gap: 0.6rem;
}

.lat-rango-input {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    padding: 0 0.5rem;
}

.lat-rango-input span {
    color: var(--lat-mist);
    font-size: 0.85rem;
}

.lat-rango-input input {
    border: none;
    padding: 0.5rem 0.3rem;
    width: 100%;
}

/* ---------- Categorías ---------- */
.lat-categorias-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1000px) {
    .lat-categorias-layout { grid-template-columns: 1fr; }
}

.lat-fila-categoria {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lat-icono-categoria {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lat-display);
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.lat-estado-toggle {
    border: none;
    clip-path: none;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.lat-estado-toggle.activa { background: #DCFCE7; color: #15803D; }
.lat-estado-toggle.oculta { background: #FEF3C7; color: #92400E; }

.lat-orden-botones {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.lat-orden-botones button {
    background: transparent;
    color: var(--lat-mist);
    clip-path: none;
    padding: 0;
    font-size: 0.65rem;
    line-height: 1;
}

.lat-orden-botones button:hover { color: var(--lat-volt); }

.lat-grid-destacadas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.lat-tarjeta-destacada {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--lat-line);
}

.lat-tarjeta-destacada img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.lat-icono-flotante {
    position: absolute;
    top: 65px;
    left: 10px;
    width: 36px;
    height: 36px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.lat-tarjeta-destacada-info {
    padding: 0.6rem 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lat-tarjeta-destacada-info strong { font-size: 0.85rem; }
.lat-tarjeta-destacada-info span { font-size: 0.75rem; color: var(--lat-mist); }

.lat-mini-boton {
    margin-top: 0.4rem;
    display: inline-block;
    text-align: center;
    background: var(--lat-paper);
    color: var(--lat-volt);
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    padding: 0.3rem;
    font-size: 0.78rem;
    text-decoration: none;
}

.lat-mini-boton:hover { border-color: var(--lat-volt); }

.lat-modal-categoria {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    background: var(--lat-surface);
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0,0,0,0.3);
}

.lat-modal-body-single {
    padding: 1.5rem 1.75rem;
}

/* ---------- Cupones ---------- */
.lat-codigo-cupon {
    font-family: var(--lat-mono);
    font-weight: 600;
    background: var(--lat-paper);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.lat-chip-tipo {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.lat-chip-tipo.porcentaje { background: #EEF2FF; color: var(--lat-volt-deep); }
.lat-chip-tipo.monto { background: #ECFDF5; color: #15803D; }
.lat-chip-tipo.envio { background: #FDF4FF; color: #A21CAF; }

.lat-estado-toggle.programado { background: #EDE9FE; color: #6D28D9; }
.lat-estado-toggle.expirado { background: #E0F2FE; color: #0369A1; }

/* ---------- Reportes ---------- */
.lat-kpi-grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.lat-reportes-acciones {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lat-leyenda-comparacion {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--lat-mist);
}

.lat-leyenda-comparacion .lat-dot { margin-left: 0.6rem; }
.lat-leyenda-comparacion .lat-dot:first-child { margin-left: 0; }

.lat-dashboard-listas-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
    .lat-dashboard-listas-3 { grid-template-columns: 1fr; }
}

.lat-thumb-producto {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
}

.lat-ahorro-clientes {
    background: #F5F7FF;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lat-ahorro-clientes span { font-size: 0.8rem; color: var(--lat-mist); }
.lat-ahorro-clientes strong { font-family: var(--lat-mono); font-size: 1.3rem; color: var(--lat-volt-deep); }

/* ---------- Panel de detalle de pedido ---------- */
.lat-link-pedido {
    font-family: var(--lat-mono);
    font-weight: 600;
}

.lat-panel-detalle-pedido {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

.lat-titulo-pedido {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.lat-subtitulo-panel {
    font-size: 0.85rem;
    color: var(--lat-mist);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.5rem 0 0.6rem;
    border-top: 1px solid var(--lat-line);
    padding-top: 1rem;
}

.lat-direccion-texto {
    font-size: 0.88rem;
    line-height: 1.5;
}

.lat-panel-acciones {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lat-line);
}

.lat-panel-acciones button {
    flex: 1;
}

.boton-cancelar {
    background: transparent;
    border: 1px solid #DC2626;
    color: #DC2626;
    clip-path: none;
}

.boton-cancelar:hover {
    background: #FEF2F2;
}

/* ---------- Configuración ---------- */
.lat-config-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .lat-config-layout { grid-template-columns: 1fr; }
}

.lat-config-nav nav {
    display: flex;
    flex-direction: column;
    margin-top: 0.75rem;
}

.lat-config-nav button, .lat-config-nav a {
    background: transparent;
    border: none;
    clip-path: none;
    text-align: left;
    color: var(--lat-ink);
    text-decoration: none;
    padding: 0.6rem 0.7rem;
    font-size: 0.88rem;
    border-radius: 6px;
}

.lat-config-nav button:hover, .lat-config-nav a:hover {
    background: var(--lat-paper);
}

.lat-config-nav button.activo {
    background: #EEF2FF;
    color: var(--lat-volt-deep);
    font-weight: 500;
}

.lat-config-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
}

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

.lat-logo-preview {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    border: 1px dashed var(--lat-line);
    background: var(--lat-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.lat-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- Pedido manual multicanal ---------- */
.lat-pedido-manual-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 1000px) {
    .lat-pedido-manual-layout { grid-template-columns: 1fr; }
}

.lat-resultados-busqueda {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    border: 1px solid var(--lat-line);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--lat-surface);
}

.lat-resultados-busqueda li {
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    font-size: 0.88rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--lat-paper);
}

.lat-resultados-busqueda li:hover {
    background: var(--lat-paper);
}

.lat-resultados-busqueda li span {
    color: var(--lat-mist);
    font-family: var(--lat-mono);
    font-size: 0.8rem;
}

.lat-chip-seleccion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #EEF2FF;
    color: var(--lat-volt-deep);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
}

.lat-chip-seleccion span {
    color: var(--lat-mist);
    font-size: 0.8rem;
}

.lat-chip-seleccion button {
    margin-left: auto;
    background: transparent;
    clip-path: none;
    color: var(--lat-volt-deep);
    padding: 0;
    font-size: 1.1rem;
}

.lat-canales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.lat-canal-card {
    border: 1px solid var(--lat-line);
    border-radius: 10px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    cursor: pointer;
}

.lat-canal-card strong {
    font-family: var(--lat-mono);
    font-size: 0.85rem;
    color: var(--lat-volt);
}

.lat-canal-card span {
    font-size: 0.82rem;
}

.lat-canal-card.activo {
    border-color: var(--lat-volt);
    background: #F5F7FF;
}

/* ---------- Compras ---------- */
.lat-tabs-estado {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--lat-line);
    overflow-x: auto;
}

.lat-tabs-estado button {
    background: transparent;
    border: none;
    clip-path: none;
    color: var(--lat-mist);
    padding: 0.6rem 0;
    font-size: 0.88rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.lat-tabs-estado button.activo {
    color: var(--lat-volt-deep);
    border-bottom-color: var(--lat-volt);
    font-weight: 500;
}

.lat-barra-progreso {
    width: 80px;
    height: 6px;
    border-radius: 999px;
    background: var(--lat-paper);
    overflow: hidden;
    display: inline-block;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.lat-barra-progreso-relleno {
    height: 100%;
    background: var(--lat-volt);
}

/* ---------- Proveedores ---------- */
.lat-fila-seleccionada {
    background: #F5F7FF;
}

.lat-grafica-barras {
    width: 100%;
    height: 160px;
    margin-top: 0.5rem;
}

.lat-lista-totales {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lat-lista-totales li {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--lat-mist);
}

.lat-lista-totales li strong {
    font-family: var(--lat-mono);
    color: var(--lat-ink);
}

.lat-lista-totales .lat-total-final {
    border-top: 1px solid var(--lat-line);
    padding-top: 0.6rem;
    margin-top: 0.2rem;
    font-size: 1.05rem;
    color: var(--lat-ink);
}

.lat-lista-totales .lat-total-final strong {
    font-size: 1.2rem;
}
.tabla-admin, .tabla-carrito {
    width: 100%;
    border-collapse: collapse;
    background: var(--lat-surface);
}

.tabla-admin th, .tabla-carrito th {
    text-align: left;
    padding: 0.7rem 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lat-mist);
    border-bottom: 2px solid var(--lat-line);
}

.tabla-admin td, .tabla-carrito td {
    text-align: left;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--lat-line);
    font-size: 0.92rem;
}

.tabla-admin td:has(> .precio), .tabla-carrito td:nth-child(3), .tabla-carrito td:nth-child(4) {
    font-family: var(--lat-mono);
}

/* ---------- Admin: elementos varios ---------- */
.encabezado-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.formulario-producto {
    max-width: 560px;
    background: none;
    border: none;
    padding: 0;
}

.campo-inline {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.campo-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    color: var(--lat-ink);
}

.boton-secundario {
    background: transparent;
    color: var(--lat-volt);
    border: 1px solid var(--lat-volt);
    margin-left: 0.5rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    clip-path: none;
}

.boton-secundario:hover {
    background: var(--lat-volt);
    color: white;
}

.boton-peligro {
    background: #DC2626;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    clip-path: none;
}

.boton-peligro:hover {
    background: #991B1B;
}

.ayuda {
    font-size: 0.8rem;
    color: var(--lat-mist);
}

.vista-previa {
    max-width: 160px;
    max-height: 160px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 0.5rem;
    display: block;
}

.lat-galeria-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lat-galeria-admin-item {
    position: relative;
    border: 1px solid var(--lat-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--lat-surface);
}

.lat-galeria-admin-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.lat-tag-principal {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--lat-volt);
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.lat-galeria-admin-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.4rem;
}

.lat-galeria-admin-acciones button {
    font-size: 0.72rem;
    padding: 0.25rem 0.45rem;
}

.seccion-admin {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lat-line);
    max-width: 700px;
}

.atributos-checkbox {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    background: var(--lat-paper);
    border: 1px solid var(--lat-line);
    border-radius: 999px;
    padding: 0.2rem 0.7rem 0.2rem 0.5rem;
}

.alerta-stock {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    border-top: 1px solid #FDE68A;
}

.boton-quitar {
    background: transparent;
    color: #B91C1C;
    border: none;
    padding: 0 0.2rem;
    font-size: 0.95rem;
    cursor: pointer;
    clip-path: none;
}

/* ============================================================
   TIENDA PÚBLICA — NUEVO DISEÑO
   ============================================================ */

/* Barra superior */
.lat-barra-top {
    background: #0B0E14;
    color: #AEB4C0;
    font-size: 0.78rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 2rem;
}

.lat-barra-top-izq, .lat-barra-top-der {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.lat-barra-top-izq span { display: flex; align-items: center; gap: 0.3rem; }
.lat-barra-top-der a { color: #AEB4C0; text-decoration: none; }
.lat-barra-top-der a:hover { color: white; }

/* Header principal */
.app-header-tienda {
    background: white;
    border-bottom: 1px solid #E8EAED;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 2rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.logo-tienda {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--lat-ink);
    flex-shrink: 0;
}

.logo-tienda img { width: 36px; height: 36px; object-fit: contain; }
.logo-tienda strong { font-size: 0.95rem; font-family: var(--lat-display); display: block; }
.logo-tienda span { font-size: 0.72rem; color: var(--lat-mist); }

/* Buscador */
.lat-buscador-tienda {
    flex: 1;
    display: flex;
    border: 2px solid var(--lat-volt);
    border-radius: 8px;
    overflow: hidden;
    max-width: 600px;
}

.lat-buscador-tienda input {
    flex: 1;
    border: none;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    outline: none;
}

.lat-buscador-tienda .lat-buscador-btn {
    background: var(--lat-volt);
    color: white;
    border: none;
    padding: 0;
    cursor: pointer;
    clip-path: none;
    border-radius: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    flex-shrink: 0;
}

/* Acciones del header */
.lat-header-acciones { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.lat-header-accion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--lat-ink);
    background: transparent;
    border: none;
    clip-path: none;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    position: relative;
}

.lat-header-accion:hover { background: var(--lat-paper); }
.lat-header-accion small { color: var(--lat-mist); font-size: 0.72rem; }

.lat-badge-carrito {
    position: absolute;
    top: -6px;
    right: -4px;
    background: var(--lat-volt);
    color: white;
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navegación secundaria */
.lat-nav-tienda {
    background: white;
    border-bottom: 1px solid #E8EAED;
    position: sticky;
    top: 73px;
    z-index: 45;
}

.lat-nav-tienda-inner {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    gap: 0;
    overflow-x: auto;
}

.lat-nav-tienda-inner a {
    padding: 0.7rem 1rem;
    text-decoration: none;
    color: var(--nav-txt, rgba(255,255,255,.85));
    font-size: 0.88rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.lat-nav-tienda-inner a:hover, .lat-nav-tienda-inner a.activo {
    color: #FFF;
    border-bottom-color: rgba(255,255,255,.85);
}

.lat-categorias-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--lat-volt);
    color: white;
    margin-right: 0.5rem;
    border-radius: 4px 4px 0 0;
    user-select: none;
}

.lat-badge-hot {
    background: #DC2626;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.25rem;
}

/* Flyout de categorías */
.lat-flyout-overlay {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(0,0,0,0.25);
}

.lat-flyout-categorias {
    position: absolute;
    left: 2rem;
    top: 115px;
    width: 260px;
    background: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    z-index: 46;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    max-height: 80vh;
    overflow-y: auto;
}

.lat-flyout-categorias a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    color: var(--lat-ink);
    font-size: 0.88rem;
    transition: background 0.1s;
}

.lat-flyout-categorias a:hover { background: var(--lat-paper); color: var(--lat-volt); }
.lat-flyout-categorias a svg { color: var(--lat-mist); flex-shrink: 0; }

.lat-ver-todas {
    border-top: 1px solid var(--lat-line);
    margin-top: 0.4rem;
    font-weight: 600;
    color: var(--lat-volt) !important;
}

/* Main tienda */
.app-main-tienda {
    padding: 0;
    max-width: none;
    background: #F7F8FA;
    min-height: 60vh;
}

/* Footer */
.app-footer-tienda {
    background: #0B0E14;
    color: #AEB4C0;
    padding: 3rem 2rem 1.5rem;
}

.lat-footer-cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.lat-footer-cols strong { color: white; display: block; margin-bottom: 0.75rem; font-size: 0.92rem; }
.lat-footer-cols a, .lat-footer-cols span { display: block; text-decoration: none; color: #AEB4C0; font-size: 0.85rem; margin-bottom: 0.4rem; }
.lat-footer-cols a:hover { color: white; }

.lat-footer-bottom {
    border-top: 1px solid #1E2229;
    margin-top: 2rem;
    padding-top: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    color: #8B91A0;
}

@media (max-width: 900px) {
    .lat-footer-cols { grid-template-columns: 1fr 1fr; }
    .lat-buscador-tienda { display: none; }
    .logo-tienda span { display: none; }
}

/* ---- Panel deslizante de carrito ---- */
.lat-carrito-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11,14,20,0.4);
    z-index: 80;
}

.lat-carrito-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background: white;
    z-index: 81;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 50px rgba(0,0,0,0.2);
}

.lat-carrito-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lat-line);
}

.lat-carrito-panel-header h2 { font-size: 1.05rem; margin: 0; }
.lat-carrito-panel-header button { background: transparent; border: none; clip-path: none; padding: 0; cursor: pointer; color: var(--lat-mist); }
.lat-carrito-panel-header button:hover { color: var(--lat-ink); }

.lat-carrito-vacio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--lat-mist);
}

.lat-carrito-vacio p { font-size: 1rem; }
.lat-carrito-vacio button { clip-path: none; background: var(--lat-volt); color: white; border: none; padding: 0.7rem 1.5rem; border-radius: 8px; cursor: pointer; }

.lat-carrito-panel-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

.lat-carrito-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.lat-carrito-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; border: 1px solid var(--lat-line); flex-shrink: 0; }
.lat-carrito-item-info { flex: 1; }
.lat-carrito-item-info p { font-size: 0.85rem; margin: 0 0 0.5rem; }

.lat-carrito-item-cantidad {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    background: white;
}

.lat-carrito-item-cantidad button {
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: none;
    background: #F3F4F6;
    cursor: pointer;
    clip-path: none;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #374151;
    transition: background 0.12s;
}

.lat-carrito-item-cantidad button:hover { background: #E5E7EB; color: var(--lat-volt); }

.lat-carrito-item-cantidad span {
    width: 32px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
    border-left: 1.5px solid #D1D5DB;
    border-right: 1.5px solid #D1D5DB;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.lat-carrito-item-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; font-family: var(--lat-mono); font-size: 0.9rem; }

.lat-carrito-item-precio button {
    background: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    clip-path: none;
    cursor: pointer;
    color: #DC2626;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}

.lat-carrito-item-precio button:hover { background: #DC2626; color: white; border-color: #DC2626; }
.lat-carrito-item-precio button svg { stroke: currentColor; }

.lat-carrito-panel-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--lat-line);
    background: var(--lat-surface);
}

.lat-carrito-totales { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.lat-carrito-totales div { display: flex; justify-content: space-between; font-size: 0.88rem; }
.lat-carrito-total-final { font-weight: 700; font-size: 1rem !important; border-top: 1px solid var(--lat-line); padding-top: 0.5rem; margin-top: 0.25rem; }
.lat-carrito-total-final strong { color: var(--lat-volt); font-family: var(--lat-mono); font-size: 1.1rem; }

.lat-btn-finalizar {
    display: block;
    text-align: center;
    background: var(--lat-volt);
    color: white;
    text-decoration: none;
    padding: 0.85rem;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.lat-btn-seguir {
    display: block;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 1px solid var(--lat-line);
    color: var(--lat-ink);
    padding: 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    clip-path: none;
}

.lat-btn-seguir:hover { border-color: var(--lat-volt); color: var(--lat-volt); }

/* ============================================================
   HOME — SECCIONES Y COMPONENTES
   ============================================================ */

.lat-home-seccion {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

/* Hero */
.lat-hero {
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    background: #0B0E14;
}

.lat-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lat-hero-slide.activo { opacity: 1; }

.lat-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lat-hero-texto {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 420px;
    color: white;
}

.lat-hero-texto h1 {
    font-size: 2.6rem;
    font-family: var(--lat-display);
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.lat-hero-texto h1 em { color: var(--lat-volt); font-style: normal; }
.lat-hero-texto p { font-size: 1rem; opacity: 0.85; margin: 0 0 1.25rem; }

.lat-hero-cta {
    display: inline-block;
    background: var(--lat-volt);
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
}

.lat-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    clip-path: none;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.lat-hero-prev { left: 1rem; }
.lat-hero-next { right: 1rem; }
.lat-hero-nav:hover { background: rgba(255,255,255,0.4); }

.lat-hero-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
}

.lat-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    clip-path: none;
    padding: 0;
    transition: background 0.2s;
}

.lat-hero-dot.activo { background: white; }

/* Beneficios */
.lat-beneficios-bar {
    background: white;
    border-top: 1px solid #E8EAED;
    border-bottom: 1px solid #E8EAED;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.lat-beneficio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-right: 1px solid #E8EAED;
}

.lat-beneficio:last-child { border-right: none; }
.lat-beneficio strong { display: block; font-size: 0.85rem; }
.lat-beneficio span { font-size: 0.78rem; color: var(--lat-mist); }

/* Categorías pills */
.lat-cats-pills {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.lat-cats-pills::-webkit-scrollbar { display: none; }

.lat-cat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--lat-ink);
    flex-shrink: 0;
    min-width: 90px;
}

.lat-cat-pill-icono {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: white;
    border: 2px solid #E8EAED;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lat-cat-pill-icono img { width: 100%; height: 100%; object-fit: cover; }
.lat-cat-pill:hover .lat-cat-pill-icono,
.lat-cat-pill.activo .lat-cat-pill-icono {
    border-color: var(--lat-volt);
    box-shadow: 0 0 0 4px rgba(47,91,255,0.1);
}

.lat-cat-pill span {
    font-size: 0.78rem;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lat-cat-pill-icono-mas {
    background: white;
    border-style: dashed;
    border-color: var(--lat-volt);
    color: var(--lat-volt);
}

.lat-cat-pill-mas {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-family: inherit;
    clip-path: none;
}

.lat-cat-pill-mas span { color: var(--lat-volt); }

/* Tabs de productos */
.lat-home-seccion-header {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #E8EAED;
    padding-bottom: 0.75rem;
}

.lat-home-seccion-header h2 {
    font-size: 1.15rem;
    margin: 0 1.5rem 0 0;
    white-space: nowrap;
}

.lat-tabs-productos {
    display: flex;
    gap: 0;
}

.lat-tabs-productos button {
    background: transparent;
    border: none;
    clip-path: none;
    padding: 0.35rem 1rem;
    font-size: 0.88rem;
    color: var(--lat-mist);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.lat-tabs-productos button.activo {
    color: var(--lat-volt);
    border-bottom-color: var(--lat-volt);
    font-weight: 600;
}

.lat-ver-todos-link {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--lat-volt);
    text-decoration: none;
    white-space: nowrap;
}

/* Grid de productos */
.lat-productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.lat-prod-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E8EAED;
    position: relative;
    transition: box-shadow 0.2s;
}

.lat-prod-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); }

.lat-prod-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: #DC2626;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    z-index: 1;
}

.lat-prod-img {
    display: block;
    height: 180px;
    padding: 0.75rem;
    background: #FAFAFA;
}

.lat-prod-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lat-prod-info { padding: 0.75rem; }
.lat-prod-marca { font-size: 0.72rem; color: var(--lat-mist); display: block; margin-bottom: 0.2rem; }
.lat-prod-nombre { font-size: 0.85rem; text-decoration: none; color: var(--lat-ink); display: block; margin-bottom: 0.5rem; line-height: 1.35; }
.lat-prod-nombre:hover { color: var(--lat-volt); }

.lat-prod-precio { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.25rem; }
.lat-prod-precio strong { font-size: 1rem; font-family: var(--lat-mono); }
.lat-prod-precio s { font-size: 0.8rem; color: var(--lat-mist); }
.lat-prod-envio { font-size: 0.75rem; color: #16A34A; margin: 0 0 0.75rem; }

.lat-prod-acciones { display: flex; align-items: center; gap: 0.4rem; }

.lat-btn-agregar {
    flex: 1;
    background: var(--lat-volt);
    color: white;
    border: none;
    clip-path: none;
    border-radius: 6px;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
}

.lat-btn-agregar:hover { background: var(--lat-volt-deep); }

.lat-btn-fav {
    width: 34px;
    height: 34px;
    border: 1px solid #E8EAED;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    clip-path: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lat-mist);
}

.lat-btn-fav:hover { border-color: #DC2626; color: #DC2626; }

/* Banners de categorías */
.lat-banners-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.lat-banner-cat {
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    background: linear-gradient(135deg, var(--lat-volt), #1A3A9E);
    background-size: cover;
    background-position: center;
    position: relative;
}

.lat-banner-cat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 60%);
}

.lat-banner-cat-contenido {
    position: relative;
    z-index: 1;
    padding: 1rem;
}

.lat-banner-cat-contenido strong { display: block; color: white; font-size: 1rem; }
.lat-banner-cat-contenido span {
    display: inline-block;
    color: white;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    margin-top: 0.25rem;
}

/* Garantías */
.lat-garantias {
    background: white;
    border-radius: 10px;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
}

.lat-garantia {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border-right: 1px solid var(--lat-line);
}

.lat-garantia:last-child { border-right: none; }
.lat-garantia strong { display: block; font-size: 0.88rem; }
.lat-garantia span { font-size: 0.78rem; color: var(--lat-mist); }

/* Toast de carrito */
.lat-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #0B0E14;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.88rem;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Responsive */
@media (max-width: 900px) {
    .lat-beneficios-bar { grid-template-columns: 1fr 1fr; }
    .lat-banners-cats { grid-template-columns: 1fr 1fr; }
    .lat-garantias { grid-template-columns: 1fr 1fr; }
    .lat-hero { height: 320px; }
    .lat-hero-texto h1 { font-size: 1.8rem; }
    .lat-productos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .lat-home-seccion { padding: 1rem; }
    .lat-beneficios-bar { grid-template-columns: 1fr; }
    .lat-banners-cats { grid-template-columns: 1fr; }
    .lat-garantias { grid-template-columns: 1fr; }
    .lat-garantia { border-right: none; border-bottom: 1px solid var(--lat-line); }
}

/* ── Dropdown Mi Cuenta ─────────────────────────────────────── */
.lat-cuenta-wrap {
    position: relative;
}

.lat-cuenta-overlay {
    position: fixed;
    inset: 0;
    z-index: 59;
}

.lat-cuenta-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    border: 1px solid var(--lat-line);
    z-index: 60;
    overflow: hidden;
}

.lat-cuenta-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: var(--lat-paper);
    border-bottom: 1px solid var(--lat-line);
}

.lat-cuenta-header svg {
    background: white;
    border-radius: 50%;
    padding: 4px;
    border: 1px solid var(--lat-line);
    flex-shrink: 0;
}

.lat-cuenta-header strong {
    display: block;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lat-cuenta-header span {
    font-size: 0.75rem;
    color: var(--lat-mist);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lat-cuenta-menu {
    padding: 0.4rem 0;
}

.lat-cuenta-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    text-decoration: none;
    color: var(--lat-ink);
    font-size: 0.88rem;
    transition: background 0.1s;
}

.lat-cuenta-menu a:hover {
    background: var(--lat-paper);
}

.lat-cuenta-menu a svg {
    color: var(--lat-mist);
    flex-shrink: 0;
}

.lat-cuenta-staff {
    color: var(--lat-volt) !important;
    font-weight: 600;
}

.lat-cuenta-staff svg {
    color: var(--lat-volt) !important;
}

.lat-cuenta-separador {
    height: 1px;
    background: var(--lat-line);
    margin: 0.3rem 0;
}

.lat-cuenta-salir {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 1.1rem;
    background: transparent;
    border: none;
    clip-path: none;
    color: #DC2626;
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
}

.lat-cuenta-salir:hover {
    background: #FEF2F2;
}

.lat-cuenta-salir svg {
    color: #DC2626;
}

/* ── CORRECCIONES VISUALES HOME v2 ────────────────────────── */

/* Fondo general con color suave */
.app-shell { background: #F0F4FF; }
.app-main-tienda { background: #F0F4FF; }

/* Secciones sobre el fondo */
.lat-home-seccion { background: transparent; }

/* Cards de producto con sombra más pronunciada */
.lat-prod-card { background: white; box-shadow: 0 2px 8px rgba(47,91,255,0.06); }
.lat-prod-card:hover { box-shadow: 0 8px 28px rgba(47,91,255,0.14); }

/* Beneficios sobre fondo blanco */
.lat-beneficios-bar { background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* Hero: texto más grande y legible */
.lat-hero { height: 600px; }
.lat-hero-texto h1 { font-size: 2.8rem; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.lat-hero-texto p  { text-shadow: 0 1px 6px rgba(0,0,0,0.35); }

/* Categorías pills: imagen real que llena el círculo */
.lat-cat-pill-icono {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #E0E7FF;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.lat-cat-pill-icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.lat-cat-pill:hover .lat-cat-pill-icono {
    border-color: var(--lat-volt);
    box-shadow: 0 0 0 4px rgba(47,91,255,0.12);
    transform: translateY(-2px);
}

.lat-cat-pill.activo .lat-cat-pill-icono {
    border-color: var(--lat-volt);
    box-shadow: 0 0 0 4px rgba(47,91,255,0.12);
}

.lat-cat-pill span {
    font-size: 0.78rem;
    text-align: center;
    color: var(--lat-ink);
    max-width: 76px;
    white-space: normal;
    line-height: 1.2;
}

/* Sección de categorías con fondo blanco */
.lat-home-seccion.lat-seccion-cats {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
    margin-bottom: 0.5rem;
}

/* Productos destacados sobre blanco */
.lat-home-seccion.lat-seccion-prods {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
}

/* Garantías */
.lat-garantias {
    background: white;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
}

/* Banners categorías */
.lat-banners-cats { border-radius: 12px; overflow: hidden; }
.lat-banner-cat { transition: transform 0.2s; }
.lat-banner-cat:hover { transform: scale(1.02); }

/* Header sticky con sombra suave */
.app-header-tienda {
    box-shadow: 0 2px 12px rgba(47,91,255,0.08);
    border-bottom: none;
}

/* Nav secundario sin borde duro */
.lat-nav-tienda {
    box-shadow: 0 1px 6px rgba(47,91,255,0.06);
    border-bottom: none;
    top: 72px;
}

/* Flyout de categorías también sobre fondo azulado */
.lat-flyout-categorias { box-shadow: 0 8px 32px rgba(47,91,255,0.14); }

/* Espacio entre secciones de la home */
.lat-home-seccion { margin-bottom: 1rem; }
.lat-home-seccion.lat-seccion-cats { padding: 1.25rem 2rem; }
.lat-home-seccion.lat-seccion-prods { padding: 1.5rem 2rem; }

/* Beneficios */
.lat-beneficios-bar { border-top: none; border-bottom: none; }
.lat-beneficio { padding: 1rem 2rem; }

/* ══════════════════════════════════════════════════
   MEGA MENÚ DE CATEGORÍAS (estilo Falabella)
   ══════════════════════════════════════════════════ */

.lat-mega-menu {
    position: fixed;
    top: 113px;          /* altura header + nav */
    left: 0;
    width: 100%;
    max-width: 900px;
    height: calc(100vh - 113px);
    max-height: 600px;
    display: flex;
    background: white;
    z-index: 46;
    box-shadow: 4px 0 32px rgba(0,0,0,0.18);
    border-radius: 0 12px 12px 0;
    overflow: hidden;
}

/* Columna izquierda — lista de categorías */
.lat-mega-izq {
    width: 240px;
    flex-shrink: 0;
    background: #F7F8FA;
    overflow-y: auto;
    border-right: 1px solid var(--lat-line);
    padding: 0.5rem 0;
}

.lat-mega-cat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--lat-ink);
    transition: background 0.12s;
    user-select: none;
}

.lat-mega-cat-item:hover,
.lat-mega-cat-item.activo {
    background: white;
    color: var(--lat-volt);
}

.lat-mega-cat-item.activo {
    border-left: 3px solid var(--lat-volt);
    font-weight: 600;
}

.lat-mega-cat-icono {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--lat-paper);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lat-mega-cat-icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lat-mega-arrow {
    margin-left: auto;
    color: var(--lat-mist);
    flex-shrink: 0;
}

.lat-mega-cat-item.activo .lat-mega-arrow { color: var(--lat-volt); }

/* Columna derecha — contenido de la categoría */
.lat-mega-der {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.lat-mega-der-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.5rem;
    color: white;
    flex-shrink: 0;
}

.lat-mega-der-header img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.4);
}

.lat-mega-der-header strong {
    font-size: 1.05rem;
    font-family: var(--lat-display);
}

.lat-mega-vertodo {
    margin-left: auto;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

.lat-mega-der-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 1.25rem 1.5rem;
    flex: 1;
}

.lat-mega-grupo {
    min-width: 180px;
    flex: 1;
    margin-right: 2rem;
    margin-bottom: 1.25rem;
}

.lat-mega-grupo-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lat-mist);
    margin: 0 0 0.6rem;
}

.lat-mega-subs {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.lat-mega-subs a {
    font-size: 0.88rem;
    color: var(--lat-ink);
    text-decoration: none;
    padding: 0.3rem 0;
    transition: color 0.1s, padding-left 0.1s;
    border-radius: 4px;
}

.lat-mega-subs a:hover {
    color: var(--lat-volt);
    padding-left: 6px;
}

.lat-mega-marcas a {
    color: var(--lat-mist);
    font-size: 0.85rem;
}

.lat-mega-marcas a:hover { color: var(--lat-volt); }

.lat-mega-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--lat-mist);
    gap: 0.75rem;
    font-size: 0.88rem;
}

@media (max-width: 768px) {
    .lat-mega-menu { max-width: 100%; }
    .lat-mega-izq { width: 160px; }
    .lat-mega-der-body { padding: 1rem; }
}

/* ══════════════════════════════════════════════════
   DETALLE DE PRODUCTO v2
   ══════════════════════════════════════════════════ */

/* Breadcrumb */
.lat-breadcrumb-v2 {
    padding: 0.75rem 2rem;
    font-size: 0.82rem;
    color: var(--lat-mist);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border-bottom: 1px solid var(--lat-line);
}

.lat-breadcrumb-v2 a {
    color: var(--lat-volt);
    text-decoration: none;
}

.lat-breadcrumb-v2 a:hover { text-decoration: underline; }
.lat-breadcrumb-v2 span { color: var(--lat-mist); }
.lat-breadcrumb-v2 span:last-child { color: var(--lat-ink); }

/* Layout principal */
.lat-detalle-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    min-height: 70vh;
}

/* ── Galería ── */
.lat-galeria-v2 {
    display: flex;
    gap: 0.75rem;
    padding: 2rem;
    border-right: 1px solid var(--lat-line);
}

.lat-thumbs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 64px;
    flex-shrink: 0;
}

.lat-thumb {
    width: 64px;
    height: 64px;
    border: 2px solid var(--lat-line);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--lat-paper);
    transition: border-color 0.15s;
}

.lat-thumb.activa { border-color: var(--lat-volt); }
.lat-thumb:hover { border-color: var(--lat-volt-deep); }

.lat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lat-img-principal {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lat-paper);
    border-radius: 8px;
    overflow: hidden;
    min-height: 400px;
}

.lat-img-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 520px;
}

/* ── Info producto ── */
.lat-info-v2 {
    padding: 2rem 2rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lat-v2-marca {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lat-mist);
    letter-spacing: 0.05em;
}

.lat-v2-titulo {
    font-size: 1.5rem;
    font-family: var(--lat-display);
    line-height: 1.3;
    margin: 0;
    color: var(--lat-ink);
}

.lat-v2-bullets {
    padding-left: 1.1rem;
    margin: 0;
    color: var(--lat-ink);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Precios */
.lat-v2-precios {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 0;
    border-top: 1px solid var(--lat-line);
    border-bottom: 1px solid var(--lat-line);
    margin: 0.25rem 0;
}

.lat-v2-precio-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lat-v2-etiqueta {
    width: 130px;
    font-size: 0.88rem;
    color: var(--lat-mist);
    flex-shrink: 0;
}

.lat-v2-precio-esp {
    font-size: 1.6rem;
    font-family: var(--lat-mono);
    color: #DC2626;
    font-weight: 700;
}

.lat-v2-precio-reg {
    font-size: 1rem;
    font-family: var(--lat-mono);
    color: var(--lat-mist);
}

.lat-v2-badge-desc {
    background: #DC2626;
    color: white;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

/* Variantes */
.lat-v2-variantes { display: flex; flex-direction: column; gap: 0.4rem; }
.lat-v2-variantes label { font-size: 0.85rem; font-weight: 600; }
.lat-v2-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.lat-v2-chip {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    background: white;
    clip-path: none;
    transition: border-color 0.15s, background 0.15s;
}

.lat-v2-chip.activo {
    border-color: var(--lat-volt);
    background: #EEF2FF;
    color: var(--lat-volt);
    font-weight: 600;
}

.lat-v2-no-disponible { font-size: 0.85rem; color: #DC2626; }

/* Combo */
.lat-v2-combo {
    background: var(--lat-paper);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    margin: 0;
}

/* Compra */
.lat-v2-compra {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.lat-v2-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--lat-line);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.lat-v2-stepper button {
    width: 40px;
    height: 46px;
    background: var(--lat-paper);
    border: none;
    clip-path: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lat-ink);
    transition: background 0.1s;
}

.lat-v2-stepper button:hover { background: var(--lat-line); }
.lat-v2-stepper span {
    width: 50px;
    text-align: center;
    font-family: var(--lat-mono);
    font-size: 1rem;
    font-weight: 600;
    border-left: 1px solid var(--lat-line);
    border-right: 1px solid var(--lat-line);
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lat-v2-btn-agregar {
    flex: 1;
    height: 46px;
    background: #16A34A;
    color: white;
    border: none;
    clip-path: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

.lat-v2-btn-agregar:hover:not(:disabled) { background: #15803D; }
.lat-v2-btn-agregar:disabled { background: var(--lat-mist); cursor: not-allowed; }

/* Feedback */
.lat-v2-ok  { font-size: 0.85rem; color: #16A34A; border: 1px solid #16A34A; background: #F0FDF4; padding: 0.5rem 0.75rem; border-radius: 6px; }
.lat-v2-error { font-size: 0.85rem; color: #DC2626; border: 1px solid #DC2626; background: #FEF2F2; padding: 0.5rem 0.75rem; border-radius: 6px; }

.lat-v2-sku { font-size: 0.78rem; color: var(--lat-mist); margin-top: auto; }

/* Acordeón de descripción */
.lat-v2-acordeon {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid var(--lat-line);
}

.lat-v2-acordeon-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 2rem;
    background: #16A34A;
    color: white;
    border: none;
    clip-path: none;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: left;
}

.lat-v2-acordeon-body {
    padding: 1.5rem 2rem;
    background: white;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--lat-ink);
}

/* Skeleton */
.lat-detalle-skeleton {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    background: white;
    max-width: 1200px;
    margin: 0 auto;
}

.lat-skeleton { background: linear-gradient(90deg, #E8EAF0 25%, #F4F5F8 50%, #E8EAF0 75%); background-size: 200%; animation: shimmer 1.4s infinite; border-radius: 8px; }
.lat-sk-img { width: 500px; height: 400px; flex-shrink: 0; }
.lat-sk-titulo { height: 36px; margin-bottom: 1rem; }
.lat-sk-precio { height: 48px; width: 60%; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Responsive */
@media (max-width: 900px) {
    .lat-detalle-v2 { grid-template-columns: 1fr; }
    .lat-galeria-v2 { border-right: none; border-bottom: 1px solid var(--lat-line); }
    .lat-img-principal { min-height: 280px; }
}

/* ── Header centrado ───────────────────────────────── */
.app-header-tienda {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 2rem;
}

.lat-buscador-tienda {
    /* Ya tiene flex: se centra por el grid */
    max-width: none;
    width: 100%;
}

.lat-header-acciones {
    justify-content: flex-end;
}

/* ── CORRECCIONES v3 ─────────────────────────────────────────── */

/* Header con fondo fuerte */
.app-header-tienda {
    background: #0B1F5C !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.logo-tienda { color: white !important; }
.logo-tienda span { color: rgba(255,255,255,0.7) !important; }

/* Buscador sobre fondo oscuro */
.lat-buscador-tienda {
    border-color: white !important;
    border-width: 2px !important;
}

.lat-buscador-tienda input {
    background: white;
    color: var(--lat-ink);
}

/* Botones de cuenta y carrito sobre fondo oscuro */
.lat-header-accion {
    color: white !important;
}

.lat-header-accion:hover {
    background: rgba(255,255,255,0.12) !important;
}

.lat-header-accion small { color: rgba(255,255,255,0.7) !important; }

/* Hero: contener la imagen correctamente para que no se desborde */
.lat-hero {
    height: 600px !important;
    overflow: hidden !important;
    position: relative;
}

.lat-hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
}

/* Beneficios: ahora son 3 columnas */
.lat-beneficios-bar { grid-template-columns: repeat(3, 1fr) !important; }

/* ── Panel carrito: fondo oscuro del header no afecta al panel blanco ── */
.lat-carrito-panel { color: var(--lat-ink) !important; }
.lat-carrito-panel-header h2 { color: var(--lat-ink); }
.lat-carrito-item-info p { color: var(--lat-ink); }
.lat-carrito-item-precio span { color: var(--lat-ink); }
.lat-carrito-totales div { color: var(--lat-ink); }

/* Botón del carrito en header oscuro: mantener texto blanco */
.app-header-tienda .lat-header-accion span,
.app-header-tienda .lat-header-accion small {
    color: white !important;
}

/* Badge del carrito visible sobre fondo oscuro */
.lat-badge-carrito {
    background: var(--lat-volt) !important;
    color: white !important;
}

/* ══════════════════════════════════════════════════
   MI PERFIL
   ══════════════════════════════════════════════════ */

.lat-perfil-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: calc(100vh - 120px);
    background: #F0F4FF;
    max-width: 1100px;
    margin: 0 auto;
    gap: 1.5rem;
    padding: 1.5rem;
}

/* Sidebar */
.lat-perfil-sidebar {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0;
    height: fit-content;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
}

.lat-perfil-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: var(--lat-ink);
    font-size: 0.88rem;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    clip-path: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.lat-perfil-nav:hover {
    background: #F0F4FF;
    color: var(--lat-volt);
}

.lat-perfil-nav.activo {
    border-left-color: var(--lat-volt);
    color: var(--lat-volt);
    background: #EEF2FF;
    font-weight: 600;
}

.lat-perfil-nav svg { color: inherit; flex-shrink: 0; }

.lat-perfil-separador {
    height: 1px;
    background: var(--lat-line);
    margin: 0.4rem 0;
}

.lat-perfil-salir { color: #DC2626 !important; }
.lat-perfil-salir:hover { background: #FEF2F2 !important; color: #DC2626 !important; }

/* Main content */
.lat-perfil-main { display: flex; flex-direction: column; gap: 1.25rem; }
.lat-perfil-main h1 { font-size: 1.4rem; font-family: var(--lat-display); margin: 0 0 0.5rem; }

.lat-perfil-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
    overflow: hidden;
}

.lat-perfil-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--lat-line);
}

.lat-perfil-card-header h2 { font-size: 1rem; margin: 0; }

.lat-perfil-editar {
    background: transparent;
    border: none;
    clip-path: none;
    color: var(--lat-volt);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.lat-perfil-campos { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }

.lat-perfil-campo { display: flex; flex-direction: column; gap: 0.2rem; }
.lat-perfil-etiqueta { font-size: 0.8rem; color: var(--lat-mist); font-weight: 500; }
.lat-perfil-campo span:last-child { font-size: 0.95rem; color: var(--lat-ink); }

.lat-perfil-input {
    border: 1px solid var(--lat-line);
    border-radius: 7px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    width: 100%;
    max-width: 420px;
    outline: none;
    transition: border-color 0.15s;
}

.lat-perfil-input:focus { border-color: var(--lat-volt); }

.lat-perfil-acciones { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

/* Seguridad */
.lat-perfil-seguridad { padding: 0.5rem 0; }

.lat-perfil-seg-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--lat-ink);
    border-bottom: 1px solid var(--lat-line);
    transition: background 0.12s;
}

.lat-perfil-seg-item:last-child { border-bottom: none; }
.lat-perfil-seg-item:hover { background: #F8FAFF; }

.lat-perfil-seg-icono {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EEF2FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lat-volt);
}

.lat-perfil-seg-item div { flex: 1; }
.lat-perfil-seg-item div strong { display: block; font-size: 0.9rem; }
.lat-perfil-seg-item div span { font-size: 0.78rem; color: var(--lat-mist); }
.lat-perfil-chevron { color: var(--lat-mist); flex-shrink: 0; }

/* ── Modal Cerrar Sesión ── */
.lat-modal-cs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
}

.lat-modal-cs {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    width: 90%;
    max-width: 360px;
    z-index: 201;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.lat-modal-cs-icono {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #EEF2FF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.lat-modal-cs h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.lat-modal-cs p { font-size: 0.88rem; color: var(--lat-mist); margin: 0 0 1.75rem; line-height: 1.5; }

.lat-modal-cs-botones { display: flex; gap: 0.75rem; }

.lat-modal-cs-cancelar {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--lat-line);
    border-radius: 8px;
    background: white;
    clip-path: none;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--lat-ink);
}

.lat-modal-cs-cancelar:hover { border-color: var(--lat-volt); }

.lat-modal-cs-confirmar {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 8px;
    background: #DC2626;
    color: white;
    clip-path: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.lat-modal-cs-confirmar:hover { background: #B91C1C; }

@media (max-width: 768px) {
    .lat-perfil-layout { grid-template-columns: 1fr; }
    .lat-perfil-sidebar { display: none; }
}

/* ══ CORRECCIONES DEFINITIVAS v4 ═══════════════════════════════ */

/* Hero: aislado del resto del layout, sin desbordamiento */
.app-main-tienda > .lat-hero {
    display: block;
    width: 100%;
    height: 600px !important;
    max-height: 600px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0;
}

.app-main-tienda > .lat-hero .lat-hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.app-main-tienda > .lat-hero .lat-hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    vertical-align: bottom;
}

/* Nav: centrado horizontal */
.lat-nav-tienda-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 1.5rem !important;
    gap: 0 !important;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* El nav ocupa ancho completo para que el inner se centre */
.lat-nav-tienda > .lat-nav-tienda-inner {
    width: 100%;
    box-sizing: border-box;
}

/* ── Botón favorito: forzar color visible ───────────────────── */
.lat-btn-fav {
    color: #8B91A0 !important;
    background: white !important;
}

.lat-btn-fav svg {
    stroke: #8B91A0 !important;
    display: block;
}

.lat-btn-fav:hover { border-color: #DC2626 !important; }
.lat-btn-fav:hover svg { stroke: #DC2626 !important; }


/* Slides absolutas dentro del hero */
div.lat-hero div.lat-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Imagen ocupa todo el slide, centrada */
div.lat-hero div.lat-hero-slide > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    display: block !important;
}

/* Botones de navegación DENTRO del hero, sin salirse */
.lat-hero-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

.lat-hero-prev { left: 1rem !important; }
.lat-hero-next { right: 1rem !important; }

/* ── Color picker en Configuración ─────────────────────────── */
.lat-color-picker-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.lat-color-input {
    width: 44px;
    height: 44px;
    border: 2px solid var(--lat-line);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: white;
}

.lat-color-hex {
    width: 100px;
    font-family: var(--lat-mono);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lat-line);
    border-radius: 7px;
}

.lat-color-preview {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
    transition: background 0.2s;
}

/* Vista previa del header */
.lat-preview-header {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background 0.3s;
    margin-top: 0.25rem;
}

.lat-preview-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lat-preview-img {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
}

.lat-preview-logo strong,
.lat-preview-logo small,
.lat-preview-search span,
.lat-preview-actions span {
    display: block;
    color: white;
    font-size: 0.78rem;
}

.lat-preview-search {
    flex: 1;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lat-preview-search button {
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    clip-path: none;
    transition: background 0.2s;
}

.lat-preview-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Presets de colores */
.lat-config-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lat-line);
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.lat-colores-preset {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lat-preset-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15);
    cursor: pointer;
    clip-path: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.lat-preset-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Vista previa del nav en Configuración */
.lat-preview-nav {
    border-radius: 0 0 8px 8px;
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.3s;
}

.lat-preview-nav span {
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    cursor: default;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.lat-preview-nav span.activo {
    color: white;
    font-weight: 600;
    border-bottom: 2px solid white;
}

.lat-preview-nav span:first-child {
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    color: white;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════
   MODAL DE LOGIN FLOTANTE
   ══════════════════════════════════════════════════ */

.lat-login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 300;
    backdrop-filter: blur(3px);
}

.lat-login-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    z-index: 301;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    max-height: 90vh;
    overflow-y: auto;
}

.lat-login-cerrar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    clip-path: none;
    cursor: pointer;
    color: var(--lat-mist);
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.lat-login-cerrar:hover { color: var(--lat-ink); background: var(--lat-paper); }

.lat-login-titulo {
    text-align: center;
    font-size: 1.35rem;
    font-family: var(--lat-display);
    margin: 0 0 1.5rem;
}

/* Botones sociales */
.lat-login-sociales {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.lat-btn-social {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 8px;
    clip-path: none;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0.7;
}

.lat-btn-facebook { background: #1877F2; color: white; }
.lat-btn-google   { background: #EA4335; color: white; }

/* Separador */
.lat-login-separador {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: var(--lat-mist);
    font-size: 0.82rem;
}

.lat-login-separador::before,
.lat-login-separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lat-line);
}

/* Inputs */
.lat-login-form { display: flex; flex-direction: column; gap: 0.75rem; }

.lat-login-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid #D1D5DB;
    border-radius: 999px;
    padding: 0 1.1rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.lat-login-input:focus { border-color: var(--lat-volt); }

.lat-login-pass-wrap {
    position: relative;
}

.lat-login-pass-wrap .lat-login-input { padding-right: 3rem; }

.lat-login-ojo {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    clip-path: none;
    cursor: pointer;
    color: var(--lat-mist);
    padding: 0;
    display: flex;
}

/* Checkbox */
.lat-login-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lat-ink);
    cursor: pointer;
    letter-spacing: 0.03em;
}

.lat-login-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #16A34A;
    cursor: pointer;
}

/* Error */
.lat-login-error {
    font-size: 0.83rem;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin: 0;
}

/* Botón submit */
.lat-login-btn-submit {
    width: 100%;
    height: 48px;
    background: #16A34A;
    color: white;
    border: none;
    clip-path: none;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.25rem;
}

.lat-login-btn-submit:hover:not(:disabled) { background: #15803D; }
.lat-login-btn-submit:disabled { background: var(--lat-mist); cursor: not-allowed; }

.lat-login-olvido {
    text-align: center;
    font-size: 0.83rem;
    color: var(--lat-mist);
    text-decoration: none;
    display: block;
}

.lat-login-olvido:hover { color: var(--lat-volt); }

/* Footer del modal */
.lat-login-footer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--lat-mist);
    border-top: 1px solid var(--lat-line);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}

.lat-login-footer a { color: var(--lat-volt); font-weight: 600; text-decoration: none; }
.lat-login-footer a:hover { text-decoration: underline; }

/* Botones del mega menú que se ven como links */
.lat-mega-subs button,
.lat-mega-marcas button {
    background: transparent;
    border: none;
    clip-path: none;
    color: var(--lat-ink);
    font-size: 0.88rem;
    padding: 0.3rem 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: block;
    transition: color 0.1s, padding-left 0.1s;
    border-radius: 0;
    font-family: inherit;
}

.lat-mega-subs button:hover { color: var(--lat-volt); padding-left: 6px; }

.lat-mega-marcas button { color: var(--lat-mist); font-size: 0.85rem; }
.lat-mega-marcas button:hover { color: var(--lat-volt); }

/* Botón "Ver todo" en el header del panel derecho */
.lat-mega-vertodo {
    margin-left: auto;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.9) !important;
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 6px !important;
    padding: 0.25rem 0.75rem !important;
    cursor: pointer;
    clip-path: none !important;
    font-family: inherit;
    transition: background 0.15s;
}

.lat-mega-vertodo:hover { background: rgba(255,255,255,0.35) !important; }

/* ══════════════════════════════════════════════════
   PÁGINA CATÁLOGO CON FILTROS
   ══════════════════════════════════════════════════ */

/* Subcategorías horizontales */
.lat-cat-subcat-bar {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem 2rem;
    background: white;
    border-bottom: 1px solid var(--lat-line);
    scrollbar-width: none;
}

.lat-subcat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--lat-ink);
    font-size: 0.8rem;
    min-width: 80px;
    text-align: center;
    padding: 0.5rem;
    border-radius: 8px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.lat-subcat-chip img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--lat-line);
    background: var(--lat-paper);
}

.lat-subcat-chip.activo,
.lat-subcat-chip:hover { color: var(--lat-volt); }

/* Layout principal del catálogo */
.lat-catalogo-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    min-height: 70vh;
    background: #F0F4FF;
}

/* Sidebar de filtros */
.lat-catalogo-sidebar {
    background: white;
    border-right: 1px solid var(--lat-line);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lat-filtro-grupo h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--lat-ink);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

/* Tags de subcategoría */
.lat-filtro-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.lat-filtro-tag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--lat-line);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--lat-ink);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.lat-filtro-tag:hover { border-color: var(--lat-volt); color: var(--lat-volt); }
.lat-filtro-tag.activo { background: var(--lat-volt); color: white; border-color: var(--lat-volt); }

/* Rangos de precio */
.lat-filtro-precios { display: flex; flex-direction: column; gap: 0.25rem; }

.lat-filtro-precio-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.83rem;
    color: var(--lat-ink);
    text-decoration: none;
    padding: 0.3rem 0;
    border-radius: 4px;
    transition: color 0.15s;
}

.lat-filtro-precio-item span { color: var(--lat-mist); }
.lat-filtro-precio-item:hover,
.lat-filtro-precio-item.activo { color: var(--lat-volt); font-weight: 600; }

/* Marcas */
.lat-filtro-marcas { display: flex; flex-direction: column; gap: 0.15rem; }

.lat-filtro-marca-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--lat-ink);
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color 0.15s;
}

.lat-filtro-marca-item span { color: var(--lat-mist); font-size: 0.8rem; }
.lat-filtro-marca-item:hover,
.lat-filtro-marca-item.activo { color: var(--lat-volt); font-weight: 600; }

.lat-filtro-ver-mas {
    background: none;
    border: none;
    clip-path: none;
    color: var(--lat-volt);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0;
    text-align: left;
}

.lat-limpiar-filtros {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: #DC2626;
    text-decoration: none;
    padding: 0.5rem 0;
    border-top: 1px solid var(--lat-line);
}

/* Área de contenido */
.lat-catalogo-contenido {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Barra superior */
.lat-catalogo-barra {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: white;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 1px 4px rgba(47,91,255,0.06);
    flex-wrap: wrap;
}

.lat-catalogo-total { font-size: 0.88rem; color: var(--lat-mist); flex-shrink: 0; }

.lat-catalogo-orden {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.lat-orden-select {
    border: 1px solid var(--lat-line);
    border-radius: 7px;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: 0.88rem;
    appearance: auto;
    cursor: pointer;
    background: white;
}

/* Paginación */
.lat-paginacion {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

.lat-pag-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--lat-line);
    background: white;
    font-size: 0.85rem;
    color: var(--lat-ink);
    text-decoration: none;
    padding: 0 0.5rem;
    transition: border-color 0.15s, background 0.15s;
}

.lat-pag-btn:hover { border-color: var(--lat-volt); color: var(--lat-volt); }
.lat-pag-btn.activo { background: var(--lat-volt); color: white; border-color: var(--lat-volt); font-weight: 600; }

.lat-paginacion-bottom { justify-content: center; margin-top: 1rem; }

/* Grid de productos en catálogo */
.lat-catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.lat-cat-card {
    text-decoration: none;
    color: var(--lat-ink);
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--lat-line);
    transition: box-shadow 0.15s, transform 0.15s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.lat-cat-card:hover { box-shadow: 0 6px 20px rgba(47,91,255,0.12); transform: translateY(-2px); }

.lat-badge-descuento-card {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #DC2626;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    z-index: 1;
}

.lat-cat-card .lat-prod-img {
    height: 160px;
    background: var(--lat-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lat-cat-card .lat-prod-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

.lat-cat-card .lat-prod-info {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.lat-cat-card .lat-prod-marca { font-size: 0.72rem; color: var(--lat-mist); font-weight: 600; text-transform: uppercase; }
.lat-cat-card .lat-prod-nombre { font-size: 0.85rem; line-height: 1.35; flex: 1; }
.lat-cat-card .lat-prod-precio-wrap { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.25rem; }
.lat-cat-card .lat-prod-precio { font-size: 1rem; font-family: var(--lat-mono); }
.lat-cat-card .lat-prod-precio-ant { font-size: 0.78rem; color: var(--lat-mist); }
.lat-cat-card .lat-prod-envio { font-size: 0.75rem; color: #16A34A; font-weight: 500; }

/* Vacío */
.lat-catalogo-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--lat-mist);
}

.lat-catalogo-vacio a { color: var(--lat-volt); }

/* Skeleton */
.lat-skeleton-card { background: white; border-radius: 10px; overflow: hidden; border: 1px solid var(--lat-line); }
.lat-sk-img-card { height: 160px; border-radius: 0; }

@media (max-width: 900px) {
    .lat-catalogo-layout { grid-template-columns: 1fr; }
    .lat-catalogo-sidebar { display: none; }
}

/* Ícono del carrito en botón AGREGAR */
.lat-card-agregar svg {
    display: inline-block !important;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   CHECKOUT — CARRITO PASO 1
   ══════════════════════════════════════════════════ */

/* Header del checkout */
.lat-checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 2.5rem;
    background: white;
    border-bottom: 1px solid var(--lat-line);
    position: sticky;
    top: 0;
    z-index: 40;
    gap: 2rem;
}

.lat-checkout-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--lat-ink);
    flex-shrink: 0;
}

.lat-checkout-logo strong { display: block; font-size: 1rem; }
.lat-checkout-logo small  { display: block; font-size: 0.72rem; color: var(--lat-mist); }

/* Pasos */
.lat-checkout-pasos {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: center;
}

.lat-paso {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--lat-mist);
}

.lat-paso-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E5E7EB;
    color: var(--lat-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lat-paso.activo .lat-paso-num {
    background: var(--lat-volt);
    color: white;
}

.lat-paso.activo .lat-paso-label { color: var(--lat-ink); font-weight: 600; }

.lat-paso-linea {
    width: 60px;
    height: 1px;
    background: var(--lat-line);
    margin: 0 0.5rem;
}

.lat-checkout-seguro {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #16A34A;
    font-weight: 600;
    flex-shrink: 0;
}

/* Body del checkout */
.lat-checkout-body {
    display: flex;
    gap: 2rem;
    padding: 2rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: flex-start;
}

.lat-checkout-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Título */
.lat-carrito-titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lat-carrito-paso-badge {
    width: 36px;
    height: 36px;
    background: var(--lat-volt);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lat-carrito-titulo h1 { font-size: 1.15rem; margin: 0; }
.lat-carrito-titulo p  { font-size: 0.83rem; color: var(--lat-mist); margin: 0; }

/* Banner envío gratis */
.lat-envio-gratis-banner {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    color: #166534;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Items del carrito */
.lat-carrito-items {
    background: white;
    border-radius: 10px;
    border: 1px solid var(--lat-line);
    overflow: hidden;
}

.lat-carrito-item-v2 {
    display: grid;
    grid-template-columns: 72px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lat-line);
}

.lat-carrito-item-v2:last-child { border-bottom: none; }

.lat-carrito-item-img {
    width: 64px;
    height: 64px;
    background: var(--lat-paper);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.lat-carrito-item-img img { width: 100%; height: 100%; object-fit: contain; }

.lat-ci-nombre { font-size: 0.88rem; line-height: 1.35; margin: 0; }

/* Stepper dentro del carrito */
.lat-ci-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--lat-line);
    border-radius: 6px;
    overflow: hidden;
}

.lat-ci-stepper button {
    width: 28px;
    height: 32px;
    background: var(--lat-paper);
    border: none;
    clip-path: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lat-ink);
    transition: background 0.1s;
}

.lat-ci-stepper button:hover { background: var(--lat-line); }

.lat-ci-stepper span {
    width: 36px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    border-left: 1px solid var(--lat-line);
    border-right: 1px solid var(--lat-line);
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Precio del item */
.lat-carrito-item-precio {
    text-align: right;
    min-width: 80px;
}

.lat-carrito-item-precio strong { display: block; font-size: 0.95rem; font-family: var(--lat-mono); }
.lat-carrito-item-precio small  { display: block; font-size: 0.75rem; color: var(--lat-mist); }

.lat-ci-eliminar {
    background: transparent;
    border: none;
    clip-path: none;
    cursor: pointer;
    color: var(--lat-mist);
    padding: 0.25rem;
    transition: color 0.15s;
}

.lat-ci-eliminar:hover { color: #DC2626; }

/* Cupón */
.lat-cupon-wrap {
    background: white;
    border-radius: 10px;
    border: 1px solid var(--lat-line);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lat-cupon-wrap label { font-size: 0.85rem; color: var(--lat-mist); }

.lat-cupon-input {
    display: flex;
    gap: 0.5rem;
}

.lat-cupon-input input {
    flex: 1;
    border: 1px solid var(--lat-line);
    border-radius: 7px;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    outline: none;
}

.lat-cupon-input input:focus { border-color: var(--lat-volt); }

.lat-cupon-input button {
    padding: 0.6rem 1.25rem;
    background: var(--lat-paper);
    border: 1px solid var(--lat-line);
    border-radius: 7px;
    clip-path: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--lat-ink);
    transition: border-color 0.15s;
}

.lat-cupon-input button:hover:not(:disabled) { border-color: var(--lat-volt); color: var(--lat-volt); }
.lat-cupon-input button:disabled { opacity: 0.5; cursor: not-allowed; }
.lat-cupon-ok    { font-size: 0.82rem; color: #16A34A; }
.lat-cupon-error { font-size: 0.82rem; color: #DC2626; }

.lat-seguir-comprando {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--lat-volt);
    text-decoration: none;
}

.lat-seguir-comprando:hover { text-decoration: underline; }

/* Resumen del pedido */
.lat-checkout-resumen {
    width: 320px;
    flex-shrink: 0;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--lat-line);
    padding: 1.5rem;
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lat-checkout-resumen h2 { font-size: 1rem; margin: 0; }

.lat-resumen-lineas { display: flex; flex-direction: column; gap: 0.5rem; border-bottom: 1px solid var(--lat-line); padding-bottom: 0.75rem; }

.lat-resumen-linea {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--lat-mist);
}

.lat-envio-gratis-text { color: #16A34A; font-weight: 600; }

.lat-descuento { color: #16A34A; }

.lat-resumen-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.92rem;
    font-weight: 600;
}

.lat-resumen-total strong { font-size: 1.3rem; font-family: var(--lat-mono); color: var(--lat-ink); }

.lat-btn-continuar {
    width: 100%;
    height: 48px;
    background: var(--lat-volt);
    color: white;
    border: none;
    clip-path: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: filter 0.15s;
}

.lat-btn-continuar:hover { filter: brightness(1.1); }

.lat-resumen-seguro {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--lat-mist);
    justify-content: center;
}

.lat-resumen-beneficios {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--lat-line);
}

.lat-rb-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lat-rb-item strong { display: block; font-size: 0.82rem; }
.lat-rb-item small  { display: block; font-size: 0.75rem; color: var(--lat-mist); }

/* Vacío */
.lat-carrito-vacio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
}

.lat-carrito-vacio h2 { font-size: 1.2rem; }
.lat-carrito-vacio a { color: var(--lat-volt); font-weight: 600; }

@media (max-width: 900px) {
    .lat-checkout-body { flex-direction: column; padding: 1rem; }
    .lat-checkout-resumen { width: 100%; position: static; }
    .lat-carrito-item-v2 { grid-template-columns: 56px 1fr; }
    .lat-carrito-item-precio, .lat-carrito-item-controles { grid-column: 2; }
    .lat-ci-eliminar { grid-column: 1; grid-row: 2; }
}

/* ══ CHECKOUT PASO 2 — ENVÍO ════════════════════════════════ */

.lat-paso.completado .lat-paso-num { background:#16A34A; color:white; }
.lat-linea-ok { background:var(--lat-volt); }

.lat-envio-titulo {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 1.25rem; font-family: var(--lat-display); margin:0;
}

.lat-paso-num-grande {
    width:36px;height:36px;background:var(--lat-volt);color:white;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1rem;font-weight:700;flex-shrink:0;
}

.lat-envio-subtitulo { font-size:0.85rem;color:var(--lat-mist);margin:0 0 0.25rem; }

.lat-envio-seccion {
    background:white;border-radius:10px;border:1px solid var(--lat-line);
    padding:1.25rem;
}

.lat-envio-seccion h3 {
    display:flex;align-items:center;gap:0.5rem;
    font-size:0.95rem;margin:0 0 1rem;
}

.lat-sec-num {
    font-size:1rem;color:var(--lat-volt);font-weight:700;
}

/* Grid dirección + mapa */
.lat-envio-dir-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }

/* Opciones de dirección */
.lat-dir-opcion {
    display:flex;align-items:flex-start;gap:0.75rem;
    border:1.5px solid var(--lat-line);border-radius:8px;
    padding:0.85rem 1rem;cursor:pointer;margin-bottom:0.5rem;
    transition:border-color 0.15s;
}

.lat-dir-opcion input { display:none; }
.lat-dir-opcion.activo { border-color:var(--lat-volt);background:#EEF2FF; }
.lat-dir-opcion svg { color:var(--lat-mist);flex-shrink:0;margin-top:2px; }
.lat-dir-opcion.activo svg { color:var(--lat-volt); }
.lat-dir-opcion strong { display:block;font-size:0.88rem; }
.lat-dir-opcion span   { display:block;font-size:0.82rem;color:var(--lat-mist); }
.lat-dir-opcion small  { display:block;font-size:0.78rem;color:var(--lat-mist); }

.lat-dir-principal {
    margin-left:auto;font-size:0.72rem;color:var(--lat-volt);
    font-weight:600;flex-shrink:0;
}

.lat-agregar-dir-btn {
    display:flex;align-items:center;gap:0.4rem;
    background:transparent;border:1.5px dashed var(--lat-line);
    border-radius:8px;padding:0.7rem 1rem;width:100%;
    font-size:0.85rem;color:var(--lat-volt);cursor:pointer;
    clip-path:none;transition:border-color 0.15s;
}
.lat-agregar-dir-btn:hover { border-color:var(--lat-volt); }

/* Form nueva dirección */
.lat-nueva-dir-form { border:1.5px solid var(--lat-volt);border-radius:10px;padding:1rem;margin-top:0.5rem; }
.lat-nueva-dir-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.75rem; }
.lat-nueva-dir-botones { display:flex;gap:0.5rem;margin-top:0.75rem;justify-content:flex-end; }
.lat-btn-guardar-dir { background:var(--lat-volt);color:white;border:none;clip-path:none;border-radius:7px;padding:0.5rem 1.25rem;font-weight:600;cursor:pointer; }
.lat-check-predeter { display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;grid-column:1/-1; }

/* Mapa */
.lat-mapa-wrap { border-radius:10px;overflow:hidden;border:1px solid var(--lat-line);display:flex;flex-direction:column;min-height:220px; }
.lat-mapa-pin-texto { display:flex;align-items:center;gap:0.4rem;font-size:0.78rem;color:var(--lat-mist);padding:0.5rem 0.75rem;background:white; }

/* Métodos de envío */
.lat-metodos-envio { display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem; }

.lat-metodo-card {
    border:1.5px solid var(--lat-line);border-radius:10px;
    padding:1rem;cursor:pointer;display:flex;align-items:flex-start;
    gap:0.75rem;transition:border-color 0.15s;
}

.lat-metodo-card input { display:none; }
.lat-metodo-card.activo { border-color:var(--lat-volt);background:#EEF2FF; }
.lat-metodo-card strong { display:block;font-size:0.88rem; }
.lat-metodo-card span   { display:block;font-size:0.78rem;color:var(--lat-mist); }
.lat-metodo-card em     { display:block;font-size:0.78rem;font-style:normal;font-weight:600;margin-top:0.25rem; }
.lat-gratis { color:#16A34A !important; }

/* Fecha y datos */
.lat-envio-2cols { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.lat-fecha-grid  { display:grid;grid-template-columns:1fr 1fr;gap:0.75rem; }
.lat-sujeto { font-size:0.78rem;color:#16A34A;margin-top:0.25rem; }

.lat-regalo-check h4 { font-size:0.9rem;margin:0 0 0.5rem; }
.lat-check-regalo { display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;cursor:pointer; }

/* Navegación inferior */
.lat-checkout-nav {
    display:flex;align-items:center;justify-content:space-between;
    padding-top:0.5rem;
}

.lat-volver-link { display:flex;align-items:center;gap:0.3rem;font-size:0.85rem;color:var(--lat-mist);text-decoration:none; }
.lat-volver-link:hover { color:var(--lat-volt); }

.lat-btn-continuar-pago {
    height:48px;padding:0 2rem;background:var(--lat-volt);color:white;
    border:none;clip-path:none;border-radius:8px;font-size:0.95rem;
    font-weight:600;cursor:pointer;display:flex;align-items:center;
    gap:0.5rem;transition:filter 0.15s;
}
.lat-btn-continuar-pago:hover:not(:disabled) { filter:brightness(1.1); }
.lat-btn-continuar-pago:disabled { background:var(--lat-mist);cursor:not-allowed; }

/* Resumen lateral */
.lat-resumen-header { display:flex;justify-content:space-between;align-items:center; }
.lat-resumen-header h2 { font-size:0.9rem;margin:0; }
.lat-editar-carrito { font-size:0.8rem;color:var(--lat-volt);text-decoration:none; }

.lat-resumen-productos { display:flex;flex-direction:column;gap:0.75rem;border-bottom:1px solid var(--lat-line);padding-bottom:0.75rem; }

.lat-rp-item { display:flex;align-items:center;gap:0.6rem; }
.lat-rp-img { width:44px;height:44px;background:var(--lat-paper);border-radius:6px;overflow:hidden;flex-shrink:0; }
.lat-rp-img img { width:100%;height:100%;object-fit:contain; }
.lat-rp-info { flex:1; }
.lat-rp-info span { font-size:0.8rem;display:block;line-height:1.3; }
.lat-rp-info small { font-size:0.72rem;color:var(--lat-mist); }
.lat-rp-item strong { font-size:0.85rem;font-family:var(--lat-mono);flex-shrink:0; }

.lat-cupon-mini { padding:0.75rem 0;border-bottom:1px solid var(--lat-line); }
.lat-cupon-mini label { font-size:0.8rem;color:var(--lat-mist);display:block;margin-bottom:0.4rem; }

.lat-resumen-garantias { display:flex;flex-direction:column;gap:0.6rem;padding-top:0.5rem;border-top:1px solid var(--lat-line); }
.lat-rg-item { display:flex;gap:0.6rem;align-items:flex-start; }
.lat-rg-item strong { display:block;font-size:0.78rem; }
.lat-rg-item small   { display:block;font-size:0.72rem;color:var(--lat-mist); }

@media (max-width:900px) {
    .lat-envio-dir-grid,.lat-metodos-envio,.lat-envio-2cols { grid-template-columns:1fr; }
}

/* ══ CHECKOUT PASO 3 — PAGO ════════════════════════════════ */
.lat-pago-body { display:flex;gap:2rem;padding:1.5rem 2.5rem;max-width:1200px;margin:0 auto;align-items:flex-start; }
.lat-pago-izq  { flex:1;display:flex;flex-direction:column;gap:1.25rem; }
.lat-pago-titulo { display:flex;align-items:center;gap:0.6rem;font-size:1.25rem;font-family:var(--lat-display);margin:0; }

.lat-pago-layout { display:grid;grid-template-columns:340px 1fr;gap:1.25rem;align-items:flex-start; }

/* Lista de métodos */
.lat-metodos-lista { background:white;border-radius:10px;border:1px solid var(--lat-line);overflow:hidden; }
.lat-metodos-lista h3 { font-size:0.88rem;padding:1rem 1.25rem;margin:0;border-bottom:1px solid var(--lat-line); }

.lat-metodo-item {
    display:flex;align-items:center;gap:0.75rem;padding:0.9rem 1.25rem;
    border-bottom:1px solid var(--lat-line);cursor:pointer;
    transition:background 0.12s;background:white;
}
.lat-metodo-item:last-of-type { border-bottom:none; }
.lat-metodo-item input { display:none; }
.lat-metodo-item.activo { background:#EEF2FF;border-left:3px solid var(--lat-volt); }
.lat-metodo-item.activo .lat-mi-icono svg { stroke:var(--lat-volt); }
.lat-mi-icono { flex-shrink:0; }
.lat-mi-texto strong { display:block;font-size:0.85rem; }
.lat-mi-texto span   { display:block;font-size:0.75rem;color:var(--lat-mist); }
.lat-mi-logos { display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0; }
.lat-mi-chevron { margin-left:auto;color:var(--lat-mist);flex-shrink:0; }
.lat-metodo-item.activo .lat-mi-chevron { color:var(--lat-volt); }

.lat-pago-seguridad { display:flex;gap:0.75rem;padding:1rem 1.25rem;background:var(--lat-paper);border-top:1px solid var(--lat-line); }
.lat-pago-seguridad strong { display:block;font-size:0.8rem; }
.lat-pago-seguridad small  { display:block;font-size:0.72rem;color:var(--lat-mist); }
.lat-pago-logos-footer { display:flex;align-items:center;gap:8px;padding:0.75rem 1.25rem;flex-wrap:wrap; }

/* Panel del método */
.lat-metodo-panel { background:white;border-radius:10px;border:1px solid var(--lat-line);padding:1.5rem;display:flex;flex-direction:column;gap:1rem; }
.lat-panel-titulo { display:flex;align-items:flex-start;gap:0.75rem; }
.lat-panel-titulo strong { display:block;font-size:0.95rem; }
.lat-panel-titulo small  { display:block;font-size:0.8rem;color:var(--lat-mist); }

/* Tarjeta */
.lat-tarjeta-form { display:flex;flex-direction:column;gap:0.75rem; }
.lat-input-icon { position:relative;display:flex;align-items:center; }
.lat-input-icon input { width:100%; }
.lat-input-icon svg,.lat-input-icon button { position:absolute;right:0.75rem; }
.lat-tarjeta-row { display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.6rem; }
.lat-panel-seguro { display:flex;gap:0.6rem;background:#F0FDF4;border:1px solid #86EFAC;border-radius:8px;padding:0.75rem; }
.lat-panel-seguro strong { display:block;font-size:0.82rem;color:#166534; }
.lat-panel-seguro small  { display:block;font-size:0.75rem;color:#166534; }
.lat-check-guardar { display:flex;align-items:center;gap:0.75rem;background:var(--lat-paper);border:1px solid var(--lat-line);border-radius:8px;padding:0.9rem;cursor:pointer; }
.lat-check-guardar input { margin:0;accent-color:var(--lat-volt); }
.lat-check-guardar strong { display:block;font-size:0.85rem; }
.lat-check-guardar small  { display:block;font-size:0.75rem;color:var(--lat-mist); }
.lat-check-guardar svg   { margin-left:auto;flex-shrink:0; }

/* Yape */
.lat-yape-tabs { display:flex;border-bottom:2px solid var(--lat-line); }
.lat-yape-tabs button { padding:0.5rem 1.25rem;background:transparent;border:none;clip-path:none;cursor:pointer;font-size:0.88rem;color:var(--lat-mist);display:flex;align-items:center;gap:0.3rem; }
.lat-yape-tabs button.activo { color:var(--lat-ink);border-bottom:2px solid var(--lat-volt);margin-bottom:-2px;font-weight:600; }
.lat-yape-content { display:grid;grid-template-columns:160px 1fr;gap:1.25rem;align-items:flex-start; }
.lat-qr-wrap { display:flex;justify-content:center; }
.lat-qr-placeholder { position:relative;width:140px;height:140px;border:2px solid var(--lat-line);border-radius:10px;display:flex;align-items:center;justify-content:center;background:white; }
.lat-qr-logo { position:absolute;width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:1rem;border:2px solid white; }
.lat-yape-pasos { display:flex;flex-direction:column;gap:0.6rem; }
.lat-yape-paso { display:flex;align-items:center;gap:0.6rem;font-size:0.85rem; }
.lat-yape-paso span { width:22px;height:22px;background:var(--lat-volt);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;flex-shrink:0; }
.lat-yape-numero { background:var(--lat-paper);border-radius:8px;padding:0.75rem;margin-top:0.5rem; }
.lat-yape-numero p { font-size:0.78rem;color:var(--lat-mist);margin:0 0 0.3rem; }
.lat-yape-numero div { display:flex;align-items:center;gap:0.4rem; }
.lat-yape-numero strong { font-size:1.1rem; }
.lat-yape-numero small { display:block;font-size:0.75rem;color:var(--lat-mist); }
.lat-yape-confirmar { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:0.75rem;border-top:1px solid var(--lat-line); }
.lat-yape-confirmar p { font-size:0.85rem;margin:0; }
.lat-yape-confirmar small { font-size:0.78rem;color:var(--lat-mist); }
.lat-btn-ya-pague { background:var(--lat-volt);color:white;border:none;clip-path:none;border-radius:8px;padding:0.65rem 1.25rem;font-weight:600;cursor:pointer;font-size:0.88rem;white-space:nowrap; }

/* Transferencia */
.lat-bancos-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem; }
.lat-banco-btn { border:1.5px solid var(--lat-line);border-radius:8px;padding:0.6rem;background:white;cursor:pointer;clip-path:none;display:flex;flex-direction:column;align-items:center;gap:0.3rem;font-size:0.78rem;transition:border-color 0.15s; }
.lat-banco-btn.activo { border-color:var(--lat-volt);background:#EEF2FF; }
.lat-datos-transferencia { display:flex;gap:1rem;background:var(--lat-paper);border-radius:10px;padding:1rem;border:1px solid var(--lat-line); }
.lat-dt-info { flex:1;display:flex;flex-direction:column;gap:0.4rem; }
.lat-dt-row { display:flex;gap:0.5rem;font-size:0.82rem; }
.lat-dt-row span { color:var(--lat-mist);min-width:160px; }
.lat-dt-row strong { font-weight:600; }
.lat-dt-monto { text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:0.4rem;flex-shrink:0; }
.lat-dt-monto small { font-size:0.72rem;color:var(--lat-mist); }
.lat-dt-monto strong { font-size:1.4rem;font-family:var(--lat-mono);color:var(--lat-volt); }
.lat-btn-copiar { display:flex;align-items:center;gap:0.3rem;background:white;border:1px solid var(--lat-line);border-radius:7px;padding:0.4rem 0.8rem;font-size:0.78rem;cursor:pointer;clip-path:none; }
.lat-upload-zone { position:relative;border:2px dashed var(--lat-line);border-radius:10px;padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.4rem;cursor:pointer;transition:border-color 0.15s; }
.lat-upload-zone:hover { border-color:var(--lat-volt); }
.lat-upload-zone p { font-size:0.85rem;margin:0; }
.lat-upload-zone small { font-size:0.75rem; }

/* Contra entrega */
.lat-contraentrega-pasos { display:flex;flex-direction:column;gap:1rem; }
.lat-ce-paso { display:flex;align-items:flex-start;gap:1rem; }
.lat-ce-icono { width:44px;height:44px;background:#EEF2FF;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.lat-ce-paso div span { display:inline-flex;width:20px;height:20px;background:var(--lat-volt);color:white;border-radius:50%;font-size:0.72rem;font-weight:700;align-items:center;justify-content:center;margin-right:0.4rem; }
.lat-ce-paso div strong { font-size:0.88rem; }
.lat-ce-paso div p { font-size:0.8rem;color:var(--lat-mist);margin:0; }

/* Importante */
.lat-importante-box { background:var(--lat-paper);border-radius:8px;padding:0.9rem;border:1px solid var(--lat-line); }
.lat-importante-box p { font-size:0.85rem;margin:0 0 0.4rem; }
.lat-importante-box ul { margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:0.25rem; }
.lat-importante-box li { font-size:0.8rem; }
.lat-importante-orange { background:#FFFBEB;border-color:#FDE68A; }
.lat-panel-info { display:flex;align-items:flex-start;gap:0.5rem;background:#F0F9FF;border:1px solid #BAE6FD;border-radius:8px;padding:0.75rem;font-size:0.82rem;color:#0369A1; }
.lat-info-azul { background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8; }

/* Cupón */
.lat-pago-cupon { background:white;border-radius:10px;border:1px solid var(--lat-line);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:0.4rem; }
.lat-pago-cupon label { display:flex;align-items:center;gap:0.5rem;cursor:pointer;font-size:0.88rem; }

/* Navegación */
.lat-pago-footer-nav { background:white;border-radius:10px;border:1px solid var(--lat-line);padding:1.25rem; }
.lat-pago-beneficios { display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--lat-line); }
.lat-pb { display:flex;align-items:flex-start;gap:0.4rem; }
.lat-pb strong { display:block;font-size:0.75rem; }
.lat-pb small   { display:block;font-size:0.7rem;color:var(--lat-mist); }
.lat-pago-botones { display:flex;align-items:center;justify-content:space-between; }

/* Sidebar */
.lat-pago-proteccion { display:flex;gap:0.6rem;background:#F0FDF4;border-radius:8px;padding:0.85rem; }
.lat-pago-proteccion strong { display:block;font-size:0.8rem;color:#166534; }
.lat-pago-proteccion small  { display:block;font-size:0.72rem;color:#166534; }

@media (max-width:1000px) {
    .lat-pago-body { flex-direction:column;padding:1rem; }
    .lat-pago-layout { grid-template-columns:1fr; }
    .lat-bancos-grid { grid-template-columns:repeat(2,1fr); }
    .lat-pago-beneficios { grid-template-columns:repeat(2,1fr); }
    .lat-tarjeta-row { grid-template-columns:1fr 1fr; }
}

/* ══ CHECKOUT PASO 4 — CONFIRMACIÓN ══════════════════════ */
.lat-confirm-body { display:flex;gap:2rem;padding:1.5rem 2.5rem;max-width:1200px;margin:0 auto;align-items:flex-start; }
.lat-confirm-izq  { flex:1;display:flex;flex-direction:column;gap:1.25rem; }
.lat-confirm-titulo { font-size:1.4rem;font-family:var(--lat-display);margin:0; }
.lat-confirm-sub { font-size:0.88rem;color:var(--lat-mist);margin:0; }

/* Box confirmación */
.lat-confirm-box {
    display:flex;justify-content:space-between;align-items:flex-start;
    background:linear-gradient(135deg,#F0FDF4 0%,#ECFDF5 100%);
    border:1.5px solid #86EFAC;border-radius:12px;padding:1.5rem;gap:1.5rem;
}
.lat-confirm-box-izq { display:flex;align-items:flex-start;gap:1rem;flex:1; }
.lat-confirm-check {
    width:56px;height:56px;background:#16A34A;border-radius:50%;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.lat-confirm-box-izq h2 { font-size:1.05rem;margin:0 0 0.25rem;color:#166534; }
.lat-confirm-box-izq p  { font-size:0.83rem;color:#166534;margin:0; }
.lat-confirm-email { font-size:0.82rem;color:#16A34A;text-decoration:none;font-weight:600; }
.lat-confirm-box-der { text-align:right;flex-shrink:0; }
.lat-confirm-box-der small { display:block;font-size:0.75rem;color:#16A34A;margin-bottom:0.25rem; }
.lat-confirm-box-der span  { display:block;font-size:0.82rem;color:#166534; }
.lat-num-pedido { font-size:1.3rem;color:#16A34A;font-family:var(--lat-mono);display:block; }

/* Cards */
.lat-confirm-card { background:white;border-radius:10px;border:1px solid var(--lat-line);padding:1.25rem; }
.lat-confirm-card h3 { font-size:0.95rem;margin:0 0 1rem; }

/* Timeline */
.lat-confirm-timeline { display:flex;align-items:flex-start;gap:0.5rem;flex-wrap:wrap; }
.lat-ct-paso { display:flex;flex-direction:column;align-items:center;gap:0.5rem;text-align:center;max-width:120px;flex:1; }
.lat-ct-icono { width:48px;height:48px;background:#EEF2FF;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--lat-line); }
.lat-ct-icono svg { stroke:var(--lat-mist); }
.lat-ct-activo { background:var(--lat-volt);border-color:var(--lat-volt); }
.lat-ct-activo svg { stroke:white; }
.lat-ct-estrella { background:#FEF9C3;border-color:#FDE047; }
.lat-ct-estrella svg { stroke:#CA8A04; }
.lat-ct-paso strong { font-size:0.78rem; }
.lat-ct-paso p       { font-size:0.72rem;color:var(--lat-mist);margin:0; }
.lat-ct-arrow { flex-shrink:0;margin-top:12px; }

.lat-confirm-acciones { display:flex;gap:0.75rem;margin-top:1.25rem; }
.lat-btn-ver-pedido {
    border:1.5px solid var(--lat-volt);border-radius:8px;
    padding:0.6rem 1.25rem;color:var(--lat-volt);text-decoration:none;
    font-size:0.88rem;font-weight:600;transition:background 0.15s;
}
.lat-btn-ver-pedido:hover { background:#EEF2FF; }
.lat-btn-whatsapp {
    display:flex;align-items:center;gap:0.4rem;background:#25D366;
    color:white;border-radius:8px;padding:0.6rem 1.25rem;
    text-decoration:none;font-size:0.88rem;font-weight:600;
}

/* Puntos */
.lat-confirm-puntos {
    display:flex;align-items:center;justify-content:space-between;
    background:linear-gradient(135deg,#6366F1,#8B5CF6);
    border-radius:10px;padding:1rem 1.25rem;color:white;gap:1rem;
}
.lat-cp-izq { display:flex;align-items:center;gap:0.75rem; }
.lat-cp-izq p { margin:0;font-size:0.88rem; }
.lat-cp-izq small { display:block;font-size:0.75rem;opacity:0.85; }
.lat-cp-btn { background:white;color:#6366F1;border:none;clip-path:none;border-radius:7px;padding:0.5rem 1rem;font-weight:600;font-size:0.82rem;cursor:pointer; }

/* Info entrega */
.lat-confirm-entrega { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
.lat-ce-item { display:flex;gap:0.6rem; }
.lat-ce-item strong { display:block;font-size:0.82rem;margin-bottom:0.2rem; }
.lat-ce-item span   { display:block;font-size:0.8rem;color:var(--lat-mist); }
.lat-ce-item em     { font-style:normal;font-weight:700;font-size:0.82rem; }

/* Ayuda */
.lat-confirm-ayuda {
    display:flex;align-items:center;gap:1rem;background:white;
    border-radius:10px;border:1px solid var(--lat-line);padding:1rem 1.25rem;
    flex-wrap:wrap;
}
.lat-confirm-ayuda strong { font-size:0.88rem; }
.lat-ayuda-item { display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;color:var(--lat-ink);text-decoration:none; }
.lat-ayuda-sep { width:1px;height:30px;background:var(--lat-line); }
.lat-ayuda-horario strong { display:block;font-size:0.8rem; }
.lat-ayuda-horario small  { display:block;font-size:0.75rem;color:var(--lat-mist); }

/* Beneficios */
.lat-confirm-beneficios { display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem; }
.lat-cb { display:flex;gap:0.4rem;align-items:flex-start; }
.lat-cb strong { display:block;font-size:0.78rem; }
.lat-cb small   { display:block;font-size:0.72rem;color:var(--lat-mist); }

/* Sidebar resumen */
.lat-resumen-total-confirm {
    display:flex;justify-content:space-between;align-items:flex-end;
    padding:0.75rem 0;border-top:1px solid var(--lat-line);
}
.lat-resumen-total-confirm span { font-size:0.88rem;color:var(--lat-mist); }
.lat-resumen-total-confirm strong { display:block;font-size:1.5rem;font-family:var(--lat-mono);color:var(--lat-volt); }
.lat-resumen-total-confirm small  { display:block;font-size:0.72rem;color:var(--lat-mist);text-align:right; }

.lat-confirm-metodo-pago {
    background:var(--lat-paper);border-radius:8px;padding:0.75rem;
    display:flex;flex-direction:column;gap:0.4rem;
}
.lat-confirm-metodo-pago > div { display:flex;justify-content:space-between;align-items:center; }
.lat-confirm-metodo-pago span { font-size:0.8rem;color:var(--lat-mist); }
.lat-pago-realizado { color:#16A34A !important;font-weight:600; }
.lat-mp-detalle { display:flex;align-items:center;gap:0.4rem;margin-top:0.25rem; }
.lat-mp-detalle span:last-child { font-size:0.88rem;font-weight:600; }

.lat-confirm-notif { background:#EEF2FF;border-radius:10px;padding:1rem;display:flex;gap:0.75rem; }
.lat-confirm-notif strong { display:block;font-size:0.85rem;color:#4338CA; }
.lat-confirm-notif p { font-size:0.78rem;color:#6366F1;margin:0.25rem 0 0.5rem; }
.lat-notif-iconos { display:flex;gap:0.5rem; }
.lat-ni { width:36px;height:36px;background:#EEF2FF;border-radius:8px;display:flex;align-items:center;justify-content:center; }

@media (max-width:900px) {
    .lat-confirm-body { flex-direction:column;padding:1rem; }
    .lat-confirm-entrega,.lat-confirm-beneficios { grid-template-columns:1fr 1fr; }
    .lat-confirm-timeline { flex-direction:column; }
    .lat-ct-paso { max-width:none;flex-direction:row;text-align:left; }
    .lat-ct-arrow { transform:rotate(90deg); }
}

/* ── Vista previa de bloque de ayuda en cPanel ─────────────── */
.lat-preview-ayuda {
    background: white;
    border-radius: 10px;
    border: 1px solid var(--lat-line);
    padding: 0.75rem;
}

.lat-preview-ayuda-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
}

.lat-preview-ayuda-inner strong { flex-shrink: 0; }

.lat-pa-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
}

.lat-pa-sep { width: 1px; height: 20px; background: var(--lat-line); }

.lat-pa-horario strong { display: block; font-size: 0.78rem; }
.lat-pa-horario small  { display: block; font-size: 0.72rem; color: var(--lat-mist); }

.lat-btn-wa-test {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #25D366;
    color: white;
    border-radius: 7px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

/* ══ BUSCADOR CON AUTOCOMPLETE ════════════════════════════════ */
.lat-buscador-wrap {
    flex: 1;
    position: relative;
    max-width: none;
}

.lat-buscador-tienda {
    display: flex;
    align-items: stretch;
    height: 44px;
    background: white;
    border-radius: 8px;
    border: 2px solid white;
    overflow: hidden;
    transition: border-color 0.15s;
    position: relative;
}

.lat-buscador-tienda:focus-within {
    border-color: var(--lat-volt);
    box-shadow: 0 0 0 3px rgba(47,91,255,0.15);
}

.lat-buscador-tienda input {
    flex: 1;
    border: none;
    padding: 0 1rem;
    font-size: 0.92rem;
    outline: none;
    color: var(--lat-ink);
    background: transparent;
    min-width: 0;
    align-self: center;
}

.lat-buscador-tienda input::placeholder { color: #9CA3AF; }

.lat-buscador-clear {
    background: transparent;
    border: none;
    clip-path: none;
    cursor: pointer;
    color: var(--lat-mist);
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.12s, color 0.12s;
}

.lat-buscador-clear:hover { background: #F3F4F6; color: var(--lat-ink); }

.lat-buscador-btn {
    width: 58px;
    height: 100%;
    align-self: stretch;
    background: var(--lat-volt);
    border: none;
    clip-path: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.lat-buscador-btn svg { stroke: white; }
.lat-buscador-btn:hover { background: #1D4BEF; }

/* Overlay para cerrar */
.lat-buscador-overlay {
    position: fixed;
    inset: 0;
    z-index: 48;
}

/* Dropdown */
.lat-buscador-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    z-index: 49;
    display: flex;
    overflow: hidden;
    min-height: 80px;
}

/* Columnas */
.lat-sug-col {
    flex: 1;
    padding: 0.75rem 0;
    border-right: 1px solid var(--lat-line);
}

.lat-sug-col:last-child { border-right: none; }

.lat-sug-col-der {
    max-width: 240px;
    flex: 0 0 240px;
    background: #FAFAFA;
}

.lat-sug-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lat-mist);
    padding: 0 1rem 0.4rem;
    margin: 0;
}

/* Items de sugerencia */
.lat-sug-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 1rem;
    background: transparent;
    border: none;
    clip-path: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--lat-ink);
    transition: background 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lat-sug-item:hover { background: #F0F4FF; }
.lat-sug-item strong { color: var(--lat-ink); font-weight: 700; }
.lat-sug-item svg { flex-shrink: 0; }

.lat-sug-marca    { color: #1D4ED8; font-weight: 500; font-size: 0.85rem; }
.lat-sug-categoria{ color: #0369A1; font-size: 0.85rem; }

.lat-sug-marca:hover,
.lat-sug-categoria:hover { background: #EEF2FF; }

/* ══ MIS PEDIDOS ══════════════════════════════════════════════ */
.lat-cuenta-layout {
    display: grid;
    grid-template-columns: 220px 1fr 280px;
    min-height: 85vh;
    background: #F0F4FF;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Sidebar izquierdo */
.lat-cuenta-sidebar {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    height: fit-content;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
}

.lat-cuenta-sidebar h2 { font-size: 1rem; margin: 0 0 1rem; }

.lat-cuenta-nav-sidebar { display: flex; flex-direction: column; gap: 0; }

.lat-csn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: var(--lat-ink);
    font-size: 0.85rem;
    border-radius: 7px;
    transition: background 0.12s, color 0.12s;
    border-left: 3px solid transparent;
}

.lat-csn:hover { background: #F0F4FF; color: var(--lat-volt); }
.lat-csn.activo { background: #EEF2FF; color: var(--lat-volt); font-weight: 600; border-left-color: var(--lat-volt); }
.lat-csn svg { flex-shrink: 0; color: inherit; }

.lat-csn-puntos { justify-content: space-between; }
.lat-puntos-badge { background: #6366F1; color: white; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }

.lat-csn-ayuda {
    border-top: 1px solid var(--lat-line);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.lat-csn-ayuda strong { font-size: 0.82rem; }
.lat-csn-ayuda small  { font-size: 0.75rem; color: var(--lat-mist); }

.lat-csn-wa {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #25D366;
    color: white;
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.3rem;
}

/* Contenido principal */
.lat-cuenta-main { display: flex; flex-direction: column; gap: 1rem; }

.lat-mp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.lat-mp-header h1 { font-size: 1.3rem; font-family: var(--lat-display); margin: 0; }
.lat-mp-header p  { font-size: 0.83rem; color: var(--lat-mist); margin: 0; }

.lat-mp-buscar { display: flex; gap: 0.5rem; align-items: center; }

.lat-mp-search-input {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--lat-line);
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    background: white;
    font-size: 0.85rem;
}

.lat-mp-search-input input { border: none; outline: none; font-size: 0.85rem; width: 180px; }

.lat-mp-filtro-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--lat-line);
    border-radius: 7px;
    padding: 0.5rem 0.85rem;
    background: white;
    font-size: 0.85rem;
    cursor: pointer;
    clip-path: none;
}

/* Tabs */
.lat-mp-tabs {
    display: flex;
    border-bottom: 2px solid var(--lat-line);
    background: white;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.lat-mp-tab {
    padding: 0.75rem 1.1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    clip-path: none;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--lat-mist);
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -2px;
    white-space: nowrap;
}

.lat-mp-tab.activo { color: var(--lat-volt); border-bottom-color: var(--lat-volt); font-weight: 600; }
.lat-mp-tab:hover:not(.activo) { color: var(--lat-ink); }

/* Pedido card */
.lat-mp-pedido {
    background: white;
    border-radius: 10px;
    border: 1px solid var(--lat-line);
    overflow: hidden;
}

.lat-mp-pedido-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lat-line);
}

.lat-mp-pedido-header strong { display: block; font-size: 0.95rem; }
.lat-mp-pedido-header small  { display: block; font-size: 0.75rem; color: var(--lat-mist); margin-top: 0.15rem; }

.lat-mp-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.lat-estado-camino    { background: #DBEAFE; color: #1D4ED8; }
.lat-estado-entregado { background: #D1FAE5; color: #065F46; }
.lat-estado-cancelado { background: #FEE2E2; color: #991B1B; }
.lat-estado-pendiente { background: #FEF3C7; color: #92400E; }

.lat-mp-pedido-meta { text-align: right; }
.lat-mp-pedido-meta small { display: block; font-size: 0.72rem; color: var(--lat-mist); }
.lat-mp-pedido-meta strong { display: block; font-size: 0.88rem; }

/* Timeline */
.lat-mp-timeline {
    display: flex;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    gap: 0;
    background: var(--lat-paper);
    border-bottom: 1px solid var(--lat-line);
    overflow-x: auto;
}

.lat-mp-tl-paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 90px;
    text-align: center;
}

.lat-mp-tl-icono {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E5E7EB;
    border: 2px solid #D1D5DB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lat-mist);
    flex-shrink: 0;
}

.lat-mp-tl-paso.completo .lat-mp-tl-icono { background: var(--lat-volt); border-color: var(--lat-volt); }
.lat-mp-tl-paso.actual .lat-mp-tl-icono   { background: var(--lat-volt); border-color: var(--lat-volt); box-shadow: 0 0 0 4px rgba(47,91,255,0.2); }

.lat-mp-tl-texto strong { display: block; font-size: 0.75rem; }
.lat-mp-tl-texto small  { display: block; font-size: 0.68rem; color: var(--lat-mist); }

.lat-mp-tl-linea {
    flex: 1;
    height: 2px;
    background: #E5E7EB;
    margin-top: 15px;
    min-width: 30px;
}

.lat-mp-tl-linea.completa { background: var(--lat-volt); }

/* Items */
.lat-mp-items {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    flex-wrap: wrap;
}

.lat-mp-item { display: flex; align-items: center; gap: 0.5rem; }

.lat-mp-item-img {
    width: 52px;
    height: 52px;
    background: var(--lat-paper);
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--lat-line);
}

.lat-mp-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.lat-mp-item div span { display: block; font-size: 0.78rem; max-width: 130px; line-height: 1.3; }
.lat-mp-item div small { display: block; font-size: 0.72rem; color: var(--lat-mist); }

/* Acciones */
.lat-mp-acciones {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--lat-line);
}

.lat-mp-btn-detalle {
    border: 1px solid var(--lat-volt);
    color: var(--lat-volt);
    border-radius: 7px;
    padding: 0.4rem 0.9rem;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
}

.lat-mp-btn-seguimiento, .lat-mp-btn-devolucion {
    background: transparent;
    border: 1px solid var(--lat-line);
    border-radius: 7px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    cursor: pointer;
    clip-path: none;
    color: var(--lat-ink);
}

.lat-mp-total { font-size: 0.8rem; color: var(--lat-mist); text-align: center; padding: 0.5rem; }

/* Vacío */
.lat-mp-vacio { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem; text-align: center; background: white; border-radius: 10px; }
.lat-mp-vacio h3 { font-size: 1rem; margin: 0; }
.lat-mp-vacio p  { font-size: 0.85rem; color: var(--lat-mist); margin: 0; }
.lat-mp-vacio a  { color: var(--lat-volt); font-weight: 600; }

/* Panel derecho */
.lat-mp-panel-der { display: flex; flex-direction: column; gap: 1rem; height: fit-content; }

.lat-mp-rastrear {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
}

.lat-mp-rastrear h3 { font-size: 0.95rem; margin: 0; }
.lat-mp-rastrear p  { font-size: 0.8rem; color: var(--lat-mist); margin: 0; }

.lat-mp-btn-rastrear {
    width: 100%;
    height: 40px;
    background: var(--lat-volt);
    color: white;
    border: none;
    clip-path: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    margin-top: 0.25rem;
}

.lat-mp-link-seguimiento { font-size: 0.8rem; color: var(--lat-volt); text-align: center; text-decoration: none; }

.lat-mp-beneficios {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 2px 8px rgba(47,91,255,0.06);
}

.lat-mpb { display: flex; gap: 0.6rem; align-items: flex-start; }
.lat-mpb strong { display: block; font-size: 0.8rem; }
.lat-mpb small  { display: block; font-size: 0.72rem; color: var(--lat-mist); }

.lat-mp-puntos-panel {
    background: #EEF2FF;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.lat-mp-puntos-panel strong { display: block; font-size: 0.82rem; color: #4338CA; }
.lat-mp-puntos-panel small  { display: block; font-size: 0.75rem; color: #6366F1; }
.lat-mp-puntos-panel > div { flex: 1; }

.lat-mp-btn-puntos {
    width: 100%;
    border: 1.5px solid #6366F1;
    color: #6366F1;
    border-radius: 8px;
    padding: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background: white;
    clip-path: none;
}

@media (max-width: 1100px) {
    .lat-cuenta-layout { grid-template-columns: 200px 1fr; }
    .lat-mp-panel-der { display: none; }
}

@media (max-width: 768px) {
    .lat-cuenta-layout { grid-template-columns: 1fr; padding: 1rem; }
    .lat-cuenta-sidebar { display: none; }
}

/* Botón ingresar — siempre visible */
.lat-btn-ingresar {
    white-space: nowrap;
}
.lat-btn-ingresar span strong {
    font-weight: 700;
    display: inline;
}

/* ══ NUESTRAS TIENDAS ══════════════════════════════════════ */
.lat-tiendas-layout {
    display: grid;
    grid-template-columns: 230px 1fr 310px;
    min-height: 85vh;
    background: #F0F4FF;
}

/* Sidebar izquierdo */
.lat-tiendas-sidebar {
    background: white;
    border-right: 1px solid var(--lat-line);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.lat-ts-header { display:flex;align-items:flex-start;gap:0.6rem; }
.lat-ts-header h1 { font-size:1rem;margin:0; }
.lat-ts-header p  { font-size:0.78rem;color:var(--lat-mist);margin:0; }
.lat-ts-icono { width:40px;height:40px;background:#EEF2FF;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }

.lat-ts-conteo { display:flex;gap:0.5rem;align-items:center;background:#EEF2FF;border-radius:8px;padding:0.6rem 0.75rem; }
.lat-ts-conteo strong { display:block;font-size:0.88rem;color:var(--lat-volt); }
.lat-ts-conteo small  { display:block;font-size:0.72rem;color:var(--lat-mist); }

.lat-ts-servicios h3 { font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--lat-mist);margin:0 0 0.5rem; }
.lat-ts-srv-item { display:flex;gap:0.5rem;align-items:flex-start;padding:0.4rem 0; }
.lat-ts-srv-item strong { display:block;font-size:0.8rem; }
.lat-ts-srv-item small  { display:block;font-size:0.72rem;color:var(--lat-mist); }
.lat-ts-srv-item svg    { flex-shrink:0;margin-top:2px; }

.lat-ts-ayuda { display:flex;gap:0.5rem;align-items:center;border-top:1px solid var(--lat-line);padding-top:0.75rem; }
.lat-ts-ayuda strong { display:block;font-size:0.82rem; }
.lat-ts-ayuda small  { display:block;font-size:0.72rem;color:var(--lat-mist); }

.lat-ts-wa { display:flex;align-items:center;gap:0.4rem;background:#25D366;color:white;border-radius:7px;padding:0.5rem 0.75rem;text-decoration:none;font-size:0.8rem;font-weight:600; }
.lat-ts-tel { display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--lat-ink);text-decoration:none; }

/* Centro */
.lat-tiendas-centro { display:flex;flex-direction:column;overflow:hidden; }

.lat-ts-search { display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--lat-line);padding:0.85rem 1.25rem;background:white; }
.lat-ts-search input { flex:1;border:none;outline:none;font-size:0.9rem; }

/* Mapa */
.lat-ts-mapa { background:#E8EFF8;height:280px;border-bottom:1px solid var(--lat-line);overflow:hidden; }
.lat-ts-mapa-peru { width:100%;height:100%;display:flex;align-items:center;justify-content:center; }

/* Lista */
.lat-ts-lista-header { display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.25rem;background:white;border-bottom:1px solid var(--lat-line); }
.lat-ts-lista-header strong { font-size:0.88rem; }
.lat-ts-ordenar { display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:var(--lat-mist); }
.lat-ts-ordenar select { border:none;outline:none;font-size:0.82rem;cursor:pointer;color:var(--lat-ink); }

.lat-ts-lista { flex:1;overflow-y:auto;padding:0.75rem 1.25rem;display:flex;flex-direction:column;gap:0.5rem; }

.lat-ts-card {
    display:grid;grid-template-columns:28px 68px 1fr auto;
    align-items:center;gap:0.75rem;
    background:white;border-radius:10px;border:1.5px solid var(--lat-line);
    padding:0.85rem 1rem;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s;
}
.lat-ts-card:hover  { border-color:var(--lat-volt); }
.lat-ts-card.activo { border-color:var(--lat-volt);background:#EEF2FF; }

.lat-ts-card-num { width:24px;height:24px;background:var(--lat-volt);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0; }

.lat-ts-card-img { width:60px;height:60px;background:var(--lat-paper);border-radius:7px;overflow:hidden; }
.lat-ts-card-img img { width:100%;height:100%;object-fit:cover; }
.lat-ts-img-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center; }

.lat-ts-card-titulo { display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap; }
.lat-ts-card-titulo strong { font-size:0.88rem; }
.lat-badge-principal { background:#EEF2FF;color:var(--lat-volt);font-size:0.68rem;padding:1px 6px;border-radius:999px;font-weight:600;white-space:nowrap; }

.lat-ts-dir { display:block;font-size:0.75rem;color:var(--lat-mist); }
.lat-ts-estado { display:flex;align-items:center;gap:0.4rem;margin-top:0.2rem; }
.lat-abierto  { font-size:0.75rem;color:#16A34A;font-weight:600; }
.lat-cerrado  { font-size:0.75rem;color:#DC2626;font-weight:600; }
.lat-ts-estado small { font-size:0.72rem;color:var(--lat-mist); }
.lat-ts-servicios-mini { display:flex;gap:0.25rem;margin-top:0.2rem;font-size:0.82rem; }
.lat-ts-card-chevron { color:var(--lat-mist);flex-shrink:0; }

.lat-ts-ver-mas { width:100%;background:transparent;border:1.5px dashed var(--lat-line);border-radius:8px;padding:0.6rem;font-size:0.82rem;color:var(--lat-volt);cursor:pointer;clip-path:none; }
.lat-ts-vacio { text-align:center;padding:2rem;color:var(--lat-mist); }
.lat-ts-vacio button { color:var(--lat-volt);background:none;border:none;cursor:pointer;font-weight:600; }

/* Panel detalle */
.lat-ts-detalle {
    background:white;border-left:1px solid var(--lat-line);
    overflow-y:auto;position:relative;
}

.lat-ts-cerrar-panel { position:absolute;top:0.75rem;right:0.75rem;background:rgba(0,0,0,0.4);color:white;border:none;border-radius:50%;width:28px;height:28px;font-size:1.1rem;cursor:pointer;clip-path:none;z-index:2;display:flex;align-items:center;justify-content:center; }

.lat-ts-det-img { height:160px;background:var(--lat-paper);overflow:hidden;position:relative; }
.lat-ts-det-img img { width:100%;height:100%;object-fit:cover; }
.lat-ts-det-img-ph { width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.lat-ts-det-badge { position:absolute;bottom:0.5rem;left:0.5rem;background:var(--lat-volt);color:white;font-size:0.72rem;padding:3px 8px;border-radius:5px;font-weight:600; }

.lat-ts-det-body { padding:1rem 1.25rem;display:flex;flex-direction:column;gap:0.75rem; }
.lat-ts-det-body h2 { font-size:1rem;margin:0; }
.lat-ts-det-dir { font-size:0.82rem;color:var(--lat-mist);margin:0; }

.lat-ts-det-horario { display:flex;flex-direction:column;gap:0.15rem;background:var(--lat-paper);border-radius:8px;padding:0.6rem 0.75rem; }
.lat-ts-det-horario span { font-size:0.82rem;font-weight:600; }
.lat-ts-det-horario small { font-size:0.75rem;color:var(--lat-mist); }

.lat-ts-acciones { display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem; }
.lat-ts-accion-btn { display:flex;flex-direction:column;align-items:center;gap:0.25rem;border:1px solid var(--lat-line);border-radius:8px;padding:0.5rem 0.25rem;text-decoration:none;font-size:0.72rem;color:var(--lat-ink);background:white;cursor:pointer;clip-path:none;text-align:center;transition:border-color 0.15s; }
.lat-ts-accion-btn:hover { border-color:var(--lat-volt);color:var(--lat-volt); }
.lat-ts-wa-btn { border-color:#25D366;color:#25D366; }

.lat-ts-compartir { display:flex;align-items:center;justify-content:center;gap:0.4rem;font-size:0.82rem;color:var(--lat-volt);text-decoration:none;border:1px solid var(--lat-line);border-radius:8px;padding:0.5rem;transition:border-color 0.15s; }
.lat-ts-compartir:hover { border-color:var(--lat-volt); }

.lat-ts-det-info { display:flex;flex-direction:column;gap:0.5rem;border-top:1px solid var(--lat-line);padding-top:0.75rem; }
.lat-ts-info-row { display:flex;justify-content:space-between;align-items:center;font-size:0.8rem; }
.lat-ts-info-row span:first-child { color:var(--lat-mist); }
.lat-ts-info-row a { color:var(--lat-volt);text-decoration:none;font-size:0.78rem; }
.lat-ts-info-srv  { display:flex;gap:0.25rem;font-size:1rem; }
.lat-ts-info-pagos { display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap; }

@media (max-width:1100px) { .lat-tiendas-layout { grid-template-columns:200px 1fr; } .lat-ts-detalle { display:none; } }
@media (max-width:768px)  { .lat-tiendas-layout { grid-template-columns:1fr; } .lat-tiendas-sidebar { display:none; } }

/* ── Filtros de categoría con X para quitar ──────────────── */
.lat-filtro-tag-quitar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.lat-filtro-tag-x {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.1s;
}
.lat-filtro-tag-x:hover { opacity: 1; }

/* Filtros de precio y marca como botones (toggle) */
.lat-filtro-precio-item,
.lat-filtro-marca-item {
    background: none;
    border: none;
    clip-path: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.83rem;
    color: var(--lat-ink);
    transition: color 0.1s;
}
.lat-filtro-precio-item:hover,
.lat-filtro-marca-item:hover  { color: var(--lat-volt); }
.lat-filtro-precio-item.activo,
.lat-filtro-marca-item.activo { color: var(--lat-volt); font-weight: 600; }

.lat-filtro-x { color: var(--lat-volt); font-size: 1rem; font-weight: 700; }

.lat-limpiar-filtros {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: #DC2626;
    background: none;
    border: none;
    cursor: pointer;
    clip-path: none;
    padding: 0.5rem 0;
    border-top: 1px solid var(--lat-line);
    font-family: inherit;
    text-decoration: none;
    width: 100%;
}

/* Tarjeta catálogo: link interno + footer con stepper y botón agregar */
.lat-cat-card {
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: var(--lat-ink);
}

.lat-cat-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.lat-cat-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--lat-line);
    margin-top: auto;
}

/* Stepper en catálogo */
.lat-cat-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid #D1D5DB;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
}
.lat-cat-stepper button {
    width: 26px;
    height: 28px;
    background: #F3F4F6;
    border: none;
    clip-path: none;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}
.lat-cat-stepper button:hover { background: #E5E7EB; color: var(--lat-volt); }
.lat-cat-stepper span {
    width: 28px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    border-left: 1.5px solid #D1D5DB;
    border-right: 1.5px solid #D1D5DB;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

/* Botón AGREGAR en catálogo */
.lat-cat-btn-agregar {
    flex: 1;
    height: 32px;
    background: #16A34A;
    color: white;
    border: none;
    clip-path: none;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: background 0.15s;
    font-family: inherit;
}
.lat-cat-btn-agregar:hover:not(:disabled) { background: #15803D; }
.lat-cat-btn-agregar.lat-agregando { background: #16A34A; opacity: 0.85; }
.lat-cat-btn-agregar:disabled { cursor: default; }

/* ══ CHECKOUT INICIO — FLUJO EMAIL-FIRST ══════════════════ */
.lat-ci-body {
    display: flex;
    gap: 2rem;
    padding: 2rem 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-start;
}

.lat-ci-main { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }

.lat-ci-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--lat-line);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.lat-ci-icono-titulo { display: flex; align-items: flex-start; gap: 1rem; }
.lat-ci-icono-circulo {
    width: 52px; height: 52px;
    background: var(--lat-volt);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lat-ci-icono-titulo h2 { font-size: 1.1rem; margin: 0; }
.lat-ci-icono-titulo p  { font-size: 0.85rem; color: var(--lat-mist); margin: 0; }

.lat-ci-form { display: flex; flex-direction: column; gap: 0.85rem; }

.lat-ci-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.lat-ci-btn-principal {
    width: 100%;
    height: 50px;
    background: var(--lat-volt);
    color: white;
    border: none;
    clip-path: none;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: filter 0.15s;
    font-family: inherit;
    margin-top: 0.25rem;
}
.lat-ci-btn-principal:hover:not(:disabled) { filter: brightness(1.08); }
.lat-ci-btn-principal:disabled { opacity: 0.6; cursor: not-allowed; }

.lat-ci-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--lat-mist);
    font-size: 0.82rem;
}
.lat-ci-divider::before,
.lat-ci-divider::after { content: ""; flex: 1; height: 1px; background: var(--lat-line); }

.lat-ci-texto-centro { text-align: center; font-size: 0.82rem; color: var(--lat-mist); margin: 0; }

/* Bienvenida: tiene cuenta */
.lat-ci-bienvenida { display: flex; align-items: center; gap: 1rem; }
.lat-ci-avatar {
    width: 52px; height: 52px;
    background: var(--lat-volt);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; flex-shrink: 0;
}
.lat-ci-bienvenida h2 { font-size: 1.05rem; margin: 0; }
.lat-ci-bienvenida p  { font-size: 0.85rem; color: var(--lat-mist); margin: 0; }

/* Registro nuevo */
.lat-ci-nuevo { display: flex; align-items: flex-start; gap: 0.75rem; }
.lat-ci-nuevo h2 { font-size: 1.05rem; margin: 0; }
.lat-ci-nuevo p  { font-size: 0.85rem; color: var(--lat-mist); margin: 0; }

.lat-ci-volver {
    background: none;
    border: none;
    clip-path: none;
    color: var(--lat-volt);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
    font-family: inherit;
}
.lat-ci-volver:hover { text-decoration: underline; }

.lat-ci-olvide { font-size: 0.82rem; color: var(--lat-mist); text-align: center; text-decoration: none; }
.lat-ci-olvide:hover { color: var(--lat-volt); }

.lat-ci-terminos { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; cursor: pointer; }
.lat-ci-terminos a { color: var(--lat-volt); }

/* Spinner */
.lat-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Garantías */
.lat-ci-garantias {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.lat-ci-garantias div {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: var(--lat-mist);
}

@media (max-width: 768px) {
    .lat-ci-body { flex-direction: column; padding: 1rem; }
    .lat-ci-form-grid { grid-template-columns: 1fr; }
}

/* Barra de pasos checkout (sin logo duplicado) */
.lat-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.75rem 2rem;
    background: white;
    border-bottom: 1px solid var(--lat-line);
}

.lat-steps-bar .lat-paso { gap: 0.4rem; font-size: 0.85rem; }
.lat-steps-bar .lat-paso-linea { width: 80px; }

/* ══ HERO SLIDER HOME — REGLA DEFINITIVA ══════════════ */
.lat-hero {
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 600px !important;
    max-height: 600px !important;
    overflow: hidden !important;
}

/* ── Stepper y botón AGREGAR en tarjetas de Home ─────────────── */
.lat-card-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.lat-card-stepper button {
    width: 30px;
    height: 34px;
    background: #F3F4F6 !important;
    border: none !important;
    clip-path: none !important;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    color: #374151 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s;
    border-radius: 0 !important;
}

.lat-card-stepper button:hover { background: #E5E7EB !important; color: var(--lat-volt) !important; }

.lat-card-stepper span {
    width: 32px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
    border-left: 1.5px solid #D1D5DB;
    border-right: 1.5px solid #D1D5DB;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.lat-card-agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: #16A34A !important;
    color: white !important;
    border: none !important;
    clip-path: none !important;
    border-radius: 8px !important;
    height: 34px;
    padding: 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
}

.lat-card-agregar:hover { background: #15803D !important; }
.lat-card-agregar svg { display: inline-block !important; flex-shrink: 0; }

/* ── Beneficios centrados ──────────────────────────────────── */
.lat-beneficios-wrap {
    display: flex;
    justify-content: center;
    background: white;
    border-top: 1px solid #E8EAED;
    border-bottom: 1px solid #E8EAED;
}

.lat-beneficios-wrap .lat-beneficios-bar {
    max-width: 900px;
    width: 100%;
    border-top: none;
    border-bottom: none;
    grid-template-columns: repeat(3, 1fr);
}

/* ── Slider hero: sin clip-path ni desbordamiento ──────────── */
.lat-hero {
    clip-path: none !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    height: 600px !important;
}

.lat-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0;
    transition: opacity 0.6s ease !important;
}

.lat-hero-slide.activo { opacity: 1 !important; }

.lat-hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN SIDEBAR — Grupos de navegación
══════════════════════════════════════════════════════════════ */
.admin-nav-grupo {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6B7280;
    text-transform: uppercase;
    padding: 1.1rem 1rem 0.35rem;
    margin-top: 0.25rem;
}
/* ══════════════════════════════════════════════════════════════
   ECOMMERCE MODULE — Highlighted sidebar section
══════════════════════════════════════════════════════════════ */
.admin-nav-grupo--ecom {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1.1rem 1rem 0.35rem 1rem;
    margin-top: 0.5rem;
    color: #A78BFA;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-nav-grupo--ecom::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7C3AED;
    box-shadow: 0 0 6px #7C3AED;
    flex-shrink: 0;
}

/* Ecommerce toggle buttons – purple accent */
.admin-nav-ecom.admin-nav-toggle {
    border-left: 3px solid transparent;
}
.admin-nav-ecom.admin-nav-toggle:hover {
    background: rgba(124, 58, 237, 0.12);
    border-left-color: #7C3AED;
    color: #C4B5FD;
}
.admin-nav-ecom.admin-nav-toggle:hover svg {
    stroke: #A78BFA;
}

/* Ecommerce sub-links */
.admin-nav-ecom-sub .admin-nav-sub a:hover,
.admin-nav-ecom-sub .admin-nav-sub a.lat-nav-active {
    color: #C4B5FD;
    border-left-color: #7C3AED;
}

/* Purple glow separator above ECOMMERCE section */
.admin-nav-ecom-sep {
    height: 1px;
    margin: 0.75rem 1rem 0;
    background: linear-gradient(90deg, #7C3AED 0%, transparent 100%);
    opacity: 0.4;
}


/* ══════════════════════════════════════════════════════════════
   MÓDULO FINANZAS — Estilos compartidos
══════════════════════════════════════════════════════════════ */
.fin-page { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* Header */
.fin-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.fin-header-izq { display: flex; align-items: center; gap: 1rem; }
.fin-header-icono { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fin-header-izq h1 { font-size: 1.6rem; margin: 0; font-family: var(--lat-display); }
.fin-header-izq p { margin: 0.2rem 0 0; color: var(--lat-mist); font-size: 0.88rem; }
.fin-header-acciones { display: flex; gap: 0.6rem; }

/* Botones */
.fin-btn-pri {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--lat-volt); color: white;
    border: none; border-radius: 8px; padding: 0.55rem 1.1rem;
    font-size: 0.88rem; font-weight: 600; cursor: pointer;
    text-decoration: none; font-family: inherit; clip-path: none;
    transition: filter 0.15s;
}
.fin-btn-pri:hover { filter: brightness(1.08); color: white; }
.fin-btn-sec {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: white; color: var(--lat-ink);
    border: 1.5px solid var(--lat-line); border-radius: 8px;
    padding: 0.5rem 1rem; font-size: 0.88rem; font-weight: 500;
    cursor: pointer; text-decoration: none; font-family: inherit; clip-path: none;
    transition: background 0.15s;
}
.fin-btn-sec:hover { background: #F9FAFB; }
.fin-btn-ic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--lat-volt); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1.1rem; font-weight: 700; clip-path: none; }

/* Filtros */
.fin-filtros { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; background: white; border: 1px solid var(--lat-line); border-radius: 10px; padding: 0.75rem 1rem; }
.fin-input { border: 1.5px solid var(--lat-line); border-radius: 7px; padding: 0.45rem 0.7rem; font-size: 0.85rem; font-family: inherit; outline: none; }
.fin-select { border: 1.5px solid var(--lat-line); border-radius: 7px; padding: 0.45rem 0.7rem; font-size: 0.85rem; background: white; font-family: inherit; min-width: 160px; }
.fin-select-sm { border: 1.5px solid var(--lat-line); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.82rem; background: white; font-family: inherit; }
.fin-btn-filtrar { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--lat-ink); color: white; border: none; border-radius: 7px; padding: 0.5rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; clip-path: none; font-family: inherit; }
.fin-btn-limpiar { background: none; border: none; color: var(--lat-volt); font-size: 0.83rem; cursor: pointer; font-family: inherit; }

/* KPIs */
.fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fin-kpi { background: white; border: 1px solid var(--lat-line); border-radius: 12px; padding: 1.1rem 1.25rem; display: flex; align-items: flex-start; gap: 0.9rem; }
.fin-kpi-icono { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fin-kpi > div > span { font-size: 0.8rem; color: var(--lat-mist); display: block; }
.fin-kpi > div > strong { font-size: 1.4rem; display: block; margin: 0.15rem 0 0; font-family: var(--lat-display); }
.fin-kpi > div > small { font-size: 0.75rem; display: block; margin-top: 0.15rem; color: var(--lat-mist); }

/* Gráficas */
.fin-graficas { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; }
.fin-card { background: white; border: 1px solid var(--lat-line); border-radius: 12px; padding: 1.25rem; }
.fin-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fin-card-header h3 { margin: 0; font-size: 0.98rem; font-weight: 600; flex: 1; }
.fin-link { font-size: 0.82rem; color: var(--lat-volt); cursor: pointer; text-decoration: none; }
.fin-buscar { border: 1.5px solid var(--lat-line); border-radius: 7px; padding: 0.4rem 0.75rem; font-size: 0.83rem; width: 280px; font-family: inherit; }
.fin-paginacion-info { font-size: 0.8rem; color: var(--lat-mist); margin-left: auto; }

/* Barras de gráfica */
.fin-chart-wrap { height: 180px; display: flex; flex-direction: column; justify-content: flex-end; }
.fin-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; }
.fin-chart-doble { gap: 6px; }
.fin-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; height: 100%; justify-content: flex-end; }
.fin-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; transition: height 0.3s; }
.fin-bar-col span { font-size: 0.65rem; color: var(--lat-mist); }
.fin-empty { text-align: center; color: var(--lat-mist); font-size: 0.85rem; padding: 2rem 0; }
.fin-chart-leyenda { display: flex; gap: 1rem; margin-bottom: 0.75rem; }
.fin-chart-leyenda span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--lat-mist); }
.fin-chart-leyenda i { width: 20px; height: 3px; border-radius: 2px; display: inline-block; }

/* Categorías */
.fin-cat-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid #F3F4F6; }
.fin-cat-nombre { font-size: 0.83rem; min-width: 120px; }
.fin-cat-bar-bg { flex: 1; height: 6px; background: #F3F4F6; border-radius: 3px; overflow: hidden; }
.fin-cat-bar { height: 100%; border-radius: 3px; transition: width 0.4s; }
.fin-cat-monto { font-size: 0.82rem; font-weight: 600; white-space: nowrap; min-width: 80px; text-align: right; }
.fin-cat-pct { font-size: 0.75rem; color: var(--lat-mist); white-space: nowrap; min-width: 50px; }
.fin-cat-total { display: flex; justify-content: space-between; padding: 0.6rem 0 0; font-size: 0.85rem; font-weight: 700; margin-top: 0.25rem; }

/* Tabla */
.fin-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fin-tabla th { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--lat-line); font-size: 0.8rem; color: var(--lat-mist); font-weight: 600; white-space: nowrap; }
.fin-tabla td { padding: 0.75rem; border-bottom: 1px solid #F3F4F6; vertical-align: middle; }
.fin-tabla tr:hover td { background: #F9FAFB; }
.fin-badge-cat { background: #EEF2FF; color: #4338CA; border-radius: 20px; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 600; }
.fin-badge-cat.egreso { background: #FEF2F2; color: #DC2626; }
.fin-tipo-badge { border-radius: 20px; padding: 0.2rem 0.65rem; font-size: 0.75rem; font-weight: 700; }
.fin-tipo-badge.ingreso { background: #D1FAE5; color: #059669; }
.fin-tipo-badge.egreso  { background: #FEE2E2; color: #DC2626; }
.fin-accion-btn { background: #FEE2E2; border: none; border-radius: 6px; padding: 0.35rem; cursor: pointer; color: #DC2626; clip-path: none; display: flex; align-items: center; }

/* Paginación */
.fin-paginacion { display: flex; gap: 0.35rem; justify-content: center; padding: 1rem 0 0; }
.fin-paginacion button { width: 34px; height: 34px; border: 1.5px solid var(--lat-line); border-radius: 7px; background: white; cursor: pointer; font-size: 0.85rem; font-family: inherit; clip-path: none; }
.fin-paginacion button.activo { background: var(--lat-volt); color: white; border-color: var(--lat-volt); }

/* Formulario */
.fin-form-page { max-width: 1200px; }
.fin-breadcrumb { font-size: 0.83rem; color: var(--lat-mist); }
.fin-breadcrumb a { color: var(--lat-volt); text-decoration: none; }
.fin-form-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; }
.fin-form-main { display: flex; flex-direction: column; gap: 1rem; }
.fin-form-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.fin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.fin-5cols { grid-template-columns: repeat(5, 1fr); }
.fin-card h3 { font-size: 0.95rem; margin: 0 0 1rem; font-weight: 600; }
.fin-seccion-titulo { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; margin: 0 0 0.9rem !important; }
.fin-num { width: 22px; height: 22px; background: var(--lat-volt); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.fin-input-sm { width: 100%; border: 1.5px solid var(--lat-line); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.83rem; font-family: inherit; }
.fin-agregar-item { background: none; border: 1.5px dashed var(--lat-volt); color: var(--lat-volt); border-radius: 7px; padding: 0.5rem 1rem; font-size: 0.83rem; cursor: pointer; font-family: inherit; clip-path: none; margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.fin-upload-zone { border: 2px dashed var(--lat-line); border-radius: 8px; padding: 1.25rem; text-align: center; }
.fin-upload-zone p { font-size: 0.82rem; color: var(--lat-mist); margin: 0.5rem 0; }
.fin-upload-zone small { font-size: 0.75rem; color: #9CA3AF; }
.fin-toggle-group { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
.fin-toggle-group button { flex: 1; padding: 0.45rem; border: 1.5px solid var(--lat-line); border-radius: 7px; background: white; cursor: pointer; font-size: 0.83rem; font-family: inherit; clip-path: none; transition: all 0.15s; }
.fin-toggle-group button.activo { background: var(--lat-volt); color: white; border-color: var(--lat-volt); }
.fin-res-row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #F3F4F6; font-size: 0.85rem; }
.fin-res-total { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0 0; margin-top: 0.25rem; }
.fin-res-total span { font-size: 0.82rem; font-weight: 600; color: var(--lat-mist); }
.fin-res-total strong { font-size: 1.4rem; color: #059669; font-family: var(--lat-display); }
.fin-res-total.egreso strong { color: #DC2626; }
.fin-form-botones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fin-form-botones .fin-btn-pri, .fin-form-botones .fin-btn-sec { flex: 1; justify-content: center; }
.fin-metodos-pago { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fin-metodo { padding: 0.4rem 0.75rem; border: 1.5px solid var(--lat-line); border-radius: 7px; background: white; cursor: pointer; font-size: 0.83rem; font-family: inherit; clip-path: none; display: flex; align-items: center; gap: 0.4rem; transition: all 0.15s; }
.fin-metodo.activo { background: var(--lat-volt); color: white; border-color: var(--lat-volt); }

@media (max-width: 1024px) {
    .fin-kpis { grid-template-columns: 1fr 1fr; }
    .fin-graficas { grid-template-columns: 1fr; }
    .fin-form-layout { grid-template-columns: 1fr; }
    .fin-5cols { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════
   MÓDULO PEDIDOS ADMIN
══════════════════════════════════════════════════════ */
.ped-page { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; max-width: 1600px; }

/* Header */
.ped-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.ped-header-izq { display: flex; align-items: center; gap: 1rem; }
.ped-icono-titulo { width: 52px; height: 52px; background: var(--lat-volt); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ped-header-izq h1 { font-size: 1.6rem; margin: 0; font-family: var(--lat-display); }
.ped-header-izq p { margin: 0.2rem 0 0; color: var(--lat-mist); font-size: 0.88rem; }
.ped-header-acciones { display: flex; gap: 0.6rem; }

/* KPIs de estado */
.ped-estados-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.ped-estado-card {
    background: white; border: 1.5px solid var(--lat-line); border-radius: 12px;
    padding: 0.9rem 1rem; display: flex; align-items: flex-start; gap: 0.75rem;
    cursor: pointer; text-align: left; font-family: inherit; clip-path: none;
    transition: all 0.15s;
}
.ped-estado-card:hover { border-color: var(--ec, var(--lat-volt)); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.ped-estado-card.activo { border-color: var(--ec); background: color-mix(in srgb, var(--ec) 8%, white); }
.ped-estado-icono { width: 38px; height: 38px; border-radius: 9px; background: color-mix(in srgb, var(--ec, #2F5BFF) 12%, white); color: var(--ec); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ped-estado-card strong { font-size: 0.82rem; color: var(--lat-mist); display: block; font-weight: 500; }
.ped-estado-num { font-size: 1.5rem; font-weight: 800; font-family: var(--lat-display); color: var(--lat-ink); display: block; line-height: 1.1; }
.ped-estado-card small { font-size: 0.72rem; color: #9CA3AF; display: block; }

/* Layout principal */
.ped-body { display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; align-items: start; }
.ped-main { display: flex; flex-direction: column; gap: 1rem; }

/* Tabla */
.ped-tabla-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--lat-line); flex-wrap: wrap; }
.ped-buscador { border: 1.5px solid var(--lat-line); border-radius: 7px; padding: 0.4rem 0.75rem; font-size: 0.83rem; width: 240px; font-family: inherit; }
.ped-tabla td { vertical-align: middle; padding: 0.8rem 0.75rem; }
.ped-num-link { color: var(--lat-volt); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.ped-num-link:hover { text-decoration: underline; }
.ped-cargando, .ped-vacio { text-align: center; padding: 2.5rem; color: var(--lat-mist); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.ped-spinner { width: 18px; height: 18px; border: 2.5px solid #E5E7EB; border-top-color: var(--lat-volt); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* Badges pago */
.ped-badge-pago { border-radius: 20px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; }
.ped-badge-pago.pagado { background: #D1FAE5; color: #059669; }
.ped-badge-pago.verificando { background: #FEF3C7; color: #D97706; }
.ped-badge-pago.pendiente { background: #F3F4F6; color: #6B7280; }
.ped-badge-pago.rechazado { background: #FEE2E2; color: #DC2626; }

/* Badges estado */
.ped-badge-estado { border-radius: 20px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; }
.est-pendiente  { background: #FEF3C7; color: #92400E; }
.est-confirmado { background: #DBEAFE; color: #1D4ED8; }
.est-preparando { background: #EDE9FE; color: #6D28D9; }
.est-enviado    { background: #CFFAFE; color: #0E7490; }
.est-entregado  { background: #D1FAE5; color: #065F46; }
.est-cancelado  { background: #FEE2E2; color: #991B1B; }

/* Acciones de fila */
.ped-acciones { display: flex; gap: 0.3rem; align-items: center; position: relative; }
.ped-acc-btn {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: #F3F4F6; border: 1px solid var(--lat-line); border-radius: 6px;
    cursor: pointer; font-size: 0.95rem; color: #6B7280; clip-path: none;
    text-decoration: none; transition: all 0.15s; overflow: visible;
}
.ped-acc-btn svg { flex-shrink: 0; }
.ped-acc-btn:hover { background: #E5E7EB; color: var(--lat-ink); }
.ped-acc-btn.verde { background: #D1FAE5; border-color: #6EE7B7; color: #059669; }
.ped-acc-btn.verde svg { stroke: #059669; }
.ped-acc-btn.azul  { background: #DBEAFE; border-color: #93C5FD; color: #2563EB; }
.ped-acc-btn.azul svg { stroke: #2563EB; }
.ped-menu-overlay { position: fixed; inset: 0; z-index: 40; }
.ped-menu-dropdown {
    position: absolute; right: 0; top: 34px; z-index: 50;
    background: white; border: 1px solid var(--lat-line);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 190px; overflow: hidden;
}
.ped-menu-dropdown button {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: 0.6rem 1rem;
    background: none; border: none; cursor: pointer; font-size: 0.85rem;
    font-family: inherit; clip-path: none; color: var(--lat-ink);
    transition: background 0.1s;
}
.ped-menu-dropdown button:hover { background: #F9FAFB; }
.ped-menu-dropdown .menu-sep { height: 1px; background: var(--lat-border); margin: .25rem 0; }
.ped-menu-dropdown .menu-label { padding: .35rem 1rem .15rem; font-size: .7rem; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: .05em; }

/* Sidebar */
.ped-sidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.ped-donut-wrap { display: flex; justify-content: center; padding: 0.5rem 0 1rem; }
.ped-donut {
    width: 110px; height: 110px; border-radius: 50%;
    background: conic-gradient(#F59E0B 0deg 33deg, #3B82F6 33deg 62deg, #8B5CF6 62deg 95deg, #06B6D4 95deg 112deg, #10B981 112deg 265deg, #EF4444 265deg 360deg);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.ped-donut::after { content:''; position:absolute; inset:20px; background:white; border-radius:50%; }
.ped-donut span { position:relative; z-index:1; text-align:center; font-size:1.2rem; font-weight:800; line-height:1.2; }
.ped-donut span small { font-size:0.65rem; font-weight:400; color:var(--lat-mist); display:block; }
.ped-leyenda { display: flex; flex-direction: column; gap: 0.35rem; }
.ped-leyenda-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.ped-leyenda-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ped-leyenda-nombre { flex: 1; color: var(--lat-ink); }
.ped-leyenda-val { font-weight: 700; }
.ped-leyenda-pct { color: var(--lat-mist); min-width: 45px; text-align: right; }
.ped-acc-rapida { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #F3F4F6; cursor: pointer; }
.ped-acc-rapida:last-child { border-bottom: none; }
.ped-acc-rapida-icono { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ped-acc-rapida strong { font-size: 0.82rem; display: block; margin-bottom: 0.1rem; }
.ped-acc-rapida small { font-size: 0.75rem; color: var(--lat-mist); }
.ped-estados-leyenda { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; color: var(--lat-mist); }
.ped-estados-leyenda strong { color: var(--lat-ink); }

@media (max-width: 1200px) {
    .ped-body { grid-template-columns: 1fr; }
    .ped-estados-grid { grid-template-columns: repeat(3, 1fr); }
    .ped-sidebar { position: static; }
}

/* ── Badges Cotizaciones ─────────────────────────────── */
.cot-badge { border-radius: 20px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; }
.cot-borrador  { background: #F3F4F6; color: #6B7280; }
.cot-enviada   { background: #DBEAFE; color: #1D4ED8; }
.cot-vencida   { background: #FEF3C7; color: #92400E; }
.cot-aceptada  { background: #D1FAE5; color: #065F46; }
.cot-rechazada { background: #FEE2E2; color: #991B1B; }

/* ── Badges Devoluciones ─────────────────────────────── */
.dev-badge { border-radius: 20px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; }
.dev-solicitada  { background: #FEF3C7; color: #92400E; }
.dev-aprobada    { background: #D1FAE5; color: #065F46; }
.dev-procesada   { background: #DBEAFE; color: #1D4ED8; }
.dev-reembolsada { background: #EDE9FE; color: #6D28D9; }
.dev-rechazada   { background: #FEE2E2; color: #991B1B; }

.cotiz-prod-result:hover { background: #F9FAFB; }

.notif-item:hover { background: #F9FAFB; }

/* ── Botones globales de topbar ───────────────────────── */
.lat-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    background: var(--lat-volt);
    color: #FFF;
    border: none;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}
.lat-btn-primary:hover { opacity: .88; }

.lat-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    background: #FFF;
    color: var(--lat-ink);
    border: 1.5px solid var(--lat-border);
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.lat-btn-outline:hover { background: var(--lat-bg); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Date input improvements ────────────────────────────────────────── */
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
    filter: invert(30%) sepia(80%) saturate(400%) hue-rotate(210deg);
}
input[type="date"]::-webkit-datetime-edit {
    color: var(--lat-ink);
}

/* ── Dashboard alert items ──────────────────────────────────────────── */
.dash-alerta-item:hover {
    background: #F3F4F6 !important;
}
.dash-alerta-item:hover svg:last-child {
    stroke: var(--lat-volt);
    transform: translateX(2px);
    transition: all .15s;
}

/* ── Submenús colapsables ─────────────────────────────────────── */
.admin-nav-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .75rem;
    border: none;
    background: none;
    color: var(--sb-muted, var(--lat-mist));
    font-size: var(--sb-fs, .82rem);
    font-weight: 500;
    cursor: pointer;
    border-radius: 7px;
    text-align: left;
    transition: background .15s, color .15s;
}
.admin-nav-toggle:hover {
    background: var(--sb-hover, rgba(255,255,255,.06));
    color: #fff;
}
.admin-nav-toggle svg:first-child {
    width: 16px; height: 16px; flex-shrink: 0;
}
.admin-nav-chevron {
    width: 13px !important; height: 13px !important;
    margin-left: auto;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.admin-nav-chevron.open {
    transform: rotate(180deg);
}
.admin-nav-sub {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 1.4rem;
    margin-bottom: .25rem;
}
.admin-nav-sub.open {
    display: flex;
}
.admin-nav-sub a {
    font-size: .78rem !important;
    padding: .35rem .75rem !important;
    color: #94A3B8 !important;
    border-radius: 6px !important;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
}
.admin-nav-sub a:hover,
.admin-nav-sub a.lat-nav-active {
    background: rgba(255,255,255,.08);
    color: #fff !important;
}
.admin-nav-sub a.lat-nav-active {
    background: rgba(99,102,241,.25);
    color: var(--lat-volt) !important;
    font-weight: 600;
}

/* ── Botones de navegación entre tabs (Anterior/Siguiente) ─────────── */
/* Selector más específico que button {} para ganar la cascada */
button.lat-nav-btn, a.lat-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    padding: .55rem 1.1rem !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    clip-path: none !important;
    text-decoration: none;
    transition: background .15s;
}
button.lat-nav-btn-outline, a.lat-nav-btn-outline {
    border: 1.5px solid var(--lat-border) !important;
    background: #FFF !important;
    color: #374151 !important;
}
button.lat-nav-btn-primary, a.lat-nav-btn-primary {
    border: none !important;
    background: #7C3AED !important;
    color: #FFF !important;
}
button.lat-nav-btn-outline:hover { background: #F9FAFB !important; }
button.lat-nav-btn-primary:hover { background: #6D28D9 !important; }


/* ═══════════════════════════════════════════════════════
   ESTILOS DE IMPRESIÓN — Ticket y Boleta A4
   ═══════════════════════════════════════════════════════ */
@media print {
    /* Ocultar toda la chrome del admin */
    .admin-sidebar,
    .admin-topheader,
    .admin-topheader-acciones,
    .no-print {
        display: none !important;
    }

    /* El shell pasa a ocupar todo el ancho */
    .admin-shell {
        display: block !important;
    }

    /* El contenido ocupa toda la página */
    .admin-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: unset !important;
    }

    /* Quitar padding del body */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
        background: #FFF !important;
    }

    /* Para ticket 80mm: centrar y tamaño justo */
    #ticket {
        box-shadow: none !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
    }

    /* Para A4: quitar sombras */
    #boleta-a4, .boleta-print {
        box-shadow: none !important;
        border: none !important;
    }

    /* Asegurar que los saltos de página sean correctos */
    @page {
        margin: 5mm;
    }
    @page :first {
        margin: 5mm;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA DINÁMICO: Variables CSS de TiendaConfigService aplicadas al carrito
   Estas reglas usan --tienda-primario que se inyecta desde App.razor
   ═══════════════════════════════════════════════════════════════════════ */

/* Pasos del checkout */
.lat-paso.activo .lat-paso-num {
    background: var(--tienda-primario, var(--lat-volt)) !important;
}
.lat-paso-num-grande {
    color: var(--tienda-primario, var(--lat-volt)) !important;
}

/* Botones de continuar */
.lat-btn-continuar {
    background: var(--tienda-primario, var(--lat-volt)) !important;
}
.lat-btn-continuar-pago {
    background: var(--tienda-primario, var(--lat-volt)) !important;
}

/* Botón principal del checkout inicio */
.lat-ci-btn-principal {
    background: var(--tienda-primario, var(--lat-volt)) !important;
    border-color: var(--tienda-primario, var(--lat-volt)) !important;
}

/* Input focus en checkout */
.lat-cupon-input input:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--tienda-primario, var(--lat-volt)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tienda-primario, #7C3AED) 15%, transparent) !important;
}

/* Método seleccionado en envío y pago */
.lat-metodo-card.activo {
    border-color: var(--tienda-primario, var(--lat-volt)) !important;
    background: color-mix(in srgb, var(--tienda-primario, #7C3AED) 6%, white) !important;
}
.lat-metodo-item.activo {
    border-color: var(--tienda-primario, var(--lat-volt)) !important;
    background: color-mix(in srgb, var(--tienda-primario, #7C3AED) 6%, white) !important;
}

/* Botón aplicar cupón */
.lat-cupon-input button {
    background: var(--tienda-primario, var(--lat-volt)) !important;
}

/* Barra de progreso de envío gratis */
.lat-barra-progreso-fill,
[style*="background:@Config.ColorPrimario"] {
    background: var(--tienda-primario, var(--lat-volt)) !important;
}

/* Texto con color primario */
.lat-ci-paso-badge,
.lat-cupon-ok {
    color: var(--tienda-primario, var(--lat-volt)) !important;
}

/* Header del checkout */
.lat-checkout-logo strong {
    color: var(--tienda-primario, var(--lat-volt)) !important;
}

/* Links con color primario */
.lat-seguir-comprando,
.lat-ci-volver,
.lat-paso.completado .lat-paso-num {
    background: var(--tienda-primario, #059669) !important;
}

/* Footer tema */
.app-footer-tienda {
    background: var(--tienda-footer-bg, #0F172A) !important;
    color: var(--tienda-footer-txt, #E2E8F0) !important;
}

/* Metodo de envio gratis badge */
.lat-gratis {
    color: var(--tienda-primario, #059669) !important;
}

/* Botón pagar / confirmar */
.btn-pagar,
[class*="lat-pagar"],
.lat-pago-confirmar-btn {
    background: var(--tienda-primario, var(--lat-volt)) !important;
}


/* ══ RESPONSIVE MÓVIL / TABLET ══════════════════════════════════════════════
   Breakpoints:
   - 900px  → tablet horizontal
   - 768px  → tablet vertical / móvil grande
   - 540px  → móvil mediano
   - 380px  → móvil pequeño
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Catálogo: sidebar colapsa en móvil ─────────────────────────── */
@media (max-width: 900px) {
    /* Layout catalogo: sidebar + contenido → solo contenido */
    div[style*="grid-template-columns:240px 1fr"] {
        display: block !important;
    }
    aside[style*="position:sticky"] {
        display: none !important;      /* sidebar oculto en móvil */
    }
}

/* ── Header: buscador y acciones en móvil ───────────────────────── */
@media (max-width: 768px) {
    .lat-header-superior {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    .lat-buscador-wrap { flex: 1; min-width: 0; }
    .lat-header-accion small { display: none; }  /* Ocultar subtítulos */
    .lat-header-accion { padding: 0.4rem 0.6rem; gap: 0.25rem; min-width: 36px; }
}

/* ── Nav de categorías: scroll horizontal en móvil ─────────────── */
@media (max-width: 768px) {
    .lat-nav-tienda-inner {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .lat-nav-tienda-inner::-webkit-scrollbar { display: none; }
    .lat-categorias-trigger { white-space: nowrap; flex-shrink: 0; }
}

/* ── Cards de producto: 2 columnas en tablet, 2 en móvil ─────────── */
@media (max-width: 768px) {
    /* Grids de producto auto-fill: mínimo 150px en móvil */
    div[style*="minmax(190px,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 400px) {
    div[style*="minmax(190px,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Cards de producto: texto más compacto ──────────────────────── */
@media (max-width: 540px) {
    .cat-card-nombre { font-size: 0.78rem !important; }
    .cat-card-precio { font-size: 0.9rem !important; }
}

/* ── Carrito / Checkout ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .lat-checkout-header {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .lat-checkout-pasos { display: none; }      /* Pasos ocultos en móvil */
    .lat-checkout-body {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    .lat-checkout-resumen {
        width: 100% !important;
        position: static !important;
    }
    .lat-carrito-item-v2 {
        grid-template-columns: 64px 1fr !important;
        gap: 0.5rem;
    }
}

/* ── Detalle de producto: columnas → filas en móvil ─────────────── */
@media (max-width: 768px) {
    div[style*="grid-template-columns:minmax(0,1fr) 400px"],
    div[style*="grid-template-columns:minmax(0,1fr) 380px"] {
        display: block !important;
    }
}

/* ── Mini banners de sección: padding reducido ───────────────────── */
@media (max-width: 540px) {
    div[style*="padding:1.25rem 1.75rem;margin-bottom"] {
        padding: 0.85rem 1rem !important;
    }
}

/* ── Página de inicio: secciones ────────────────────────────────── */
@media (max-width: 768px) {
    .lat-home-seccion { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Modal de login: ancho completo en móvil ────────────────────── */
@media (max-width: 500px) {
    div[style*="max-width:440px"] { max-width: 98vw !important; border-radius: 14px !important; }
    div[style*="max-width:500px"] { max-width: 98vw !important; border-radius: 14px !important; }
}

/* ── Admin: tabla responsiva ─────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-shell { padding: 0.5rem; }
    .admin-content { padding: 0.75rem !important; }
}

/* ── Sidebar catálogo: clase específica para responsive ─────────── */
@media (max-width: 900px) {
    .cat-sidebar { display: none !important; }
    div:has(> .cat-sidebar) {
        display: block !important;
        grid-template-columns: unset !important;
    }
}

/* ══ ADMIN RESPONSIVE ════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px): sidebar más angosto ──────────────────────── */
@media (max-width: 1024px) {
    .admin-sidebar { width: 200px !important; }
    .admin-content { padding: 1.5rem; }
}

/* ── Móvil/tablet vertical (≤768px): sidebar como drawer ──────── */
@media (max-width: 768px) {
    /* Hamburger visible */
    .admin-hamburger { display: flex !important; }

    /* Shell sin flex fijo */
    .admin-shell { position: relative; }

    /* Sidebar fuera de la pantalla por defecto */
    .admin-sidebar {
        position: fixed !important;
        top: 0; left: 0;
        height: 100vh;
        z-index: 8000;
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: 260px !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
    }

    /* Sidebar abierto via toggle */
    .admin-sidebar--open {
        transform: translateX(0) !important;
    }

    /* Overlay oscuro detrás del sidebar */
    .admin-mob-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 7999;
        backdrop-filter: blur(2px);
    }

    /* Contenido ocupa todo el ancho */
    .admin-content {
        width: 100% !important;
        padding: 1rem !important;
        min-width: 0;
    }

    /* Topheader más compacto */
    .admin-topheader {
        padding: .65rem 1rem !important;
        gap: .5rem;
    }

    /* Usuario: ocultar subtítulo en móvil */
    .admin-topheader .admin-user-nombre small { display: none; }
}

/* ── Móvil pequeño (≤480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
    .admin-content { padding: .75rem !important; }

    /* Tablas: scroll horizontal */
    .admin-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards en columna */
    .admin-content [style*="display:grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Grids de métricas: 2 columnas en lugar de 4 */
    .admin-content [style*="repeat(4,1fr)"] {
        grid-template-columns: repeat(2,1fr) !important;
    }
    .admin-content [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2,1fr) !important;
    }
}

/* ── Topheader siempre visible aunque sidebar esté abierto ──────── */
@media (max-width: 768px) {
    .admin-topheader { position: sticky; top: 0; z-index: 100; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – Nuevas páginas SUNAT / Compras / Auth
   Añadido como parte de la revisión responsive v2
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablas admin: scroll horizontal desde tablet (768px) ─────────── */
@media (max-width: 768px) {
    .admin-content .lat-card table,
    .admin-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        white-space: nowrap;
    }
    /* Wrapper de tabla: también hacer scroll si es directo */
    .admin-content [style*="overflow:hidden"] table {
        min-width: 520px;
    }
}

/* ── KPIs de 4 columnas → 2 columnas en tablet ────────────────────── */
@media (max-width: 768px) {
    .admin-content [style*="repeat(4,1fr)"],
    .admin-content [style*="repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .admin-content [style*="repeat(4,1fr)"],
    .admin-content [style*="repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Grids de 6 columnas → 3 → 2 ──────────────────────────────────── */
@media (max-width: 900px) {
    .admin-content [style*="repeat(6,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .admin-content [style*="repeat(6,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Grids de 3 columnas → 2 → 1 ──────────────────────────────────── */
@media (max-width: 768px) {
    .admin-content [style*="repeat(3,1fr)"],
    .admin-content [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .admin-content [style*="repeat(3,1fr)"],
    .admin-content [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Modales admin: ancho máximo en pantallas pequeñas ────────────── */
@media (max-width: 600px) {
    /* Cualquier modal fijo dentro de overlay */
    div[style*="position:fixed"][style*="z-index:1000"] > div {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }
}

/* ── Modales admin: padding interno más ajustado ──────────────────── */
@media (max-width: 480px) {
    div[style*="border-radius:14px"][style*="padding:1.75rem"] {
        padding: 1.25rem !important;
    }
}

/* ── Filtros de tabla: wrap en móvil ─────────────────────────────── */
@media (max-width: 600px) {
    .admin-content [style*="display:flex"][style*="gap"] {
        flex-wrap: wrap;
    }
    .admin-content input[type="date"],
    .admin-content input[type="text"],
    .admin-content select {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ── Cabeceras de página: stack en móvil ─────────────────────────── */
@media (max-width: 600px) {
    .admin-content [style*="display:flex"][style*="justify-content:space-between"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .75rem;
    }
    .admin-content [style*="display:flex"][style*="justify-content:space-between"] > button,
    .admin-content [style*="display:flex"][style*="justify-content:space-between"] > a {
        width: 100%;
        justify-content: center;
    }
}

/* ── Botones de acción en tabla: stack vertical ───────────────────── */
@media (max-width: 480px) {
    .admin-content td [style*="display:flex"][style*="gap"] {
        flex-direction: column;
        gap: .25rem !important;
    }
    .admin-content td button,
    .admin-content td a {
        font-size: .75rem !important;
        padding: .25rem .5rem !important;
    }
}

/* ── RecuperarPassword / RestablecerPassword: mobile-first ──────── */
@media (max-width: 480px) {
    .rp-card, .np-card {
        padding: 1.5rem 1.25rem !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }
    .rp-root, .np-root {
        padding: 1rem !important;
        align-items: flex-start !important;
        padding-top: 2rem !important;
    }
}

/* ── Login recovery modal: full-width overlay en móvil ────────────── */
@media (max-width: 520px) {
    .lg-recover-overlay {
        padding: .75rem !important;
    }
    .lg-recover-modal {
        padding: 1.5rem 1.25rem !important;
        border-radius: 14px !important;
    }
}

/* ── ModalLogin recovery view: scroll si es necesario ──────────────── */
@media (max-width: 480px) {
    .lat-login-modal {
        padding: 1.5rem 1.25rem !important;
        width: 92% !important;
    }
}

/* ── ValidarComprobante: resultado en columna debajo del form ──────── */
@media (max-width: 900px) {
    .vc-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ── SeriesSucursal: badges de series responsive ──────────────────── */
@media (max-width: 900px) {
    .ss-series-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .ss-modal-grid  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
    .ss-series-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ss-modal-grid  { grid-template-columns: 1fr !important; }
}

/* ── Sire: tabs wrap en pantallas pequeñas ─────────────────────────── */
@media (max-width: 540px) {
    .admin-content [style*="display:flex"][style*="gap:.5rem"] > button {
        font-size: .78rem !important;
        padding: .45rem .75rem !important;
        flex: 1;
    }
}

/* ── Notas de crédito / débito: buscador de serie-número ──────────── */
@media (max-width: 520px) {
    /* grid 1fr 1fr auto → column */
    .admin-content [style*="grid-template-columns:1fr 1fr auto"] {
        grid-template-columns: 1fr 1fr !important;
    }
    .admin-content [style*="grid-template-columns:1fr 1fr auto"] > button {
        grid-column: 1 / -1;
    }
}

/* ── Sidebar SUNAT extendido: nav scrollable en tablet ─────────────── */
@media (max-width: 1100px) {
    .admin-sidebar {
        width: 200px !important;
    }
}