body {
  background-color: #0a0b0f !important;
}

/* =========================
   NAVBAR CONTAINER
   ========================= */
[data-testid="nav-children"] { 
    background-color: #ffffff0d !important; 
    position: relative; 
    border-radius: 0.375rem !important; 
    border-color: #4444447c; 
    border-style: solid; 
    border-width: 1px; 
    transition-property: all; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 300ms; 
}

/* Links base: define borde transparente para evitar "flash" */
[data-testid="nav-children"] a {
  color: #ffffff !important;

  border: 1px solid transparent !important; /* clave */
  border-radius: 0.375rem;

  outline: none !important;
  box-shadow: none !important;

  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quitar focus-visible del navbar */
[data-testid="nav-children"] a:focus,
[data-testid="nav-children"] a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Activo */
[data-testid="nav-children"] a.bg-gray-100 {
  position: relative;
  text-align: left;

  color: #ffffff !important;
  background-color: rgba(255, 136, 0, 30%) !important;
  border-color: rgba(255, 136, 0, 40%) !important;

  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hover (preview antes de clic) SOLO no activos */
[data-testid="nav-children"] a:not(.bg-gray-100):hover {
  position: relative;
  text-align: left;

  color: #ffffff !important;
  background-color: rgba(255, 136, 0, 30%) !important;
  border-color: rgba(255, 136, 0, 40%) !important;

  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* =========================
   CARDS DE CONTENIDO (antes bg-white)
   ========================= */
.bg-white.pl-3.pr-3.rounded-xl.shadow { 
    background-color: #ffffff0d !important; 
    position: relative; 
    border-radius: 0.375rem !important; 
    border-color: #4444447c; 
    border-style: solid; 
    border-width: 1px; 
    transition-property: all; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 300ms; 
}

/* Texto principal de cada item (Beans, Kyomi, etc.) */
.row.accordian-group .text-base.font-medium {
  color: #ffffff !important;
}

/* =========================
   OVERVIEW ALERT
   ========================= */
#overview-alert {
  position: relative;
  padding: 0.75rem;
  width: 100%;
  text-align: left;

  color: #ffffff !important;

  background: rgb(76 175 80 / 30%) !important;
  border: 1px solid rgb(76 175 80 / 40%) !important;
  border-radius: 0.375rem;

  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);

  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reemplazar el color inline específico */
div[style*="color: rgb(42, 181, 125)"] {
  color: rgb(78 213 83 / 1) !important;
}

[role="icon"] {
  color: #ffffff !important;
}


/* ===== NAV MÓVIL (overlay) ===== */
[data-mobile-nav-menu="true"] [data-testid="nav-children"] {
    background-color: #16171b !important; 
    position: relative; 
    border-radius: 0.375rem !important; 
    border-color: #212124;
    border-style: solid; 
    border-width: 1px; 
    transition-property: all; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 300ms; 
}

h1.text-gray-900,
h3.text-gray-900 {
  color: #f0f5ff !important;
}

[role="icon"]:not([data-testid="nav-children"] *) svg {
  margin-bottom: 5px;
}

div:has(> [data-testid="status-page-overview"]) {
  margin-bottom: 0 !important;
}

/* 2) Quitar padding del contenedor interno (py-6 px-6 lg:px-8) */
footer.mx-auto.w-full > div.mx-auto.w-full {
  padding: 0 !important;          /* mata px/py */
  margin: 0 !important;
}