/* GLOBAL LAYOUT OPTIMIZATION - OPTIMIZACIÓN GLOBAL DE LAYOUT PARA TODAS LAS PÁGINAS */

/* ========================================
   PREVENCIÓN GLOBAL DE LAYOUT SHIFT
   ======================================== */

/* Aplicar contain a todos los elementos Angular */
[class*="ngcontent-"] {
  contain: layout style;
}

/* Prevenir layout shift en todas las secciones */
section {
  min-height: 200px;
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los contenedores */
.container,
.container-fluid {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todas las filas */
.row {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todas las columnas */
.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xxl, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los componentes Angular */
app-* {
  display: block;
  min-height: 100px;
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todas las cards */
.card {
  min-height: 200px;
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todas las imágenes */
img {
  max-width: 100%;
  height: auto;
  display: block;
  contain: layout style;
}

/* Prevenir layout shift en todos los botones */
.btn {
  min-height: 38px;
  contain: layout style;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevenir layout shift en todos los formularios */
.form-control,
.form-select {
  min-height: 38px;
  contain: layout style;
}

/* Prevenir layout shift en todos los textos */
h1, h2, h3, h4, h5, h6 {
  min-height: 1.2em;
  contain: layout style;
  display: block;
}

p {
  min-height: 1.5em;
  contain: layout style;
  display: block;
}

/* Prevenir layout shift en todos los iconos */
.bi {
  min-width: 1em;
  contain: layout style;
  display: inline-block;
}

/* Prevenir layout shift en todos los badges */
.badge {
  min-width: 2em;
  contain: layout style;
  display: inline-block;
}

/* Prevenir layout shift en todos los elementos de navegación */
.navbar,
.navbar-nav,
.nav-item,
.nav-link {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de footer */
footer,
.footer {
  min-height: 200px;
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de header */
header,
.header {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de main */
main {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de aside */
aside {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de article */
article {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de div */
div {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de span */
span {
  contain: layout style;
  display: inline-block;
}

/* Prevenir layout shift en todos los elementos de a */
a {
  contain: layout style;
  display: inline-block;
}

/* Prevenir layout shift en todos los elementos de ul/ol */
ul, ol {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de li */
li {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de table */
table {
  contain: layout style;
  position: relative;
}

/* Prevenir layout shift en todos los elementos de tr/td/th */
tr, td, th {
  contain: layout style;
  position: relative;
}

/* ========================================
   OPTIMIZACIONES ESPECÍFICAS POR PÁGINA
   ======================================== */

/* Página Home */
.home-section {
  min-height: 400px;
  contain: layout style;
  position: relative;
}

/* Página Productos */
.products-section {
  min-height: 600px;
  contain: layout style;
  position: relative;
}

/* Página Contacto */
.contact-section {
  min-height: 400px;
  contain: layout style;
  position: relative;
}

/* Página Servicios */
.services-section {
  min-height: 500px;
  contain: layout style;
  position: relative;
}

/* Página Fechas Especiales */
.special-dates-section {
  min-height: 600px;
  contain: layout style;
  position: relative;
}

/* Página Políticas */
.policies-section {
  min-height: 400px;
  contain: layout style;
  position: relative;
}

/* Página Preguntas */
.faq-section {
  min-height: 500px;
  contain: layout style;
  position: relative;
}

/* ========================================
   OPTIMIZACIONES PARA COMPONENTES ESPECÍFICOS
   ======================================== */

/* Componentes de precios */
app-precios-volumen,
app-precios-volumen-compact,
app-preciodetalles,
app-verprecios,
app-verpreciossin {
  min-height: 200px;
  contain: layout style;
  position: relative;
}

/* Componentes de productos */
app-productogeneral,
app-productocard,
app-productolist {
  min-height: 300px;
  contain: layout style;
  position: relative;
}

/* Componentes de información */
app-beneficios,
app-testimonios,
app-mediospago,
app-quenecesitamos {
  min-height: 200px;
  contain: layout style;
  position: relative;
}

/* Componentes de navegación */
app-header,
app-footer,
app-btnbreadcrumb,
app-btncontacto {
  contain: layout style;
  position: relative;
  z-index: 300;
}

/* Componentes de mostrador */
app-mostrador,
app-mostradorsimple {
  min-height: 400px;
  contain: layout style;
  position: relative;
}

/* Componentes de SEO */
app-seo-analysis,
app-seo-validation,
app-seo-image,
app-ai-seo {
  contain: layout style;
  position: relative;
}

/* Componentes de optimización */
app-optimized-image,
app-skeleton,
app-voice-search {
  contain: layout style;
  position: relative;
}

/* ========================================
   OPTIMIZACIONES PARA ELEMENTOS ESPECÍFICOS
   ======================================== */

/* Hero sections */
.hero-section,
.hero-modern {
  min-height: 60vh;
  contain: layout style;
  position: relative;
}

/* Product sections */
.product-section,
.section-modern {
  min-height: 400px;
  contain: layout style;
  position: relative;
}

/* Price sections */
.price-section {
  min-height: 200px;
  contain: layout style;
  position: relative;
}

/* Testimonial sections */
.testimonials-section {
  min-height: 300px;
  contain: layout style;
  position: relative;
}

/* Benefits sections */
.benefits-section {
  min-height: 400px;
  contain: layout style;
  position: relative;
}

/* Payment sections */
.payment-section {
  min-height: 200px;
  contain: layout style;
  position: relative;
}

/* Related products sections */
.related-products-section {
  min-height: 500px;
  contain: layout style;
  position: relative;
}

/* ========================================
   OPTIMIZACIONES RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
  /* Mobile optimizations */
  .container {
    min-height: 100px;
  }
  
  app-* {
    min-height: 80px;
  }
  
  .card {
    min-height: 150px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Tablet optimizations */
  .container {
    min-height: 150px;
  }
  
  app-* {
    min-height: 120px;
  }
  
  .card {
    min-height: 180px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Small desktop optimizations */
  .container {
    min-height: 200px;
  }
  
  app-* {
    min-height: 150px;
  }
  
  .card {
    min-height: 220px;
  }
}

@media (min-width: 993px) {
  /* Large desktop optimizations */
  .container {
    min-height: 250px;
  }
  
  app-* {
    min-height: 180px;
  }
  
  .card {
    min-height: 250px;
  }
}

/* ========================================
   OPTIMIZACIONES DE PERFORMANCE
   ======================================== */

/* Optimizar elementos con animaciones */
* {
  will-change: auto;
}

/* Optimizar elementos que pueden cambiar */
.card:hover,
.btn:hover,
.nav-link:hover {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimizar elementos con transiciones */
.transition,
.animate {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Optimizar elementos con scroll */
.scroll-container {
  will-change: scroll-position;
}

/* Optimizar elementos con resize */
.resizable {
  will-change: auto;
}

/* ========================================
   OPTIMIZACIONES DE ACCESIBILIDAD
   ======================================== */

/* Asegurar que los elementos sean accesibles */
[role="button"],
[role="link"],
[role="menuitem"] {
  min-height: 44px;
  contain: layout style;
}

/* Asegurar que los elementos de formulario sean accesibles */
input,
select,
textarea {
  min-height: 38px;
  contain: layout style;
}

/* Asegurar que los elementos de navegación sean accesibles */
nav,
.navbar-nav {
  contain: layout style;
  position: relative;
}

/* ========================================
   OPTIMIZACIONES DE SEO
   ======================================== */

/* Asegurar que los elementos de contenido sean indexables */
main,
article,
section {
  contain: layout style;
  position: relative;
}

/* Asegurar que los elementos de navegación sean accesibles */
nav,
.navbar {
  contain: layout style;
  position: relative;
}

/* Asegurar que los elementos de footer sean accesibles */
footer {
  contain: layout style;
  position: relative;
} 