/* ============================================================
   PATYTA — GLOBAL CANVAS OWNER R7
   ÚNICO canvas general de la app: #f1f6f4
   ============================================================ */

:root{
  --patyta-global-canvas:#f1f6f4;
}

/* Canvas raíz */
html,
body,
html body,
html body > .app,
html body .app,
html body .app > main,
html body .app > main.page,
html body .page,
html body [data-page],
html body [data-page].is-active{
  background:#f1f6f4 !important;
  background-color:#f1f6f4 !important;
  background-image:none !important;
}

html,
body{
  min-width:100%;
  min-height:100%;
}

html body,
html body > .app,
html body .app{
  min-height:100vh;
}

/* Todas las páginas principales */
html body [data-page="inicio"],
html body [data-page="tienda"],
html body [data-page="mascotas"],
html body [data-page="cuenta"],
html body [data-page="pedidos"],
html body [data-page="directorio"]{
  background:#f1f6f4 !important;
  background-color:#f1f6f4 !important;
  background-image:none !important;
}

/* ------------------------------------------------------------
   HOME
   ------------------------------------------------------------ */
html body [data-page="inicio"] [data-home-pets-root],
html body [data-page="inicio"] .pet-r33-home{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* ------------------------------------------------------------
   MASCOTAS
   ------------------------------------------------------------ */
html body [data-page="mascotas"],
html body [data-page="mascotas"].is-active,
html body [data-page="mascotas"].pet-r744a-pets-page,
html body [data-page="mascotas"] [data-pets-root],
html body [data-page="mascotas"].is-active [data-pets-root]{
  background:#f1f6f4 !important;
  background-color:#f1f6f4 !important;
  background-image:none !important;
}

html body [data-page="mascotas"] .pets-page-head,
html body [data-page="mascotas"] .pets-grid{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Las tarjetas reales siguen blancas */
html body [data-page="mascotas"] .pet-profile-card,
html body [data-page="mascotas"] .pet-r33-pet{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
}

/* ------------------------------------------------------------
   TIENDA
   ------------------------------------------------------------ */
html body [data-page="tienda"],
html body [data-page="tienda"].is-active,
html body [data-page="tienda"].pet-r711-active,
html body:has([data-page="tienda"].is-active),
html body:has([data-page="tienda"].is-active) > .app,
html body:has([data-page="tienda"].is-active) .app,
html body:has([data-page="tienda"].is-active) .app > main,
html body [data-page="tienda"].pet-r711-active > [data-r711-shop],
html body [data-page="tienda"] > [data-r711-shop],
html body [data-page="tienda"] [data-r711-shop],
html body [data-page="tienda"] [data-r711-shop].pet-r711{
  background:#f1f6f4 !important;
  background-color:#f1f6f4 !important;
  background-image:none !important;
}

/* Todos los wrappers estructurales de Tienda son canvas */
html body [data-page="tienda"] [data-r711-shop] .pet-r711-header,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-categories,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-main,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-filter,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-filter > header,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-catalog,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-catalog__header,
html body [data-page="tienda"] [data-r711-shop] .pet-r74127-catalog-tools,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-grid,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-catalog__grid,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-products,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-content,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-recs{
  background:#f1f6f4 !important;
  background-color:#f1f6f4 !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Grupos internos del filtro dejan ver el canvas */
html body [data-page="tienda"] [data-r711-shop] .pet-r711-filter fieldset,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-filter .pet-r711-filter__select,
html body [data-page="tienda"] [data-r711-shop] .patyta-u3-group{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Superficies funcionales blancas */
html body [data-page="tienda"] [data-r711-shop] .pet-r711-search,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-catalog__header select,
html body [data-page="tienda"] [data-r711-shop] .pet-r74127-catalog-tools select{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
}

html body [data-page="tienda"] [data-r711-shop] .pet-r711-product,
html body:has([data-page="tienda"].is-active) [data-r711-shop] .pet-r711-product{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  border:0 !important;
  border-color:transparent !important;
  outline:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 3px 14px rgba(5,47,94,.025) !important;
}

html body [data-page="tienda"] [data-r711-shop] .pet-r711-product__image,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-product > p,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-product > section,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-product > footer,
html body [data-page="tienda"] [data-r711-shop] .pet-r711-product__name{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
}

/* ------------------------------------------------------------
   TOP NAV DESKTOP
   Base existente intacta.
   Hover / activo: #C4F5B4
   ------------------------------------------------------------ */
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"],
html body .topbar .pet-r726-category-strip > button:hover,
html body .topbar .pet-r726-category-strip > button.is-active,
html body .topbar .pet-r726-category-strip > button[aria-current="page"],
html body .topbar .top-actions button:hover,
html body .topbar .icon-btn:hover{
  color:#C4F5B4 !important;
}

html body .topbar .pet-r72-desktop-nav > [data-nav]:hover > span,
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover > svg,
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover > .pet-nav-paw,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active > span,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active > svg,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active > .pet-nav-paw,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] > span,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] > svg,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] > .pet-nav-paw,
html body .topbar .top-actions button:hover svg,
html body .topbar .icon-btn:hover svg{
  color:#C4F5B4 !important;
}

html body .topbar .pet-r72-desktop-nav > [data-nav].is-active::after,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"]::after,
html body .topbar .pet-r726-category-strip > button.is-active::after,
html body .topbar .pet-r726-category-strip > button[aria-current="page"]::after{
  background:#C4F5B4 !important;
  background-color:#C4F5B4 !important;
}

/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */
@media (max-width:820px){

  html,
  body,
  html body,
  html body > .app,
  html body .app,
  html body .app > main,
  html body .page,
  html body [data-page],
  html body [data-page].is-active{
    background:#f1f6f4 !important;
    background-color:#f1f6f4 !important;
    background-image:none !important;
  }

  /* Todo / Alimento */
  html body .topbar .pet-r726-category-strip > button,
  html body .topbar [data-r726-category-strip] > button,
  html body .topbar .pet-r726-category-strip > button:hover,
  html body .topbar .pet-r726-category-strip > button.is-active,
  html body .topbar .pet-r726-category-strip > button[aria-current="page"],
  html body .topbar [data-r726-category-strip] > button:hover,
  html body .topbar [data-r726-category-strip] > button.is-active,
  html body .topbar [data-r726-category-strip] > button[aria-current="page"]{
    color:#C4F5B4 !important;
  }

  html body .topbar .pet-r726-category-strip > button.is-active::after,
  html body .topbar .pet-r726-category-strip > button[aria-current="page"]::after,
  html body .topbar [data-r726-category-strip] > button.is-active::after,
  html body .topbar [data-r726-category-strip] > button[aria-current="page"]::after{
    background:#C4F5B4 !important;
    background-color:#C4F5B4 !important;
  }

  /* Bottom nav inactivo */
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]){
    color:#052F5E !important;
  }

  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > svg,
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > .pet-nav-paw,
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > span{
    color:#052F5E !important;
  }

  /* Bottom nav activo */
  html body .bottom-nav > [data-nav].is-active,
  html body .bottom-nav > [data-nav][aria-current="page"]{
    color:#ACDCF2 !important;
  }

  html body .bottom-nav > [data-nav].is-active > svg,
  html body .bottom-nav > [data-nav].is-active > .pet-nav-paw,
  html body .bottom-nav > [data-nav].is-active > span,
  html body .bottom-nav > [data-nav][aria-current="page"] > svg,
  html body .bottom-nav > [data-nav][aria-current="page"] > .pet-nav-paw,
  html body .bottom-nav > [data-nav][aria-current="page"] > span{
    color:#ACDCF2 !important;
  }

  html body .bottom-nav > [data-nav] > svg{
    color:currentColor !important;
  }

  html body .bottom-nav > [data-nav="mascotas"] > .pet-nav-paw,
  html body .bottom-nav > [data-nav="mascotas"] > .pet-nav-paw *{
    fill:currentColor !important;
    color:currentColor !important;
  }

  html body .bottom-nav > [data-nav="directorio"] > svg{
    stroke:currentColor !important;
    color:currentColor !important;
  }
}

/* ============================================================
   PATYTA — MOBILE PERFORMANCE OWNER R1
   Bottom nav instantáneo, sin Liquid Glass costoso.
   ============================================================ */

@media (max-width:820px){

  /* El cambio de pestaña debe ser inmediato. */
  html body .page,
  html body [data-page]{
    animation:none !important;
    transition:none !important;
  }

  /* Un solo contenedor visual simple. */
  html body .bottom-nav{
    isolation:auto !important;
    overflow:hidden !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;

    border:1px solid rgba(5,47,94,.07) !important;
    box-shadow:0 8px 24px rgba(5,47,94,.08) !important;
  }

  /* Quitar reflejos/pseudocapas del Liquid Glass. */
  html body .bottom-nav::before,
  html body .bottom-nav::after{
    content:none !important;
    display:none !important;
  }

  /* Si quedó un slider antiguo en DOM, no participa. */
  html body .bottom-nav .patyta-liquid-active-slider{
    display:none !important;
  }

  /* Navegación sin animaciones de 520 ms ni deformaciones. */
  html body .bottom-nav > [data-nav],
  html body .bottom-nav > [data-nav]:hover,
  html body .bottom-nav > [data-nav]:active{
    transition:none !important;
    animation:none !important;
    transform:none !important;

    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;

    box-shadow:none !important;
  }

  /* Inactivo */
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]){
    color:#052F5E !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
  }

  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > svg,
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > .pet-nav-paw,
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > span{
    color:#052F5E !important;
  }

  /* Activo: misma lógica visual que ya aprobaste, pero estática. */
  html body .bottom-nav > [data-nav].is-active,
  html body .bottom-nav > [data-nav][aria-current="page"]{
    color:#ACDCF2 !important;

    background:#008B4F !important;
    background-color:#008B4F !important;
    background-image:none !important;

    border:0 !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }

  html body .bottom-nav > [data-nav].is-active > svg,
  html body .bottom-nav > [data-nav].is-active > .pet-nav-paw,
  html body .bottom-nav > [data-nav].is-active > span,
  html body .bottom-nav > [data-nav][aria-current="page"] > svg,
  html body .bottom-nav > [data-nav][aria-current="page"] > .pet-nav-paw,
  html body .bottom-nav > [data-nav][aria-current="page"] > span{
    color:#ACDCF2 !important;
  }

  /* Iconos especiales */
  html body .bottom-nav > [data-nav] > svg{
    color:currentColor !important;
  }

  html body .bottom-nav > [data-nav="mascotas"] > .pet-nav-paw,
  html body .bottom-nav > [data-nav="mascotas"] > .pet-nav-paw *{
    fill:currentColor !important;
    color:currentColor !important;
  }

  html body .bottom-nav > [data-nav="directorio"] > svg{
    stroke:currentColor !important;
    color:currentColor !important;
  }
}

/* ============================================================
   PATYTA — NAV COLOR OWNER R7.1
   Activo móvil + activo/hover desktop: #C4F5B4
   ============================================================ */

/* DESKTOP — navegación sobre header verde */
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"],
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover > span,
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover > svg,
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover > .pet-nav-paw,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active > span,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active > svg,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active > .pet-nav-paw,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] > span,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] > svg,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] > .pet-nav-paw{
  color:#C4F5B4 !important;
}

html body .topbar .pet-r72-desktop-nav > [data-nav].is-active::after,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"]::after{
  background:#C4F5B4 !important;
  background-color:#C4F5B4 !important;
}

/* MÓVIL — bottom nav */
@media (max-width:820px){

  /* Inactivo permanece azul marino */
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]){
    color:#052F5E !important;
  }

  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > svg,
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > .pet-nav-paw,
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"]) > span{
    color:#052F5E !important;
  }

  /* Activo: fondo verde actual + texto/SVG #C4F5B4 */
  html body .bottom-nav > [data-nav].is-active,
  html body .bottom-nav > [data-nav][aria-current="page"]{
    color:#C4F5B4 !important;
  }

  html body .bottom-nav > [data-nav].is-active > svg,
  html body .bottom-nav > [data-nav].is-active > .pet-nav-paw,
  html body .bottom-nav > [data-nav].is-active > span,
  html body .bottom-nav > [data-nav][aria-current="page"] > svg,
  html body .bottom-nav > [data-nav][aria-current="page"] > .pet-nav-paw,
  html body .bottom-nav > [data-nav][aria-current="page"] > span{
    color:#C4F5B4 !important;
  }

  html body .bottom-nav > [data-nav] > svg{
    color:currentColor !important;
  }

  html body .bottom-nav > [data-nav="mascotas"] > .pet-nav-paw,
  html body .bottom-nav > [data-nav="mascotas"] > .pet-nav-paw *{
    fill:currentColor !important;
    color:currentColor !important;
  }

  html body .bottom-nav > [data-nav="directorio"] > svg{
    stroke:currentColor !important;
    color:currentColor !important;
  }
}
/* PATYTA — COLOR TOKEN OWNER R7.4.1 START */

/* Desktop: navegación activa / hover */
@media (min-width: 769px) {
  html body .topbar .pet-r72-desktop-nav > [data-nav].active,
  html body .topbar .pet-r72-desktop-nav > [data-nav].is-active,
  html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"],
  html body .topbar .pet-r72-desktop-nav > [data-nav]:hover {
    color: #C4F5B4 !important;
  }

  html body .topbar .pet-r72-desktop-nav > [data-nav].active::after,
  html body .topbar .pet-r72-desktop-nav > [data-nav].is-active::after,
  html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"]::after {
    background: #C4F5B4 !important;
    background-color: #C4F5B4 !important;
  }
}

/* Todo / Alimento: todos los estados + indicador activo */
html body .topbar .pet-r726-category-strip > button,
html body .topbar [data-r726-category-strip] > button,
html body .topbar .pet-r726-category-strip > button:hover,
html body .topbar [data-r726-category-strip] > button:hover,
html body .topbar .pet-r726-category-strip > button.is-active,
html body .topbar [data-r726-category-strip] > button.is-active,
html body .topbar .pet-r726-category-strip > button[aria-current="page"],
html body .topbar [data-r726-category-strip] > button[aria-current="page"] {
  color: #C4F5B4 !important;
}

html body .topbar .pet-r726-category-strip > button.is-active::after,
html body .topbar [data-r726-category-strip] > button.is-active::after,
html body .topbar .pet-r726-category-strip > button[aria-current="page"]::after,
html body .topbar [data-r726-category-strip] > button[aria-current="page"]::after {
  background: #C4F5B4 !important;
  background-color: #C4F5B4 !important;
}

/* Móvil: texto/icono activo */
@media (max-width: 768px) {
  html body .bottom-nav > [data-nav].active,
  html body .bottom-nav > [data-nav].is-active,
  html body .bottom-nav > [data-nav][aria-current="page"] {
    color: #C4F5B4 !important;
  }
}

/* SVG navegación: sólo trazo, nunca silueta rellena */
html body .topbar .pet-r72-desktop-nav > [data-nav] svg,
html body .topbar .pet-r72-desktop-nav > [data-nav] svg *,
html body .bottom-nav > [data-nav] svg,
html body .bottom-nav > [data-nav] svg * {
  fill: none !important;
  stroke: currentColor !important;
}

html body .topbar .pet-r72-desktop-nav > [data-nav].active svg,
html body .topbar .pet-r72-desktop-nav > [data-nav].active svg *,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active svg,
html body .topbar .pet-r72-desktop-nav > [data-nav].is-active svg *,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] svg,
html body .topbar .pet-r72-desktop-nav > [data-nav][aria-current="page"] svg *,
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover svg,
html body .topbar .pet-r72-desktop-nav > [data-nav]:hover svg * {
  color: #C4F5B4 !important;
  fill: none !important;
  stroke: currentColor !important;
}

html body .bottom-nav > [data-nav].active svg,
html body .bottom-nav > [data-nav].active svg *,
html body .bottom-nav > [data-nav].is-active svg,
html body .bottom-nav > [data-nav].is-active svg *,
html body .bottom-nav > [data-nav][aria-current="page"] svg,
html body .bottom-nav > [data-nav][aria-current="page"] svg * {
  color: #C4F5B4 !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* PATYTA — COLOR TOKEN OWNER R7.4.1 END */