/* ============================================================
   POMELO STATUS PAGE — Custom CSS
   Atlassian Statuspage › Settings › Customize › Custom CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --pomelo-magenta:     #E61E66;
  --pomelo-black:       #0A0A0A;

  /* Backgrounds */
  --pomelo-bg:          #080C21;
  --pomelo-surface:     #13172E;

  /* Borders */
  --pomelo-border:      #334155;
  --pomelo-border-soft: #F0F0F5;

  /* Text */
  --pomelo-text:        #FAFAFA;
  --pomelo-muted:       #64748B;
  --pomelo-body:        #444444;

  /* Badge — Operational (Green) */
  --badge-op-bg:        rgba(18, 183, 106, 0.15);
  --badge-op-text:      #4ADE80;
  --badge-op-border:    rgba(18, 183, 106, 0.25);

  /* Badge — Partially Degraded (Yellow) */
  --badge-deg-bg:       rgba(202, 138, 4, 0.3);
  --badge-deg-text:     #FAFAFA;
  --badge-deg-border:   rgba(202, 138, 4, 1);
  --badge-deg-icon:     rgba(250, 204, 21, 1);

  /* Badge — Minor Outage (Orange) */
  --badge-minor-bg:     rgba(249, 115, 22, 0.25);
  --badge-minor-text:   #FAFAFA;
  --badge-minor-border: rgba(234, 88, 12, 1);
  --badge-minor-icon:   rgba(251, 146, 60, 1);

  /* Badge — Major Outage (Red) */
  --badge-major-bg:     rgba(220, 38, 38, 0.25);
  --badge-major-text:   #FAFAFA;
  --badge-major-border: rgba(234, 88, 12, 1);
  --badge-major-icon:   rgba(248, 113, 113, 1);

  /* Badge — Under Maintenance (Blue) */
  --badge-maint-bg:     rgba(59, 130, 246, 0.20);
  --badge-maint-text:   #FAFAFA;
  --badge-maint-border: rgba(59, 130, 246, 0.20);

  /* Misc */
  --pomelo-link:        #DB2777;
  --radius:             8px;
}


/* ── RESET GLOBAL ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Pisa overflow hidden de Statuspage que clippea tooltips */
html {
  overflow-x: visible !important;
}

.layout-content.manage,
.layout-content {
  overflow: visible !important;
}

body, html {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  background: var(--pomelo-bg) !important;
  color: var(--pomelo-text) !important;
  -webkit-font-smoothing: antialiased;
}


/* ── OCULTAR ELEMENTOS INNECESARIOS ───────────────────────── */
.availability-time-line-graphic,
.legend-item.light.legend-item-date-range,
.legend-item.legend-item-uptime-value,
.spacer,
.history-footer-link,
.component-statuses-legend             { display: none !important; }

.uptime-90-days-wrapper {
  margin: 0 !important;
  padding: 4px 0 0 0 !important;
}

.status-day:nth-child(n+8)             { display: none !important; }


/* ── TOOLTIP ──────────────────────────────────────────────── */
button.tooltip-base.tool.tooltipstered {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  transition: opacity 0.15s !important;
  opacity: 0.45 !important;
}

button.tooltip-base.tool.tooltipstered:hover {
  opacity: 1 !important;
}

button.tooltip-base.tool.tooltipstered svg {
  display: none !important;
}

/* Ícono info de Lucide vía CSS mask */
button.tooltip-base.tool.tooltipstered::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-color: var(--pomelo-text) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3Cline x1='12' y1='12' x2='12' y2='16'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3Cline x1='12' y1='12' x2='12' y2='16'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}


/* ── MASTHEAD ─────────────────────────────────────────────── */
.layout-content.status .masthead-container.basic .masthead {
  margin-top: 76px !important;
  padding: 16px 0 20px !important;
  background: transparent !important;
  border-bottom: none !important;
}

.logo-container img { display: none !important; }

.logo-container {
  position: relative;
  min-height: 52px;
}

.logo-container::before {
  content: "Pomelo Status";
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--pomelo-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.logo-container::after {
  content: "Real-time health information for Pomelo's services.";
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 0.875rem;
  color: var(--pomelo-muted);
  margin-top: 5px;
  line-height: 1.5;
}


/* ── BANNER DE ESTADO GLOBAL ──────────────────────────────── */
.page-status-container,
.status-banner-container {
  display: flex !important;
  justify-content: center !important;
}

.page-status {
  border-radius: 9999px !important;
  margin: 0 auto 24px !important;
  padding: 18px 20px !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  box-shadow: none !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.page-status p,
.page-status span,
.page-status div,
.page-status h2,
.page-status .font-large {
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.page-status.status-none,
.page-status.status-all-good {
  background: rgba(18, 183, 106, 0.15) !important;
  color: #4ADE80 !important;
  border: 1px solid rgba(18, 183, 106, 0.30) !important;
}

.page-status.status-none::before,
.page-status.status-all-good::before {
  content: "";
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Partially Degraded */
.page-status.status-minor {
  background: rgba(202, 138, 4, 0.3) !important;
  color: #FAFAFA !important;
  border: 1px solid rgba(202, 138, 4, 0.30) !important;
}

.page-status.status-minor::before {
  content: "";
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  background-color: rgba(250, 204, 21, 1) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Minor Outage */
.page-status.status-critical {
  background: rgba(249, 115, 22, 0.25) !important;
  color: #FAFAFA !important;
  border: 1px solid rgba(234, 88, 12, 0.30) !important;
}

.page-status.status-critical::before {
  content: "";
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  background-color: rgba(251, 146, 60, 1) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Major Outage */
.page-status.status-major {
  background: rgba(220, 38, 38, 0.25) !important;
  color: #FAFAFA !important;
  border: 1px solid rgba(234, 88, 12, 0.30) !important;
}

.page-status.status-major::before {
  content: "";
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  background-color: rgba(248, 113, 113, 1) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}


/* ── LAYOUT GENERAL ───────────────────────────────────────── */
.layout-content {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 24px 64px !important;
}


/* ── SECCIÓN COMPONENTES ──────────────────────────────────── */
.components-section { padding: 0 !important; }

.components-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Contenedor padre — excluye component-inner-container */
.component-container,
div[class^="component-container"],
div[class*=" component-container"] {
  background: var(--pomelo-surface) !important;
  border: 1px solid var(--pomelo-border) !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Asegura que border-color no pise el radius */
.border-color {
  border-radius: var(--radius) !important;
}

/* Pisa estilos de primer/último hijo que Statuspage aplica */
.components-container > *:first-child,
.components-container > *:last-child,
.components-container > *:first-child > .component-container,
.components-container > *:last-child > .component-container,
.component-container:first-child,
.component-container:last-child,
.component-container:first-of-type,
.component-container:last-of-type {
  border-radius: var(--radius) !important;
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* Fila del padre (header del grupo o componente simple) */
.component-inner-container {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 20px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Badge empujado al extremo derecho */
.component-inner-container .component-status {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Ícono de estado (check/círculo) también al final */
.component-inner-container .status-icon-button {
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

/* Contenedor hijos */
.child-components-container {
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--pomelo-border) !important;
  overflow: visible !important;
}

/* Fila de cada hijo */
.child-components-container .component-inner-container {
  padding: 14px 20px 12px !important;
  border-bottom: 1px solid var(--pomelo-border) !important;
  margin: 0 !important;
}

.child-components-container .component-inner-container:last-child {
  border-bottom: none !important;
}


/* ── ÍCONO EXPAND ─────────────────────────────────────────── */
/* Oculta el glifo original de Font Awesome */
.fa.group-parent-indicator {
  font-size: 0 !important;
  position: relative !important;
}

/* "+" limpio (estado cerrado) */
.fa.group-parent-indicator::before {
  content: "+" !important;
  font-family: 'Geist', ui-sans-serif, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(250, 250, 250, 0.5) !important;
  display: inline-block !important;
  line-height: 1 !important;
  transition: color 0.15s !important;
}

/* "−" limpio (estado abierto) */
.fa.group-parent-indicator[aria-expanded="true"]::before {
  content: "−" !important;
  color: rgba(250, 250, 250, 0.7) !important;
}

/* Hover */
.fa.group-parent-indicator:hover::before {
  color: var(--pomelo-text) !important;
}


/* ── NOMBRE DEL COMPONENTE ────────────────────────────────── */
.component-name,
.name {
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--pomelo-text) !important;
  letter-spacing: -0.01em !important;
}

/* Restaura font-size en el span de texto (el fa.group-parent-indicator tiene font-size:0) */
.name > span:not(.fa) {
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* Hijos colapsables en color muted */
.child-components-container .name,
.child-components-container .name > span:not(.fa) {
  color: var(--pomelo-muted) !important;
}


/* ── BADGES DE ESTADO — BASE ──────────────────────────────── */
/*
 * Uso en HTML custom:
 *   <span class="pomelo-badge pomelo-badge--operational">Operational</span>
 *   <span class="pomelo-badge pomelo-badge--degraded">Partially Degraded</span>
 *   <span class="pomelo-badge pomelo-badge--minor">Minor Outage</span>
 *   <span class="pomelo-badge pomelo-badge--major">Major Outage</span>
 *   <span class="pomelo-badge pomelo-badge--maintenance">Under Maintenance</span>
 */
.pomelo-badge,
.component-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: capitalize !important;
  word-wrap: break-word;
  border: 1px solid transparent !important;
}

/* Operational — Green */
.pomelo-badge--operational,
.component-status.operational,
span.component-status[class*="operational"] {
  background: var(--badge-op-bg) !important;
  color: var(--badge-op-text) !important;
  border-color: var(--badge-op-border) !important;
}

/* Partially Degraded — Yellow */
.pomelo-badge--degraded,
.component-status.degraded-performance {
  background: var(--badge-deg-bg) !important;
  color: var(--badge-deg-text) !important;
}

/* Minor Outage — Orange */
.pomelo-badge--minor,
.component-status.partial-outage {
  background: var(--badge-minor-bg) !important;
  color: var(--badge-minor-text) !important;
}

/* Major Outage — Red */
.pomelo-badge--major,
.component-status.major-outage {
  background: var(--badge-major-bg) !important;
  color: var(--badge-major-text) !important;
}

/* Under Maintenance — Blue */
.pomelo-badge--maintenance,
.component-status.under-maintenance,
span.component-status[class*="under-maintenance"],
span.component-status[class*="maintenance"] {
  background: var(--badge-maint-bg) !important;
  color: var(--badge-maint-text) !important;
  border-color: var(--badge-maint-border) !important;
}


/* ── BANNER DE INCIDENTES / MANTENIMIENTO ─────────────────── */
.unresolved-incident,
.scheduled-maintenance-incident {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 20px !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  /* borde base — se pisa por variante */
  border: 1px solid transparent !important;
}

/* ── VARIANTES DE SEVERIDAD — borde del contenedor ─────────── */
.unresolved-incident.impact-none {
  border-color: rgba(18, 183, 106, 0.15) !important;
}
.unresolved-incident.impact-minor {
  border-color: rgba(202, 138, 4, 0.3) !important;
}
.unresolved-incident.impact-critical {
  border-color: rgba(249, 115, 22, 0.25) !important;
}
.unresolved-incident.impact-major {
  border-color: rgba(220, 38, 38, 0.25) !important;
}

/* ── TÍTULO — base ────────────────────────────────────────── */
.unresolved-incident > .incident-title,
.scheduled-maintenance-incident > .incident-title,
div[class*="unresolved"] > .incident-title,
div[class*="maintenance"] > .incident-title {
  width: 100% !important;
  background: rgba(202, 138, 4, 0.3) !important;
  border-bottom: 1px solid rgba(202, 138, 4, 0.3) !important;
  padding: 12px 20px !important;
  text-align: left !important;
}

/* ── TÍTULO — variantes ───────────────────────────────────── */
.unresolved-incident.impact-none > .incident-title {
  background: rgba(18, 183, 106, 0.15) !important;
  border-bottom-color: rgba(18, 183, 106, 0.15) !important;
}
.unresolved-incident.impact-minor > .incident-title {
  background: rgba(202, 138, 4, 0.3) !important;
  border-bottom-color: rgba(202, 138, 4, 0.3) !important;
}
.unresolved-incident.impact-critical > .incident-title {
  background: rgba(249, 115, 22, 0.25) !important;
  border-bottom-color: rgba(249, 115, 22, 0.25) !important;
}
.unresolved-incident.impact-major > .incident-title {
  background: rgba(220, 38, 38, 0.25) !important;
  border-bottom-color: rgba(220, 38, 38, 0.25) !important;
}

/* ── TÍTULO — texto del link ──────────────────────────────── */
.unresolved-incident .incident-title a,
.scheduled-maintenance-incident .incident-title a {
  font-family: 'Geist', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #FAFAFA !important;
  text-decoration: none !important;
}

/* Ocultar botón Subscribe del banner */
.unresolved-incident .incident-title .btn,
.scheduled-maintenance-incident .incident-title .btn,
.unresolved-incident .incident-title a[href*="subscribe"],
.scheduled-maintenance-incident .incident-title a[href*="subscribe"] {
  display: none !important;
}

/* Cuerpo */
.unresolved-incident .incident-body,
.scheduled-maintenance-incident .incident-body,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates,
.unresolved-incident .updates {
  width: 100% !important;
  background: var(--pomelo-surface) !important;
  border-color: transparent !important;
  padding: 14px 20px !important;
  text-align: left !important;
}

.unresolved-incident .incident-body p,
.scheduled-maintenance-incident .incident-body p,
.unresolved-incident .incident-body .update-body,
.scheduled-maintenance-incident .incident-body .update-body,
.unresolved-incident .updates p,
.unresolved-incident .updates .update-body,
.unresolved-incident .updates strong,
.unresolved-incident .updates span {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  color: var(--pomelo-text) !important;
  line-height: 1.55 !important;
}

.unresolved-incident .incident-body small,
.scheduled-maintenance-incident .incident-body small,
.unresolved-incident .update-timestamp,
.scheduled-maintenance-incident .update-timestamp,
.unresolved-incident .updates small {
  font-size: 11px !important;
  color: var(--pomelo-muted) !important;
}


/* ── SCHEDULED MAINTENANCE ────────────────────────────────── */
.scheduled-maintenance {
  width: 100% !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--badge-maint-border) !important;
  margin-bottom: 20px !important;
}

.scheduled-maintenance .incident-title.border-color,
.scheduled-maintenance h3.border-color,
.scheduled-maintenance .incident-title {
  width: 100% !important;
  background: var(--badge-maint-bg) !important;
  border-color: var(--badge-maint-border) !important;
  border-bottom: 1px solid var(--badge-maint-border) !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

.scheduled-maintenance .incident-title a,
.scheduled-maintenance .incident-title a span {
  font-family: 'Geist', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #FAFAFA !important;
  text-decoration: none !important;
}

.scheduled-maintenance .incident-title small {
  font-family: 'Geist', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--pomelo-muted) !important;
}

.scheduled-maintenance .updates-container {
  background: var(--pomelo-surface) !important;
  padding: 14px 20px !important;
  border-color: transparent !important;
}

.scheduled-maintenance .updates-container span,
.scheduled-maintenance .updates-container p {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  color: var(--pomelo-text) !important;
  line-height: 1.55 !important;
}

.scheduled-maintenance .updates-container small {
  font-size: 11px !important;
  color: var(--pomelo-muted) !important;
}



.font-large {
  font-family: 'Geist', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--pomelo-text) !important;
  letter-spacing: -0.01em !important;
}

.status-day .incident-title a {
  font-family: 'Geist', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--pomelo-magenta) !important;
}

.status-day .date-title {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pomelo-text) !important;
  border-bottom: 1px solid var(--pomelo-border) !important;
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
}

.status-day .nothing-reported {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  color: var(--pomelo-muted) !important;
}

/* Past Incidents — alinea a la izquierda sin afectar banners */
.incidents-list {
  align-items: flex-start !important;
  width: 100% !important;
}

.incidents-list .date,
.incidents-list p,
.incidents-list .color-secondary {
  text-align: left !important;
}

.status-day .incident-container {
  text-align: left !important;
  width: 100% !important;
}

.status-day .incident-container .incident-title,
.status-day .incident-container .incident-title a,
.status-day .incident-container .updates-container,
.status-day .incident-container .update,
.status-day .incident-container .update span,
.status-day .incident-container .update small {
  text-align: left !important;
  display: block !important;
}


/* ── BOTONES ──────────────────────────────────────────────── */
.flat-button {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pomelo-text) !important;
  background: #EC4899 !important;
  border: 1px solid #EC4899 !important;
  border-radius: 7px !important;
  padding: 6px 16px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.flat-button:hover,
.flat-button:hover *,
a.flat-button:hover,
button.flat-button:hover {
  color: #FAFAFA !important;
  background: #BE185D !important;
  border-color: #BE185D !important;
  text-decoration: none !important;
}

/* ── SUBSCRIBE TO UPDATES — replica exacta de .pm-btn-accent original ── */
#pm-hero-nav .updates-dropdown-container .show-updates-dropdown,
#pm-hero-nav .updates-dropdown-container .show-updates-dropdown:focus,
#pm-hero-nav .updates-dropdown-container .show-updates-dropdown:focus-visible,
#pm-hero-nav .updates-dropdown-container .show-updates-dropdown:active {
  font-family: 'Geist', ui-sans-serif, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #080C21 !important;
  background: #EC4899 !important;
  background-color: #EC4899 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
  transition: color 0.2s, border-color 0.2s, background 0.2s !important;
}

#pm-hero-nav .updates-dropdown-container .show-updates-dropdown:hover {
  color: #080C21 !important;
  background: #BE185D !important;
  background-color: #BE185D !important;
  border-color: transparent !important;
}

/* Los spans internos del texto también deben quedar oscuros, no heredar el claro */
#pm-hero-nav .updates-dropdown-container .show-updates-dropdown span {
  color: #080C21 !important;
}
/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .layout-content       { padding: 0 16px 48px !important; }
  .logo-container::before { font-size: 1.5rem; }
  .component-container  { padding: 12px 16px !important; }

  .unresolved-incident,
  .scheduled-maintenance-incident {
    width: 100% !important;
  }
}


/* ── PAST INCIDENTS — quita el border-radius de la fecha ───── */
.status-day {
  border: none !important;
}

.status-day .date.border-color,
.status-day .date {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--pomelo-border) !important;
}

/* ── WRAPPER BANNERS — fuerza centrado en el padre ─────────── */
.incidents-container,
.scheduled-maintenances-container,
.unresolved-incidents-container,
.incident-container,
[class*="maintenance-container"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* Override — incident-container dentro de past incidents va a la izquierda */
.status-day .incident-container,
.incidents-list .incident-container {
  align-items: flex-start !important;
  text-align: left !important;
}


/* ── PAST INCIDENTS — override alineación izquierda ──────────
   Debe ir después del bloque WRAPPER BANNERS para ganar en
   cascada sobre cualquier selector [class*="incidents"].      */
.incidents-list,
div.incidents-list {
  display: block !important;
  align-items: unset !important;
  text-align: left !important;
  width: 100% !important;
}

.incidents-list .date,
.incidents-list p,
.incidents-list .color-secondary,
.incidents-list .nothing-reported,
.incidents-list .font-large {
  text-align: left !important;
}


/* ── FIX MARGIN HEADER ────────────────────────────────────── */
.layout-content.status .custom-header-container {
  margin-bottom: 0 !important;
}


/* ── ANIMACIONES ──────────────────────────────────────────── */

/* Pulse suave en badges de estado degradado/outage */
@keyframes pm-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.pomelo-badge--degraded,
.component-status.degraded-performance,
.pomelo-badge--minor,
.component-status.partial-outage,
.pomelo-badge--major,
.component-status.major-outage {
  animation: pm-pulse 2.5s ease-in-out infinite !important;
}

/* ── PANEL DE SUSCRIPCIÓN — alinear a la derecha para que no se salga ── */
#pm-hero-nav .updates-dropdown-container {
  position: relative !important;
}

#pm-hero-nav .updates-dropdown-container .updates-dropdown {
  left: auto !important;
  right: 0 !important;
  max-width: 320px !important;
  width: 320px !important;
}

/* En pantallas chicas, evitar que se corte por el otro lado también */
@media (max-width: 480px) {
  #pm-hero-nav .updates-dropdown-container .updates-dropdown {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    right: -16px !important;
  }
}