/* Login-specific styles to hide header ONLY on the login page */

/* Scope all header hiding to the login page only */
.signin-page header[class*="BackstageHeader-header"],
.signin-page header[data-component-name="Header"],
.signin-page div[role="banner"],
.signin-page .MuiAppBar-root header,
.signin-page div[class*="Header-"],
body[class*="backstage-signin-page"] header,
[class*="SignInPage-"] header,
[class*="PichinchaSignIn-container"] header {
  display: none !important;
}

/* Scope hiding of header elements to login page only */
.signin-page [class*="BackstageHeader-leftItemsBox"],
.signin-page [class*="leftItems"],
.signin-page [class*="BackstageHeader-rightItemsBox"],
.signin-page [class*="rightItems"],
.signin-page [class*="HeaderTabs-"],
.signin-page [class*="HeaderLabel-"],
body[class*="backstage-signin-page"] [class*="HeaderLabel"],
[class*="SignInPage-"] [class*="HeaderLabel"],
[class*="PichinchaSignIn-container"] [class*="HeaderLabel"] {
  display: none !important;
}

/* Scope hiding of titles to login page only */
.signin-page header h1[class*="BackstageHeader-title"],
.signin-page header h1[class*="MuiTypography-"],
.signin-page h1[data-component-name="Typography"],
.signin-page [class*="headerTitle"],
.signin-page [class*="pageTitle"],
body[class*="backstage-signin-page"] h1,
[class*="SignInPage-"] h1,
[class*="PichinchaSignIn-container"] h1 {
  display: none !important;
}

/**
 * Custom Pichincha styles to integrate with Backstage
 * This file uses the Pichincha Design System classes (bp-*) for consistent styling
 */

/* ========================================
   FIX: Header - Remover gradiente azul
   ======================================== */

/* Forzar fondo blanco en todos los headers */
header[class*="BackstageHeader"],
header[class*="Header-header"],
[class*="BackstageHeader-header"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Remover gradiente de cualquier elemento dentro del header */
header[class*="BackstageHeader"] *,
header[class*="Header-header"] *,
[class*="BackstageHeader-header"] * {
  background-image: none !important;
}

/* Apply Pichincha styling to common Backstage elements */

/* Sidebar styling */
.backstage-sidebar {
  /* Use Pichincha background utilities */
  background-color: var(--bp-color-white) !important;
}

/* Card styling */
.backstage-card {
  /* Use Pichincha utility classes directly in your components */
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Button styling overrides to match Pichincha */
button.backstage-button-primary {
  background-color: var(--bp-color-yellow) !important;
  color: var(--bp-color-navy-blue) !important;
  font-family: var(--bp-font-family) !important;
}

/* Table styling */
.backstage-table th {
  background-color: var(--bp-color-yellow-light) !important;
  color: var(--bp-color-navy-blue) !important;
  font-weight: 600 !important;
}

/* Use Pichincha typography */
body {
  font-family: var(--bp-font-family) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bp-font-family) !important;
  color: var(--bp-color-navy-blue) !important;
}

/* Links */
/* a:not(.MuiButtonBase-root) {
  color: var(--bp-color-navy-blue) !important;
}

a:hover:not(.MuiButtonBase-root) {
  color: var(--bp-color-navy-blue-light) !important;
  text-decoration: underline;
} */

/* Form inputs */
.MuiInputBase-root {
  font-family: var(--bp-font-family) !important;
}

/* Custom Pichincha progress indicator */
.backstage-progress-indicator {
  color: var(--bp-color-yellow) !important;
}

.MuiDialog-paperFullWidth {
  width: auto !important;
}

/* ========================================
   Custom Alert Styles (Inline Alerts)
   ======================================== */

/* Selector universal para alertas de Material-UI */
[class*="MuiAlert-root"] {
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
}

/* Warning Alert */
[class*="MuiAlert-standardWarning"],
[class*="MuiAlert-filledWarning"],
div[role="alert"][class*="Warning"] {
  background-color: #FFFBEB !important;
  /* border: 1px solid #F59E0B !important; */
  border-radius: 8px !important;
}

[class*="MuiAlert-standardWarning"] [class*="MuiAlert-icon"],
[class*="MuiAlert-filledWarning"] [class*="MuiAlert-icon"] {
  color: #F59E0B !important;
}

[class*="MuiAlert-standardWarning"] [class*="MuiAlert-message"],
[class*="MuiAlert-filledWarning"] [class*="MuiAlert-message"] {
  color: #92400E !important;
  font-size: 0.875rem !important;
}

/* Error Alert */
[class*="MuiAlert-standardError"],
[class*="MuiAlert-filledError"] {
  background-color: #FEF2F2 !important;
  border: 1px solid #DC2626 !important;
  border-radius: 8px !important;
}

[class*="MuiAlert-standardError"] [class*="MuiAlert-icon"],
[class*="MuiAlert-filledError"] [class*="MuiAlert-icon"] {
  color: #DC2626 !important;
}

[class*="MuiAlert-standardError"] [class*="MuiAlert-message"],
[class*="MuiAlert-filledError"] [class*="MuiAlert-message"] {
  color: #991B1B !important;
  font-size: 0.875rem !important;
}

/* Info Alert */
[class*="MuiAlert-standardInfo"],
[class*="MuiAlert-filledInfo"] {
  background-color: #EFF6FF !important;
  border: 1px solid #3B82F6 !important;
  border-radius: 8px !important;
}

[class*="MuiAlert-standardInfo"] [class*="MuiAlert-icon"],
[class*="MuiAlert-filledInfo"] [class*="MuiAlert-icon"] {
  color: #3B82F6 !important;
}

[class*="MuiAlert-standardInfo"] [class*="MuiAlert-message"],
[class*="MuiAlert-filledInfo"] [class*="MuiAlert-message"] {
  color: #1E40AF !important;
  font-size: 0.875rem !important;
}

/* Success Alert */
[class*="MuiAlert-standardSuccess"],
[class*="MuiAlert-filledSuccess"] {
  background-color: #F0FDF4 !important;
  border: 1px solid #22C55E !important;
  border-radius: 8px !important;
}

[class*="MuiAlert-standardSuccess"] [class*="MuiAlert-icon"],
[class*="MuiAlert-filledSuccess"] [class*="MuiAlert-icon"] {
  color: #22C55E !important;
}

[class*="MuiAlert-standardSuccess"] [class*="MuiAlert-message"],
[class*="MuiAlert-filledSuccess"] [class*="MuiAlert-message"] {
  color: #166534 !important;
  font-size: 0.875rem !important;
}

/* Backstage specific alerts - Entity warnings */
[class*="BackstageWarningPanel"],
[class*="WarningPanel"],
[class*="EntityWarning"],
[class*="hasMissingEntity"] {
  background-color: #FFFBEB !important;
  /* border: 1px solid #F59E0B !important; */
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

/* FIX: Entity relation warning - compactar y alinear */
[class*="hasMissingEntity"],
[class*="MissingEntityRelation"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  max-width: 100% !important;
}

/* Grid dentro del warning - eliminar espacio extra */
[class*="hasMissingEntity"] .MuiGrid-container,
[class*="EntityWarning"] .MuiGrid-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

[class*="hasMissingEntity"] .MuiGrid-item,
[class*="EntityWarning"] .MuiGrid-item {
  padding: 0 !important;
  flex: none !important;
}

/* Icono del warning - alineado */
[class*="hasMissingEntity"] svg,
[class*="EntityWarning"] svg {
  flex-shrink: 0 !important;
}

/* Texto del warning - sin espacio extra */
[class*="hasMissingEntity"] .MuiTypography-root,
[class*="EntityWarning"] .MuiTypography-root {
  margin: 0 !important;
  flex: 1 !important;
}

/* Paper component usado para alertas */
.MuiPaper-root[style*="background-color: rgb(255, 244, 229)"],
.MuiPaper-root[style*="background-color: rgb(255, 243, 224)"] {
  background-color: #FFFBEB !important;
  border: 1px solid #F59E0B !important;
  border-radius: 8px !important;
}

/* Ocultar iconos rotos de entidades no encontradas */
[class*="EntityPeekAheadPopover"] svg[data-testid="BrokenImageIcon"],
[class*="MissingEntity"] {
  opacity: 0.5;
}

/* Mejorar el texto de las alertas de entidades */
[class*="EntityWarning"] p,
[class*="WarningPanel"] p {
  color: #92400E !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ResponseErrorPanel - Error boxes */
.BackstageResponseErrorPanel-root {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Entity warnings in catalog */
[class*="EntityWarningContent"] {
  border-radius: 8px !important;
}

/* ========================================
   Backstage Entity Relation Warnings
   ======================================== */

/* El contenedor principal de la advertencia de relaciones */
.MuiBox-root > .MuiPaper-root:has(.MuiSvgIcon-root) {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Cualquier contenedor amarillo/naranja de warning - COMPACTO */
div[style*="background-color: rgb(255"],
div[style*="background: rgb(255, 244"],
div[style*="background: rgb(255, 243"],
.MuiPaper-root[style*="rgb(255, 244"],
.MuiPaper-root[style*="rgb(255, 243"] {
  background-color: #FFFBEB !important;
  border: 1px solid #F59E0B !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

/* FIX: Grid dentro del Paper amarillo - alinear icono y texto */
div[style*="background-color: rgb(255"] > .MuiGrid-container,
.MuiPaper-root[style*="rgb(255, 244"] > .MuiGrid-container,
.MuiPaper-root[style*="rgb(255, 243"] > .MuiGrid-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Grid items - sin anchos fijos */
div[style*="background-color: rgb(255"] .MuiGrid-item,
.MuiPaper-root[style*="rgb(255"] .MuiGrid-item {
  max-width: none !important;
  flex-basis: auto !important;
  padding: 0 8px 0 0 !important;
}

/* Primer item (icono) - solo el espacio necesario */
div[style*="background-color: rgb(255"] .MuiGrid-item:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Segundo item (texto) - tomar el resto */
div[style*="background-color: rgb(255"] .MuiGrid-item:nth-child(2) {
  flex: 1 1 auto !important;
  width: auto !important;
}

/* Contenedor de relaciones faltantes - específico */
div[class*="makeStyles-"],
div[class*="jss"] {
  /* border-radius: 8px !important; */
}

/* Grid container para warnings con icono - COMPACTO */
.MuiGrid-container:has(.MuiSvgIcon-colorAction) {
  background-color: #FFFBEB !important;
  border: 1px solid #F59E0B !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

/* Items del grid - sin padding extra */
.MuiGrid-container:has(.MuiSvgIcon-colorAction) > .MuiGrid-item {
  padding: 0 !important;
  max-width: none !important;
  flex-basis: auto !important;
}

/* Primer item (icono) */
.MuiGrid-container:has(.MuiSvgIcon-colorAction) > .MuiGrid-item:first-child {
  flex: 0 0 auto !important;
}

/* Segundo item (texto) */
.MuiGrid-container:has(.MuiSvgIcon-colorAction) > .MuiGrid-item:last-child {
  flex: 1 1 auto !important;
}

/* Icono de warning */
.MuiSvgIcon-colorAction[class*="Warning"],
svg[data-testid="WarningIcon"] {
  color: #F59E0B !important;
}

/* Texto dentro del warning */
.MuiGrid-container:has(.MuiSvgIcon-colorAction) .MuiTypography-root {
  color: #92400E !important;
  font-size: 0.875rem !important;
}

/* Links dentro del warning */
.MuiGrid-container:has(.MuiSvgIcon-colorAction) a {
  color: #B45309 !important;
  text-decoration: underline !important;
}

/* ========================================
   FIX: Icono de grupo en Owner - Azul visible
   ======================================== */

/* Icono en CatalogReactEntityDisplayName */
[class*="CatalogReactEntityDisplayName-icon"] {
  color: #0F265C !important;
}

[class*="CatalogReactEntityDisplayName-icon"] svg {
  color: #0F265C !important;
}

[class*="CatalogReactEntityDisplayName-icon"] svg path {
  fill: #0F265C !important;
}

/* Label "Owner" - color gris visible */
[class*="BackstageHeaderLabel-label"] {
  color: #6B7280 !important;
}

/* Lifecycle text - color oscuro */
[class*="BackstageHeaderLabel-value"] {
  color: #0F265C !important;
}

/* Link del Owner - color azul */
[class*="BackstageHeaderLabel-value"] a {
  color: #0F265C !important;
}

[class*="BackstageHeaderLabel-value"] a:hover {
  color: #1a3a7a !important;
}

[class*="BackstageHeaderLabel-value"] a:hover svg,
[class*="BackstageHeaderLabel-value"] a:hover [class*="CatalogReactEntityDisplayName-icon"] {
  color: #1a3a7a !important;
}

[class*="BackstageHeaderLabel-value"] a:hover svg path {
  fill: #1a3a7a !important;
}

/* Forzar icono en rightItemsBox del header */
[class*="BackstageHeader-rightItemsBox"] [class*="MuiSvgIcon-fontSizeInherit"] {
  color: #0F265C !important;
}

[class*="BackstageHeader-rightItemsBox"] [class*="MuiSvgIcon-fontSizeInherit"] path {
  fill: #0F265C !important;
}

/* Botón More (tres puntos) - hacerlo visible */
[class*="EntityContextMenu-button"],
[class*="PluginCatalogEntityContextMenu-button"] {
  color: #0F265C !important;
}

[class*="EntityContextMenu-button"] svg,
[class*="PluginCatalogEntityContextMenu-button"] svg {
  color: #0F265C !important;
}

[class*="EntityContextMenu-button"] svg path,
[class*="PluginCatalogEntityContextMenu-button"] svg path {
  fill: #0F265C !important;
}

/* Icono de More en el header */
[class*="BackstageHeader-rightItemsBox"] button svg {
  color: #0F265C !important;
}

[class*="BackstageHeader-rightItemsBox"] button svg path {
  fill: #0F265C !important;
}

/* ========================================
   FIX: Avatar de perfil - Borde circular amarillo
   ======================================== */

/* Avatar en el header - hacer circular con borde amarillo */
[class*="MuiAvatar-root"] {
  border-radius: 50% !important;
  border: 3px solid #FFDD00 !important;
}

/* Imagen dentro del avatar */
[class*="MuiAvatar-root"] img {
  border-radius: 50% !important;
}

/* Avatar button en la barra superior */
button[class*="MuiIconButton-root"] [class*="MuiAvatar-root"],
[class*="SidebarUserSettings"] [class*="MuiAvatar-root"],
header [class*="MuiAvatar-root"] {
  border-radius: 50% !important;
  border: 3px solid #FFDD00 !important;
  width: 40px !important;
  height: 40px !important;
}

/* Asegurar que la imagen sea circular */
[class*="MuiAvatar-img"] {
  border-radius: 50% !important;
}

/* ========================================
   FIX: Scaffolder Task Logs - Forzar visibilidad
   ======================================== */

/* Nota: Los logs del scaffolder usan virtualización con height:0 inline.
   CSS no puede sobrescribir esto fácilmente. 
   Si los logs no se muestran, puede ser necesario un componente custom. */

/* El div padre del LogViewer tiene width:0 height:0 inline - forzar dimensiones */
div:has(> [class*="BackstageLogViewer-root"]) {
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 400px !important;
}

/* FORZAR: Cualquier div con style inline height:0 width:0 dentro del área de logs */
div[style*="height: 0px"][style*="width: 0px"],
div[style*="height:0px"][style*="width:0px"],
div[style*="height: 0"][style*="width: 0"] {
  height: auto !important;
  min-height: 400px !important;
  width: 100% !important;
  min-width: 100% !important;
}

/* Contenedor del LogViewer - Tema Pichincha */
[class*="BackstageLogViewer-root"] {
  width: 100% !important;
  height: 400px !important;
  min-height: 400px !important;
  background-color: #F3F4F6 !important;
  /* border-radius: 8px !important; */
  /* border: 2px solid #0F265C !important; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Header del LogViewer (búsqueda y filtros) */
[class*="BackstageLogViewer-header"] {
  background-color: #FFFFFF !important;
  /* padding: 8px 12px !important; */
  /* border-bottom: 2px solid #FFDD00 !important; */
}

/* Input de búsqueda */
[class*="BackstageLogViewer-header"] input {
  color: #0F265C !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* Placeholder del input */
[class*="BackstageLogViewer-header"] input::placeholder {
  color: #9CA3AF !important;
}

/* Iconos en el header */
[class*="BackstageLogViewer-header"] svg {
  color: #FFFFFF !important;
}

/* Área de logs con scroll */
[class*="BackstageLogViewer-log"] {
  /* height: 350px !important; */
  min-height: 350px !important;
  width: 100% !important;
  background-color: #FFFFFF !important;
}

/* Cada línea de log */
[class*="BackstageLogViewer-line"] {
  color: #1F2937 !important;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
  font-size: 12px !important;
}

/* Número de línea */
[class*="BackstageLogViewer-lineNumber"] {
  color: #0F265C !important;
  margin-right: 12px !important;
  min-width: 40px !important;
  font-weight: 600 !important;
}

/* Texto info en verde */
[class*="BackstageLogViewer-modifierForegroundGreen"] {
  color: #059669 !important;
}

/* Texto warning en amarillo/naranja */
[class*="BackstageLogViewer-modifierForegroundYellow"] {
  color: #D97706 !important;
}

/* Texto error en rojo */
[class*="BackstageLogViewer-modifierForegroundRed"] {
  color: #DC2626 !important;
}
/**
 * CORRECCIÓN LAYOUT BACKSTAGE - SOLUCIÓN LIMPIA
 */

/* 1. AppBar fijo */
.MuiAppBar-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1300 !important;
  height: 64px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 2. Contenido principal con margen solo en el contenedor apropiado */
html, body {
  margin: 0 !important;
  padding: 0 !important;

}

/* 3. El contenedor principal necesita espacio arriba */
.backstage-app {
  padding-top: 64px !important;
}

/* 4. Barra lateral se ajusta para no solaparse */
.backstage-sidebar {
  top: 64px !important;
  height: calc(100vh - 64px) !important;
}

/* 5. El mensaje de error y alertas van debajo del header */
.MuiAlert-root,
div[role="alert"],
div[class*="MuiAlert-"],
.MuiPaper-elevation0[role="alert"] {
  /* margin-top: 64px !important; */
  /* z-index: 1299 !important;
  border-radius: 4px !important;
  width: calc(100% - 16px) !important;
  max-width: calc(100% - 16px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border-left: 4px solid transparent !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; */
}

/* Estilos específicos para cada tipo de alerta */
.MuiAlert-standardError,
div[role="alert"][class*="error"] {
  background-color: #FFEBEE !important;
  border-left-color: #D32F2F !important;
  color: #C62828 !important;
}


.MuiAlert-standardSuccess,
div[role="alert"][class*="success"] {
  background-color: #E8F5E9 !important;
  border-left-color: #43A047 !important;
  color: #2E7D32 !important;
}

.MuiAlert-standardWarning,
div[role="alert"][class*="warning"] {
  background-color: #FFF8E1 !important;
  border-left-color: #FFB300 !important;
  color: #F57F17 !important;
}

.MuiAlert-standardInfo,
div[role="alert"][class*="info"] {
  background-color: #E1F5FE !important;
  border-left-color: #0288D1 !important;
  color: #0277BD !important;
}

/* Mejorar el botón de cerrar en las alertas */
.MuiAlert-action {
  margin-right: -8px !important;
  margin-left: 16px !important;
}

.MuiAlert-action button {
  color: inherit !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s !important;
}

.MuiAlert-action button:hover {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 6. Arreglo específico para el contenedor azul en la página de búsqueda */
div.MuiPaper-elevation1 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* 7. Corrección para páginas con tabs */
.MuiTabs-flexContainer,
.MuiTabs-root {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* Reducir espacio entre indicador de tab y contenido */
.MuiTabs-indicator {
  bottom: 0 !important;
  height: 1px !important;
}

/* Ajustar la altura general de las pestañas para ser más compactas */
.MuiButtonBase-root.MuiTab-root {
  line-height: 1 !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 0.85rem !important;
}

/* 8. Soluciones específicas para páginas especiales */
div[data-testid="settings-page"],
div[data-testid="authentication-providers-content"],
div[data-testid="user-settings-page"],
div[data-testid="catalog-entity-page"] {
  margin-top: 64px !important;
}

/* 9. Asegurar que el contenido de los tabs esté correctamente posicionado */
[role="tabpanel"] {
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  top: -7px !important;
  border-top: none !important;
}

/* Ajuste específico para los contenedores de perfil */
.MuiTabs-root + div[class*="makeStyles"],
.MuiTabs-root + .MuiBox-root,
.MuiTabs-root + div {
  margin-top: -7px !important;
  padding-top: 0 !important;
}

/* Reglas específicas para la página de perfil */
[aria-controls="feature-tab-content"],
[aria-controls="general-tab-content"],
[aria-controls="authentication-providers-tab-content"] {
  min-height: 18px !important;
  height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-size: 0.8rem !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: -0.2px !important;
}

.MuiTab-root {
  min-height: 32px !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

/* Eliminar espacio vertical entre pestañas y contenido */
.MuiTabs-root + .MuiBox-root,
.MuiBox-root > .MuiBox-root,
.MuiBox-root + .MuiBox-root,
.MuiTabs-root ~ .MuiBox-root,
.MuiTabs-root ~ div {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 10. Corregir las páginas con tabs verticales (como la página de perfil) */
.MuiTabs-vertical + [role="tabpanel"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 11. Ajustar especialmente el selector de rol "main" que contiene contenido principal */
[role="main"] {
  padding-top: 64px !important;
  
}

/* 12. Solución al problema del doble scroll en las páginas de Backstage */
/* Usamos una clase personalizada para identificar exactamente los elementos que queremos modificar */
.no-double-scroll {
  /* Eliminamos completamente las propiedades de altura fija */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  /* Aseguramos que no haya scroll vertical automático */
  overflow-y: visible !important;
}

/* Mantenemos también los selectores anteriores para compatibilidad */
[class*="BackstagePage-root"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

.MuiContainer-root,
.MuiGrid-container,
.MuiBox-root,
div[class*="makeStyles"],
.MuiDrawer-paper,
.backstage-container,
.MuiPaper-root {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Asegurar que el contenido principal no tiene scroll horizontal */
main.MuiBox-root,
main[class*="makeStyles"],
[role="main"],
.MuiBox-root[role="main"],
main {
  overflow-x: hidden !important;
  max-width: none !important;
  width: 100% !important;
  
}

/* 13. Compactar espaciado vertical entre elementos */
.MuiGrid-container > .MuiGrid-item,
.MuiList-root > .MuiListItem-root,
.MuiCardContent-root > *,
.MuiBox-root > * {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* Custom Header Styles for Create Component page */

/* Target the specific header shown in the HTML */
header[class*="BackstageHeader-header"] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px 32px;
  background-color: #ffffff !important;
  background-image: none !important; /* Remove ugly blue gradient */
  /* border-radius: 16px; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Yellow accent line at top */
header[class*="BackstageHeader-header"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #FFDD00;
  border-radius: 16px 16px 0 0;
}

/* Fix layout for left items box without yellow square */
div[class*="BackstageHeader-leftItemsBox"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0;
}

/* Title styling */
h1[class*="BackstageHeader-title"] {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: #0F265C !important;
  margin: 0 !important;
  display: block;
  width: 100%;
}

/* Subtitle styling */
span[class*="BackstageHeader-subtitle"] {
  font-size: 1rem !important;
  color: rgba(0, 0, 0, 0.6) !important;
  margin-top: 4px !important;
  display: block;
}

/* Fix spacing of right items box */
div[class*="BackstageHeader-rightItemsBox"] {
  margin-left: auto;
}

/* Register Existing Component button styling */
a[href="/catalog-import"] {
  background-color: #FFDD00 !important;
  color: #0F265C !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
}

a[href="/catalog-import"]:hover {
  background-color: #FFD700 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Custom styling for template cards to match corporate design */

/* Card container */
.MuiPaper-root.MuiCard-root {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.MuiPaper-root.MuiCard-root:hover {
  transform: translateY(-4px);
}

/* Card header */
.BackstageItemCardHeader-root,
div[class*="BackstageItemCardHeader-root"],
.BackstageItemCardHeader-root-7699,
div[class*="BackstageItemCardHeader-root-"] {
  background-color: #FFDD00 !important;
  color: #0F265C !important;
  padding: 16px 24px !important;
  background-image: none !important;
}

/* Target the specific makeStyles-header class */
.makeStyles-header-7697,
[class*="makeStyles-header-"] {
  background-color: #FFDD00 !important;
  background-image: none !important;
  color: #0F265C !important;
  border-radius: 8px !important;
}

/* Service label */
.BackstageItemCardHeader-root h3,
div[class*="BackstageItemCardHeader-root"] h3 {
  color: rgba(15, 38, 92, 0.8) !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
}

/* Title styling */
.BackstageItemCardHeader-root h4,
div[class*="BackstageItemCardHeader-root"] h4 {
  color: #0F265C !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Hide icon buttons */
.makeStyles-subtitleWrapper div button {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.makeStyles-subtitleWrapper div button:hover {
  opacity: 1;
}

/* Card content */
.MuiCardContent-root {
  padding: 24px !important;
  color: #555 !important;
}

/* Description text */
.BackstageMarkdownContent-markdown p {
  color: #555;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Tags */
.MuiChip-root {
  border-radius: 16px !important;
  background-color: #f0f0f0 !important;
  color: #555 !important;
  font-weight: 500 !important;
  height: 28px !important;
  margin-right: 8px !important;
}

/* Card actions/footer */
.MuiCardActions-root {
  padding: 16px 24px !important;
  border-top: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
}

/* Owner info styling */
.makeStyles-ownedBy svg {
  color: #333333 !important;
}

.makeStyles-ownedBy a {
  color: #333333 !important;
  font-weight: 500;
}

/* Choose button styling like Abrir button */
button[data-testid="template-card-actions--create"] {
  background-color: #FFDD00 !important;
  color: #0F265C !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 8px 24px !important;
  border-radius: 4px !important;
  text-transform: none !important;
  font-size: 16px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

button[data-testid="template-card-actions--create"]:hover {
  background-color: #FFD700 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Direct fix for Dashboard.tsx component */

/* Target the specific header class in Dashboard.tsx */
.makeStyles-header-1,
div[class*="makeStyles-header-"],
.makeStyles-header-111,
.makeStyles-header-222,
.makeStyles-header-333,
.makeStyles-header-444,
.makeStyles-header-555,
.makeStyles-header-666,
.makeStyles-header-777,
.makeStyles-header-888,
.makeStyles-header-999 {
  background-color: white !important;
  background-image: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Override the linear gradient in Dashboard.tsx with yellow accent */
.makeStyles-header-1::before,
div[class*="makeStyles-header-"]::before,
.makeStyles-header-111::before,
.makeStyles-header-222::before,
.makeStyles-header-333::before,
.makeStyles-header-444::before,
.makeStyles-header-555::before,
.makeStyles-header-666::before,
.makeStyles-header-777::before,
.makeStyles-header-888::before,
.makeStyles-header-999::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: #FFDD00 !important;
  background-image: none !important;
  background-color: #FFDD00 !important;
}

/* Target InfoCard in HomePage component */
.ContentHeader-header,
.InfoCard-card,
.InfoCard-root .MuiPaper-root,
.InfoCard-header,
div[class*="Page-root"] .ContentHeader-header,
.PichinchaCard-root .MuiPaper-root,
.InfoCard-root .MuiPaper-root {
  background-color: white !important;
  background-image: none !important;
  background: white !important;
  position: relative !important;
  padding: 24px !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* InfoCard yellow accent line */
.ContentHeader-header::before,
.InfoCard-card::before,
.InfoCard-root .MuiPaper-root::before,
.InfoCard-header::before,
div[class*="Page-root"] .ContentHeader-header::before,
.PichinchaCard-root .MuiPaper-root::before,
.InfoCard-root .MuiPaper-root::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: #FFDD00 !important;
  border-radius: 16px 16px 0 0 !important;
  z-index: 1 !important;
}

/* InfoCard text colors */
.ContentHeader-header h1,
.ContentHeader-header h2,
.ContentHeader-header h3,
.ContentHeader-header p,
.InfoCard-card h1,
.InfoCard-card h2,
.InfoCard-card h3,
.InfoCard-card p,
.InfoCard-root .MuiPaper-root h1,
.InfoCard-root .MuiPaper-root h2,
.InfoCard-root .MuiPaper-root h3,
.InfoCard-root .MuiPaper-root p,
.PichinchaCard-root .MuiPaper-root h1,
.PichinchaCard-root .MuiPaper-root h2,
.PichinchaCard-root .MuiPaper-root h3,
.PichinchaCard-root .MuiPaper-root p {
  color: #0F265C !important;
}

/* Most direct selectors for internal developer portal header card */
.MuiPaper-root:has(.MuiGrid-root img[alt*="logo"]),
.MuiPaper-root:has(.MuiBox-root img[alt*="logo"]),
.MuiPaper-root:has(h1:contains("Internal Developer Portal")),
.MuiPaper-root:has(h2:contains("Internal Developer Portal")),
.MuiPaper-root:has(h3:contains("Internal Developer Portal")),
.MuiPaper-root:has(img[src*="/bancodevsymbol"]) {
  background-color: white !important;
  background-image: none !important;
  background: white !important;
}

/* Add specific CSS for Banco Pichincha home header */

/* Styles specifically for InfoCard in Banco Pichincha home */
.InfoCard-headerTitle,
.InfoCard-subheader,
.InfoCard-title,
.PichinchaCard-title,
[class*="InfoCard-"] h2,
[class*="InfoCard-"] h3,
.ContentHeader-title {
  color: #0F265C !important;
}


/*# sourceMappingURL=main.f5171324.css.map*/