/* =====================================================
   SOVOS SERVICE STATUS — Custom CSS  (v9, reconstruido)

   REGLA DE ORO DE ESTE ARCHIVO:
   NO existe ni una sola regla que pueda alcanzar el subarbol
   del control de suscripcion. En concreto:
     - CERO reglas sobre #updates-dropdown
       (nada de position, transform, overflow, max-height, z-index).
     - CERO reglas sobre .updates-dropdown-container.
     - CERO reglas globales sobre .components-section, .component-group,
       .text-section o .page-status  (clases que Statuspage REUTILIZA
       dentro del panel de OTP/componentes). Esas cuatro se ocultan
       desde el footer con JS + closest(), que excluye el panel
       por construccion.
   Del boton nativo solo se cambian propiedades COSMETICAS.
   Nunca display, position, visibility, overflow ni z-index.
===================================================== */

:root{
  --action:#015FFF;
  --navy:#072448;
  --nav-text:#545E75;
  --secondary:#605f60;
  --placeholder:#9e9e9e;
  --divider:#e0e0e0;
  --field-border:rgba(28,33,38,.3);
  --bg:#f4f5f7;
  --paper:#ffffff;
  --op-bg:#EBFFDE;  --op-dot:#7EBB69;
  --deg-bg:#FEF8E2; --deg-dot:#F0D354;
  --maj-bg:#FFD5CC; --maj-dot:#F76F72;
  --mnt-bg:#D8F1FA; --mnt-dot:#3DBBE7;
  --err-icon:#CC5C5E; --warn-icon:#C3A127; --info-icon:#2A8AAE;
  --card-shadow:0px 2px 1px -1px rgba(0,0,0,.2), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12);
}

body{ background:var(--bg) !important; top:0 !important; }
body.status{ padding-top:80px; }

/* =====================================================
   BARRA SUPERIOR (marcado en Custom Header HTML)
===================================================== */
.sps-header{
  background:var(--paper);
  border-bottom:1px solid var(--divider);
  position:fixed; top:0; left:0; right:0; z-index:30;
}
.sps-header-inner{
  width:100%; padding:0 24px; height:80px;
  display:flex; align-items:center; justify-content:space-between;
}
.sps-brand-link{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.sps-brand-link img{ height:24px; display:block; }
.sps-sub{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight:300; font-size:32px; line-height:1; color:var(--secondary);
}
.sps-header-actions{ display:flex; align-items:center; gap:12px; }

/* =====================================================
   BOTON NATIVO DE SUSCRIPCION — SOLO COSMETICA

   La campana se pinta como background-image, NO como ::before,
   precisamente para no necesitar cambiar 'display' del elemento.
   El layout interno del boton queda como Statuspage lo define.
===================================================== */
#replace-with-subscribe a#show-updates-dropdown,
a#show-updates-dropdown{
  font-family:'Inter',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:20px !important;
  color:#fff !important;
  background-color:var(--action) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:14px center !important;
  background-size:15px 15px !important;
  border:1px solid var(--action) !important;
  border-radius:8px !important;
  padding:6px 16px 6px 37px !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:0 1px 1px 0 rgba(0,0,0,.15) !important;
  transition:background-color .15s;
}
a#show-updates-dropdown:hover{
  background-color:#0b4fd6 !important;
  border-color:#0b4fd6 !important;
  color:#fff !important;
}

/* El slot nativo debe ocupar sitio en la barra. Nada de display:none aqui. */
#replace-with-subscribe{ display:inline-flex; align-items:center; }

/* =====================================================
   OCULTAMIENTO DEL CONTENIDO NATIVO — SOLO CLASES SEGURAS

   Estas cuatro clases NO son reutilizadas por Statuspage dentro
   del panel de suscripcion, asi que se pueden ocultar por CSS sin
   riesgo y sin parpadeo inicial.
   Las cuatro clases PELIGROSAS (.page-status, .components-section,
   .component-group, .text-section) se ocultan desde el footer con
   JS, que las excluye si viven dentro del control de suscripcion.
===================================================== */
.unresolved-incidents,
.incidents-list,
.scheduled-maintenances-list,
.page-footer{ display:none !important; }

/* =====================================================
   GOOGLE TRANSLATE
===================================================== */
#google_translate_element{ display:inline-flex; align-items:center; }
#google_translate_element .goog-te-gadget{ margin:0 !important; line-height:normal; }
#google_translate_element .goog-te-gadget-simple{ font-family:'Inter',sans-serif; }

.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.skiptranslate > iframe{ display:none !important; visibility:hidden !important; }

body.notranslate-pending{ opacity:0; transition:opacity .4s ease; }
body.notranslate-ready{ opacity:1; transition:opacity .4s ease; }

/* =====================================================
   STICKY DE FILTROS (una sola definicion, sin duplicados por JS)
===================================================== */
#sps-sticky{ position:sticky; top:80px; padding-top:24px; }
#sps-sticky::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
  background:var(--bg);
  z-index:-1;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:768px){
  .sps-header-inner{ height:auto; flex-direction:column; align-items:flex-start; gap:12px; padding:14px 16px; }
  .sps-header-actions{ width:100%; justify-content:space-between; gap:8px; }
  .sps-sub{ font-size:26px; }
  body.status{ padding-top:132px; }
  #sps-sticky{ top:132px; }
}

/* =====================================================
   [v10] PAGINAS NATIVAS (seleccion de componentes, gestion de
   suscripcion, detalle de incidente, historial).

   El router del footer marca <body> con .sps-home o .sps-native.
   Fuera de la home: el dashboard Mosaic desaparece y el contenido
   nativo queda arriba del todo, justo bajo la barra de Sovos.
   La barra superior (logo + boton + idioma) se conserva.
===================================================== */
body.sps-native #sps-app,
body.sps-native .snackbar{ display:none !important; }

/* La barra es fixed en todas las rutas: hay que reservar su altura
   tambien donde <body> no lleva la clase .status de Statuspage. */
body.sps-native{ padding-top:104px !important; }

/* En rutas nativas NO ocultamos nada del contenido de Statuspage:
   esas clases SON la pagina. Contrarrestamos las 4 reglas seguras
   del bloque de arriba. */
body.sps-native .unresolved-incidents,
body.sps-native .incidents-list,
body.sps-native .scheduled-maintenances-list,
body.sps-native .page-footer{ display:revert !important; }

@media (max-width:768px){
  body.sps-native{ padding-top:156px !important; }
}

/* =====================================================
   [v11] ANCLAJE DEL PANEL DE SUSCRIPCION

   Problema: el boton vive en el extremo derecho de la barra y el
   panel nativo abre hacia la DERECHA, saliendose del viewport.

   Correccion: invertir el anclaje (right:0 en vez de left:0) para
   que abra hacia la IZQUIERDA desde el boton.

   PROPIEDADES QUE SE TOCAN:  left, right, max-width.
   PROPIEDADES QUE NO SE TOCAN NUNCA, Y POR QUE:
     - transform  -> crearia bloque contenedor para descendientes
                     position:fixed; el overlay de reCAPTCHA lo es.
     - overflow / max-height -> podrian recortar el reto de reCAPTCHA
                     o el paso de OTP.
     - position / display / visibility / z-index -> son la maquina de
                     estados abrir-cerrar del control nativo.
===================================================== */
.updates-dropdown-container{ position:relative; }

#updates-dropdown{
  left:auto !important;
  right:0 !important;
  max-width:calc(100vw - 32px) !important;
}

@media (max-width:768px){
  #updates-dropdown{
    right:0 !important;
    left:auto !important;
    max-width:calc(100vw - 16px) !important;
  }
}