/**
 * @file
 * Protección del layout global contra estilos de contenido Mermaid.
 * Estos estilos tienen alta especificidad para sobrescribir cualquier estilo problemático.
 */

/* ============================================
   PROTECCIÓN CRÍTICA DEL LAYOUT GLOBAL
   ============================================ */

/* Proteger body y html de cualquier estilo que pueda venir del contenido */
body,
html {
  /* Mantener el layout original */
  display: block !important;
  position: relative !important;
  
  /* Dimensiones y espaciado */
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* Tipografía y colores base */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: inherit !important;
  background-color: inherit !important;
  background-image: none !important;
  
  /* Flexbox reset - prevenir que body/html se conviertan en flex containers */
  display: block !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
  flex-wrap: initial !important;
  
  /* Overflow */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  
  /* Box model */
  box-sizing: border-box !important;
  
  /* Transformaciones y posicionamiento */
  transform: none !important;
  z-index: auto !important;
}

/* Proteger el contenedor principal de la página */
body > .page-wrapper,
body > .layout-container,
body > main,
body > .main-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  min-height: auto !important;
  flex: none !important;
}

/* Proteger el footer específicamente */
body > footer,
body > .footer,
.page-footer,
.site-footer,
footer.footer {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: inherit !important;
  min-height: auto !important;
  height: auto !important;
  flex: none !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
  z-index: auto !important;
  background-color: inherit !important;
  background-image: none !important;
}

/* Proteger el header */
body > header,
body > .header,
.page-header,
.site-header {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: inherit !important;
  min-height: auto !important;
  height: auto !important;
  flex: none !important;
  z-index: auto !important;
}

/* Proteger contenedores de contenido */
.node__content,
.field--name-body,
.field--name-field-descripcion,
.content-area,
.main-content-area {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: inherit !important;
  min-height: auto !important;
  flex: none !important;
}

/* ============================================
   AISLAMIENTO DEL CONTENIDO MERMAID
   ============================================ */

/* El contenedor aislado ya está protegido por el CSS del módulo,
   pero agregamos protección adicional aquí para mayor seguridad */
.mermaid-isolated-container {
  /* Asegurar que está completamente aislado */
  isolation: isolate !important;
  contain: layout style paint !important;
  
  /* Resetear cualquier estilo problemático */
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1rem 0 !important;
  padding: 0 !important;
  
  /* Prevenir efectos en el layout padre */
  flex: none !important;
  align-self: auto !important;
  justify-self: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  
  /* Resetear transformaciones */
  transform: none !important;
  z-index: 1 !important;
}

/* Ocultar elementos problemáticos dentro del contenedor */
.mermaid-isolated-container > html,
.mermaid-isolated-container > head,
.mermaid-isolated-container > body,
.mermaid-isolated-container script,
.mermaid-isolated-container style,
.mermaid-isolated-container meta,
.mermaid-isolated-container title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   PROTECCIÓN ESPECÍFICA PARA ELEMENTOS COMUNES
   ============================================ */

/* Resetear cualquier div con estilos de body/html */
.mermaid-isolated-container > div[style*="display: flex"][style*="justify-content"],
.mermaid-isolated-container > div[style*="min-height: 100vh"],
.mermaid-isolated-container > div[style*="min-height:100vh"] {
  display: block !important;
  min-height: auto !important;
  justify-content: initial !important;
  align-items: initial !important;
  flex-direction: initial !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Asegurar que los contenedores internos no afecten el layout */
.mermaid-isolated-container > div {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  flex: none !important;
}

/* Proteger el diagrama Mermaid dentro del contenedor */
.mermaid-isolated-container .mermaid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1rem auto !important;
  padding: 1rem !important;
  background-color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
  position: relative !important;
  flex: none !important;
}