/* ============================================================
   Livoo ecommerce — capa adaptable (móvil / tablet / desktop)
   ------------------------------------------------------------
   Se carga DESPUÉS de kit.css, admin.css, blog.css y
   admin-order-detail.css, así que gana por orden de cascada
   sin necesidad de !important salvo donde el markup trae
   estilos inline (los casos están comentados).

   Breakpoints:
     ≤1200px  desktop angosto  — el contenedor deja de tener aire
     ≤1024px  tablet           — 3 columnas → 2
     ≤ 860px  tablet vertical  — barras laterales colapsan
     ≤ 768px  móvil            — una sola columna + chrome móvil
     ≤ 420px  móvil pequeño    — se aprieta la tipografía
   ============================================================ */

/* ------------------------------------------------------------
   0. Base: nada debe desbordar horizontalmente
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.kit { overflow-x: clip; }
.kit img, .kit svg, .kit video { max-width: 100%; }

/* Los <table> del kit y del admin nunca deben romper el layout:
   se envuelven en su propio scroll horizontal. */
.kittable { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kittable > thead, .kittable > tbody { display: table; width: 100%; min-width: 560px; }
.adm__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Utilidad interna: fila con scroll horizontal y snap */
.lv-hscroll {
  display: flex; gap: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.lv-hscroll::-webkit-scrollbar { display: none; }
.lv-hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ------------------------------------------------------------
   1. Contenedor y tipografía fluida
   ------------------------------------------------------------ */
@media (max-width: 1240px) {
  :root { --gutter: 18px; }
}
@media (max-width: 768px) {
  :root { --gutter: 14px; }
}
@media (max-width: 420px) {
  :root { --gutter: 12px; }
}

/* Encabezados de página: bajan de tamaño en lugar de desbordar */
@media (max-width: 768px) {
  .kith { font-size: 21px; }
  .kitphead { padding: 26px 20px; border-radius: var(--radius-lg); }
  .kitphead h1 { font-size: 24px; }
  .kitphead p { font-size: 14px; }
  .kitphead::after { display: none; }
  .lvintro h1 { font-size: 21px; }
  .lvintro p { font-size: 14px; }
}

/* ============================================================
   2. HEADER
   ============================================================ */

/* -- Topbar de anuncios: se simplifica y desaparece en móvil -- */
@media (max-width: 1024px) {
  .kittop__links a span { display: none; }
  .kittop__links { gap: 12px; }
}
@media (max-width: 860px) {
  .kittop__links { display: none; }
  .kittop__in { justify-content: center; }
  .kittop__msg {
    font-size: 11.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* -- Fila principal: logo · buscador · acciones -- */
@media (max-width: 1024px) {
  .kithdr__top { gap: 14px; }
  .kithdr__search { max-width: none; }
  /* Las etiquetas "Favoritos / Mi lista" ocupan demasiado: solo iconos */
  .kithdr__link > div:last-child { display: none; }
  .kithdr__link { gap: 0; padding: 8px; }
  .kithdr__acct { gap: 8px; }
}

@media (max-width: 860px) {
  /* Dos filas: (logo + acciones) arriba, buscador debajo a todo el ancho */
  .kithdr__top {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px var(--gutter);
  }
  .kithdr__logo { order: 1; min-width: 0; }
  .kithdr__acct { order: 2; margin-left: auto; }
  /* shrink 1 + min-width:0 son obligatorios: con `flex: 1 0 100%` la
     barra de búsqueda no puede bajar de su min-content y se sale del
     viewport en pantallas de 320 px (queda recortada por overflow-x). */
  .kithdr__search { order: 3; flex: 1 1 100%; min-width: 0; max-width: none; }
  .kithdr__search .lvscopewrap, .kithdr__search .lv-search { min-width: 0; }
  .kithdr__logo img { width: 32px; height: 32px; }
  .kithdr__logo span { font-size: 21px; }
}

/* El header entero pegado arriba ocupa demasiado alto en móvil:
   solo la fila principal queda sticky. */
@media (max-width: 768px) {
  .kithdr { position: static; }
  .kithdr__top {
    position: sticky; top: 0; z-index: var(--z-header);
    background: var(--color-surface);
    border-bottom: 1px solid var(--border);
  }
}

/* -- Subnav: carrusel horizontal en pantallas chicas -- */
@media (max-width: 1024px) {
  .kitnav__inner {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .kitnav__inner::-webkit-scrollbar { display: none; }
  .kitnav__item, .kitnav__pill, .kitnav__r { flex: 0 0 auto; white-space: nowrap; }
  .kitnav__spacer { display: none; }
}
@media (max-width: 768px) {
  /* Los accesos "Seguir mi pedido / Contacto" viven en el menú lateral */
  .kitnav__r { display: none; }
}

/* -- Mega menú: de 4 columnas a 2 y luego a 1 -- */
@media (max-width: 1024px) { .kitmega__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 560px)  { .kitmega__in { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 768px) {
  .kitmega { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* -- Dropdowns del header: no deben salirse de la pantalla -- */
@media (max-width: 768px) {
  .lvscopedrop {
    width: auto; left: 0; right: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .lvofertasdrop {
    min-width: 0;
    width: calc(100vw - 2 * var(--gutter));
    max-width: 320px;
  }
  .lvofertasdrop__item { white-space: normal; }
}

/* ============================================================
   3. HOME
   ============================================================ */

/* -- Hero / carrusel --
   La proporción por dispositivo la define .lvhero (home.jsx): 3:1 escritorio,
   2:1 tablet, 1:1 celular. NO agregar max-height junto a aspect-ratio: el
   navegador encoge el ANCHO y aparece una franja blanca a la derecha. */
@media (max-width: 768px) {
  .kitbanner:not(.kitbanner--page) { width: 100%; max-height: none !important; }
}

/* -- Franja Flash Sale -- */
@media (max-width: 900px) {
  .kitflash {
    flex-wrap: wrap;
    gap: 14px;
    text-align: left;
  }
  .kitflash__timer { order: 3; width: 100%; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .kitflash { padding: 16px; }
  .kitflash__l { width: 100%; }
  .kitflash__ttl { font-size: 17px; }
  .kitflash__sub { font-size: 12px; }
  .kitflash > .lv-btn, .kitflash button { width: 100%; }
}

/* -- Círculos de categoría: carrusel deslizable -- */
@media (max-width: 900px) {
  .kitcats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .kitcats::-webkit-scrollbar { display: none; }
  .kitcats > * { flex: 0 0 auto; scroll-snap-align: start; }
}

/* -- Tiles promocionales -- */
@media (max-width: 1024px) { .kittiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 620px) {
  .kittiles { grid-template-columns: minmax(0, 1fr); }
  .kittile--tall { min-height: 0; }
  .kittile { padding: 18px; }
  .kittile__img { max-height: 160px; margin-inline: auto; }
}

/* -- Barra de confianza -- */
/* 2×2 aguanta bien hasta pantallas muy angostas; apilar los cuatro
   distintivos empuja el catálogo demasiado abajo. */
@media (max-width: 1024px) { .kittrust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px; } }
@media (max-width: 340px)  { .kittrust { grid-template-columns: minmax(0, 1fr); } }

/* -- Grilla de productos --
   Dos columnas se mantienen hasta muy angosto: en ecommerce móvil
   ver dos productos por fila rinde mejor que uno gigante. */
/* minmax(0,1fr) y no 1fr: el mínimo automático de una pista de grid es
   min-content, y el nombre + el precio de la tarjeta lo empujan por
   encima del ancho disponible en pantallas de ~320 px. */
@media (max-width: 1100px) { .kitgrid, .kitgrid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .kitgrid, .kitgrid--3, .kitgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 380px)  { .kitgrid, .kitgrid--3, .kitgrid--4 { gap: 10px; } }

/* El botón "Añadir al carrito" del hover no existe en táctil:
   se muestra siempre bajo la tarjeta. */
@media (hover: none) {
  .kitcard-hover__btn {
    opacity: 1; transform: none; position: static;
    width: 100%; margin-top: 8px;
  }
}

/* -- Divisor expandible de secciones -- */
@media (max-width: 560px) {
  .kitdiv--btn { padding-left: 16px; padding-right: 12px; }
  .kitdiv--btn .lv-divider__title { font-size: 16px !important; }
}

/* ============================================================
   4. TIENDA / LISTADO
   ============================================================ */
@media (max-width: 1024px) { .kitlisting { grid-template-columns: 220px 1fr; gap: 18px; } }

@media (max-width: 860px) {
  .kitlisting { grid-template-columns: minmax(0, 1fr); }

  /* Los filtros pasan a ser un panel colapsable. El botón lo inyecta
     app/mobile-nav.js; aquí solo definimos los dos estados. */
  .kitfilter {
    position: static !important;
    max-height: 0; overflow: hidden;
    padding-block: 0; border-width: 0;
    opacity: 0;
    transition: max-height .32s var(--ease-standard), opacity .2s, padding .2s;
  }
  .kitfilter.is-open {
    max-height: 1400px; overflow: visible;
    padding-block: 18px; border-width: 1px;
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .kitlisting__bar { flex-wrap: wrap; gap: 10px; }
  .kitresults { width: 100%; }
  .kitbanner--page img { max-height: 120px; }
  .kitpager { flex-wrap: wrap; }
}

/* Botón "Filtros" (inyectado) — oculto en desktop */
.lvfilterbtn {
  display: none;
  align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-bottom: 14px;
  padding: 12px 16px; min-height: 46px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--text-heading); cursor: pointer;
}
.lvfilterbtn:hover { border-color: var(--brand); color: var(--brand); }
.lvfilterbtn svg { width: 16px; height: 16px; color: var(--brand); }
.lvfilterbtn__chev { margin-left: auto; transition: transform .28s var(--ease-standard); }
.lvfilterbtn.is-open .lvfilterbtn__chev { transform: rotate(180deg); }
/* Va DESPUÉS de la regla base: misma especificidad, gana la última. */
@media (max-width: 860px) { .lvfilterbtn { display: flex; } }

/* ============================================================
   5. PÁGINA DE PRODUCTO (PDP)
   ============================================================ */
@media (max-width: 1180px) {
  .pdp-card { grid-template-columns: 420px minmax(0, 1fr) 280px; }
}
@media (max-width: 1024px) {
  /* Galería + info arriba, caja de compra a lo ancho debajo */
  .pdp-card { grid-template-columns: 1.15fr 1fr; }
  .pdp-buybox { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 768px) {
  .pdp-card { grid-template-columns: minmax(0, 1fr); }

  /* Miniaturas debajo del hero, en fila deslizable */
  .pdp-gallery { flex-direction: column-reverse; gap: 12px; }
  .pdp-thumbs {
    flex-direction: row;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumb { flex: 0 0 62px; width: 62px; height: 62px; }
  .pdp-hero { min-height: 0; aspect-ratio: 1 / 1; }

  .pdp-info { border-left: none; border-top: 1px solid var(--border); }
  .pdp-name { font-size: 20px; }
  .pdp-help { font-size: 12px; }

  .pdp-split-card { grid-template-columns: minmax(0, 1fr); }
  .pdp-split-left { border-right: none; border-bottom: 1px solid var(--border); }
  .pdp-spectable { display: block; overflow-x: auto; }

  .pdp-reviews-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pdp-reviews-left { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: center; }
  .pdp-bars { grid-column: 1 / -1; }

  .pdp-bundle__items { flex-direction: column; align-items: stretch; }
  .pdp-bundle__plus { text-align: center; }
  .pdp-alsob { grid-template-columns: minmax(0, 1fr); }
  .pdp-qa__hd { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
  .pdp-pay-logos { flex-wrap: wrap; }
  .pdp-crumb, .kitcrumb { font-size: 12px; flex-wrap: wrap; }
}

/* -- Barra de compra fija en móvil --
   La caja de compra queda muy abajo en una PDP larga; se replica
   la acción principal en una barra inferior. La inyecta mobile-nav.js. */
.lvbuybar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-header) + 20);
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(26, 26, 28, .08);
  align-items: center; gap: 12px;
}
.lvbuybar__price { display: flex; flex-direction: column; line-height: 1.15; flex: none; }
.lvbuybar__price s { font-size: 11.5px; color: var(--price-old); }
.lvbuybar__price b { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--price); }
.lvbuybar__cta {
  flex: 1; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-md);
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  cursor: pointer;
}
.lvbuybar__cta:active { background: var(--brand-pressed); }
.lvbuybar__cta svg { width: 17px; height: 17px; }

/* ============================================================
   6. CARRITO
   ============================================================ */
@media (max-width: 900px) {
  .kitcart { grid-template-columns: minmax(0, 1fr); }
  .kitsummary { position: static !important; }
}
@media (max-width: 560px) {
  /* Media e info arriba, precio en su propia fila alineado a la derecha */
  .kitline { grid-template-columns: 74px 1fr; gap: 12px; padding: 14px; }
  .kitline__price { grid-column: 1 / -1; text-align: right; }
  .kitline__ctl { flex-wrap: wrap; gap: 10px; }
  .kitline__name { font-size: 14px; }
  .kitcoupon { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   7. CHECKOUT
   ============================================================ */
@media (max-width: 980px) {
  .kitcheckout { grid-template-columns: minmax(0, 1fr); }
  /* El resumen va primero para que se vea el total sin scrollear */
  .kitcheckout > .kitsummary { order: -1; position: static !important; }
}
@media (max-width: 768px) {
  .kitform, .kitform--1 { grid-template-columns: minmax(0, 1fr); }
  .kitform .span2 { grid-column: auto; }

  /* Pasos: sin las líneas de conexión, en fila compacta */
  .kitsteps { gap: 6px; }
  .kitstep__line { display: none; }
  .kitstep__txt small { display: none; }
  .kitstep__txt b { font-size: 12.5px; }
  .kitstep { flex: 1; min-width: 0; }
  .kitstep__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  .kitopt { flex-wrap: wrap; }
  .kitopt__price { margin-left: auto; }
  .kitqr { flex-direction: column; align-items: flex-start; }
  .kitproof { flex-direction: column; align-items: stretch; gap: 14px; }
  .kitup__zone, .kitup__file { width: 100%; }
  .kittrustrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kitguest { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .kitstep__txt { display: none; }
  .kitsteps { justify-content: flex-start; gap: 10px; }
  .kitcard { padding: 16px; }
}

/* ============================================================
   8. CUENTA · SEGUIMIENTO · LEGALES · CONTACTO
   ============================================================ */
@media (max-width: 900px) {
  .kitacct { grid-template-columns: minmax(0, 1fr); }
  .kitacct__side { position: static !important; }
  .kitacct__nav {
    flex-direction: row;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 6px;
  }
  .kitacct__nav::-webkit-scrollbar { display: none; }
  .kitacct__navitem { flex: 0 0 auto; white-space: nowrap; }

  .kitdoc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kitdoc__toc {
    position: static !important;
    display: flex; gap: 8px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kitdoc__toc::-webkit-scrollbar { display: none; }
  .kitdoc__toc b { display: none; }
  .kitdoc__toc a { flex: 0 0 auto; white-space: nowrap; }

  .kitcontact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .kitstat { grid-template-columns: minmax(0, 1fr); }
  .kitvalues { grid-template-columns: minmax(0, 1fr); }
  .kitmetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px; }
  .kitauth { grid-template-columns: minmax(0, 1fr); min-height: 0; margin: 16px auto; }
  .kitauth__art { display: none; }
  .kittl { grid-template-columns: 36px 1fr; gap: 12px; }
  .kitod__line { grid-template-columns: 52px 1fr; }
  .kitod__line > :last-child { grid-column: 1 / -1; text-align: right; }
  .kitod__req { grid-template-columns: auto 1fr; row-gap: 8px; }
  .kitod__req > :last-child { grid-column: 1 / -1; }
  /* "Sobre nosotros" usa un grid inline de 2 columnas */
  .kitpage [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .kitmetrics { grid-template-columns: minmax(0, 1fr); }
  .kitcardrow { grid-template-columns: minmax(0, 1fr); }
  .lv404__code { font-size: 88px; }
  .lv404__btns { flex-direction: column; }
  .lv404__btns > * { width: 100%; }
}

/* Modales a pantalla completa en móvil */
@media (max-width: 640px) {
  .kitmodal__box {
    width: 100%; max-width: none;
    max-height: 100dvh; height: 100dvh;
    border-radius: 0;
  }
  .kitmodal__hd { padding: 16px; }
}

/* ============================================================
   9. FOOTER
   ============================================================ */
@media (max-width: 1000px) { .kitfooter__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
@media (max-width: 600px) {
  .kitfooter { padding: 32px var(--gutter) 24px; }
  .kitfooter__wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .kitfooter__bottom { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
  .kitfooter__pay { flex-wrap: wrap; }
  .lvnews { flex-direction: column; align-items: stretch; gap: 14px; text-align: left; }
  .lvnews__form { flex-direction: column; }
  .lvnews__form input, .lvnews__form button { width: 100%; }
}

/* ============================================================
   10. BLOG
   ============================================================ */
@media (max-width: 768px) {
  .lvb { padding: 18px var(--gutter) 56px; }
  .lvb__hero { padding: 26px 20px; }
  .lvb__hero h1 { font-size: 25px; }
  .lvb__hero p { font-size: 14px; }
  .lvb__hero__stats { flex-wrap: wrap; gap: 16px; }
  .lvb__bar { gap: 8px; }
  .lvb__search { margin-left: 0; min-width: 0; width: 100%; }
  .lvb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .lvb__arthd h1 { font-size: 26px; }
  .lvb__prose { font-size: 15.5px; }
  .lvb__prose h2 { font-size: 20px; }
  .lvb__prose table { display: block; overflow-x: auto; }
  .lvb__cover { min-height: 0; padding: 18px; }
  .lvb__toc { position: static !important; }
  .lvb__aside { position: static !important; }
  .lvb__prods { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .lvb__grid { grid-template-columns: minmax(0, 1fr); }
  .lvb__prods { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============================================================
   11. FLASH SALE (usa estilos inline → hacen falta overrides)
   ============================================================ */
@media (max-width: 768px) {
  .kitpage > div[style*="linear-gradient(135deg, rgb(15, 15, 15)"] { padding: 30px 0 24px !important; }
}

/* ============================================================
   12. ADMIN
   ============================================================ */
@media (max-width: 1100px) {
  .adm__row--2 { grid-template-columns: minmax(0, 1fr); }
  .adm__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm__od__paygrid { grid-template-columns: minmax(0, 1fr); }
  .adm__od__infogrid { grid-template-columns: minmax(0, 1fr); }
  .adm__setgrid { grid-template-columns: minmax(0, 1fr); }
  .adm__setnav {
    display: flex; flex-direction: row;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 6px;
  }
  .adm__setnav::-webkit-scrollbar { display: none; }
  .adm__setnav button { flex: 0 0 auto; white-space: nowrap; }
  .prd-ed__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Sidebar del admin fuera de lienzo, con botón hamburguesa inyectado */
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm__side {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 264px; z-index: calc(var(--z-overlay) + 1);
    transform: translateX(-100%);
    transition: transform .28s var(--ease-standard);
    height: 100dvh; overflow-y: auto;
  }
  .adm.is-navopen .adm__side { transform: translateX(0); }
  .adm__scrim {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: rgba(26, 26, 28, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .28s;
  }
  .adm.is-navopen .adm__scrim { opacity: 1; pointer-events: auto; }

  .adm__top { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
  .adm__search { order: 5; flex: 1 0 100%; }
  .adm__me > div { display: none; }
  .adm__body { padding: 16px; }
  .adm__ord__filterbar { flex-wrap: wrap; }
  .adm__ord__searchbox { flex: 1 0 100%; }
  .adm__ord__quickrow { flex-wrap: wrap; gap: 8px; }
  .adm__ord__foot { flex-direction: column; gap: 12px; align-items: flex-start; }
  .adm__formgrid { grid-template-columns: minmax(0, 1fr); }
  .adm__formgrid .span2 { grid-column: auto; }
  .admb__editor { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .adm__kpis { grid-template-columns: minmax(0, 1fr); }
  .adm__donut { flex-direction: column; }
  .prd-ed__topbar { flex-wrap: wrap; gap: 10px; }
  .adm__od__hd { gap: 10px; }
  .adm__od__hd > div[style*="margin-left"] { margin-left: 0 !important; width: 100%; }
}

/* Botón hamburguesa del admin (inyectado) */
.adm__navtoggle {
  display: none;
  width: 40px; height: 40px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--text-heading);
  cursor: pointer;
}
.adm__navtoggle svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .adm__navtoggle { display: inline-flex; } }

/* ============================================================
   13. CHROME MÓVIL: menú lateral + barra inferior
   ============================================================ */

/* -- Botón hamburguesa (inyectado en .kithdr__top) -- */
.lvburger {
  display: none;
  width: 40px; height: 40px; flex: none;
  align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--text-heading);
  cursor: pointer;
}
.lvburger:active { background: var(--livoo-surface-2); }
.lvburger svg { width: 22px; height: 22px; }
@media (max-width: 860px) { .lvburger { display: inline-flex; order: 0; } }

/* -- Menú desplegable anclado al botón de 3 rayas -- */
.lvdrawer {
  position: fixed; top: 0; left: 0;
  width: min(88vw, 300px);
  z-index: calc(var(--z-modal) + 1);
  background: var(--color-surface);
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  transform-origin: top left;
  transform: translateY(-6px) scale(.97);
  opacity: 0; pointer-events: none;
  transition: transform .18s var(--ease-standard), opacity .18s var(--ease-standard);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-lg);
  padding-bottom: 8px;
}
.lvdrawer.is-up { transform-origin: bottom left; transform: translateY(6px) scale(.97); }
.lvdrawer.is-open { transform: none; opacity: 1; pointer-events: auto; }
.lvdrawer__hd { display: none; }
.lvdrawer__sec {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 16px 4px;
}
.lvdrawer__sec + .lvdrawer__sec, .lvdrawer__item + .lvdrawer__sec { border-top: 1px solid var(--border); margin-top: 6px; }
.lvdrawer__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 46px;
  padding: 11px 16px;
  border: none; background: none; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 14.5px;
  color: var(--text-primary); cursor: pointer;
}
.lvdrawer__item:active { background: var(--brand-tint); }
.lvdrawer__item svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.lvdrawer__item .lvdrawer__count {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  background: var(--brand); color: #fff;
  border-radius: var(--radius-pill); padding: 2px 8px;
}
.lvdrawer__foot { display: none; }

.lvscrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(26, 26, 28, .28);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.lvscrim.is-open { opacity: 1; pointer-events: auto; }

/* Bloquea el scroll del fondo con el cajón abierto */
body.lv-noscroll { overflow: hidden; }

/* -- Barra de pestañas inferior -- */
.lvtabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.lvtabbar__in { display: flex; }
.lvtabbar__item {
  flex: 1; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 10.5px;
  color: var(--text-muted);
  position: relative;
}
.lvtabbar__item svg { width: 20px; height: 20px; }
.lvtabbar__item.is-on { color: var(--brand); }
.lvtabbar__badge {
  position: absolute; top: 5px; left: calc(50% + 5px);
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--livoo-danger); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
}

@media (max-width: 768px) {
  .lvtabbar { display: block; }
  /* Espacio para que la barra no tape el final de la página */
  .kit { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  /* El FAB de WhatsApp sube por encima de la barra */
  .lvwa { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
}

/* Con la barra de compra visible hace falta más colchón */
@media (max-width: 768px) {
  body.lv-hasbuybar .lvtabbar { display: none; }
  body.lv-hasbuybar .lvbuybar { display: flex; }
  body.lv-hasbuybar .lvwa { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

/* ============================================================
   14. Accesibilidad táctil y de entrada
   ============================================================ */
@media (pointer: coarse) {
  /* Área mínima cómoda para el pulgar */
  .kitnav__item, .kitnav__pill, .kitacct__navitem,
  .kitchip, .kitpager__btn, .lvb__chip, .kitdiv__pill { min-height: 42px; }
  .kithdr__link { min-width: 44px; min-height: 44px; }
  .kitline__remove { min-height: 40px; }
}

/* iOS hace zoom al enfocar inputs de menos de 16px */
@media (max-width: 768px) {
  .kit input, .kit select, .kit textarea,
  .adm input, .adm select, .adm textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lvdrawer, .lvscrim, .kitfilter, .adm__side { transition: none; }
}