/* ==========================================================================
   Maisa — tema para Atlassian Statuspage (maisastatus.com)
   Tokens: globals.css del prototipo digital-workers (Maisa Studio DS)
   Dónde: Statuspage → Your page → Customize page and emails → Custom CSS
   Complemento obligatorio: ajustar los colores nativos (ver README) para
   que las barras de uptime, el calendario y los emails usen la misma paleta.
   ========================================================================== */

/* Fuentes — Google Fonts. Si Compliance prefiere no añadir un tercero,
   autoalojar Inter/Geist Mono en un dominio de Maisa y sustituir este
   @import por los @font-face equivalentes (ver bloque comentado debajo). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

/*
@font-face {
  font-family: "Inter";
  src: url("https://<cdn-maisa>/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Tipografía — sobrescribe también las variables nativas de Statuspage */
  --m-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --m-font-mono: "Geist Mono", "CommitMono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-stack-a: var(--m-font-sans);
  --font-stack-b: var(--m-font-mono);

  /* Superficies y texto */
  --m-background: #fdfdfc;
  --m-foreground: #1b1b1b;
  --m-card: #fdfdfc;
  --m-input: #ffffff;
  --m-muted: #f2f1eb;
  --m-muted-foreground: #5f5d53;
  --m-primary: #1c4038;
  --m-primary-hover: #2a4e46;
  --m-primary-foreground: #f8f8f8;
  --m-accent: #e5f2ee;
  --m-accent-foreground: #41665e;

  /* Bordes */
  --m-border: #eceade;
  --m-border-muted: #f2f1eb;
  --m-border-strong: #d9d7c4;
  --m-border-selected: #bdbbad;
  --m-border-input: #dddddd;
  --m-ring: #c4dad4;

  /* Estados (trío bg / emphasis / foreground / border) */
  --m-success: #dafbe1;     --m-success-emphasis: #1f883d;     --m-success-foreground: #1a7f37;     --m-success-border: #c0e4ca;
  --m-warning: #fff1db;     --m-warning-emphasis: #a64707;     --m-warning-foreground: #893307;     --m-warning-border: #fed7a2;
  --m-error: #ffebe9;       --m-error-emphasis: #d1242f;       --m-error-foreground: #d1242f;       --m-error-border: #fecece;
  --m-information: #ddf4ff; --m-information-emphasis: #0969da; --m-information-foreground: #0969da; --m-information-border: #bbdefd;
  /* "attention": extensión para el nivel amarillo de Statuspage (Degraded / Minor),
     que el DS no define. Alineado con la misma familia que los estados de arriba. */
  --m-attention: #fff8c5;   --m-attention-emphasis: #bf8700;   --m-attention-foreground: #7d4e00;   --m-attention-border: #f5e0a0;

  /* Radios y sombras */
  --m-radius-sm: 4px;
  --m-radius-md: 8px;
  --m-radius-lg: 12px;
  --m-radius-control: 10px;
  --m-radius-segment: 6px;
  --m-shadow-xs: 0 1px 2px rgb(16 24 40 / .05);
  --m-shadow-sm: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .1);
  --m-shadow-lg: 0 4px 6px -2px rgb(16 24 40 / .03), 0 12px 16px -4px rgb(16 24 40 / .08);
  --m-shadow-xl: 0 24px 48px -12px rgb(16 24 40 / .18);
}

/* Mapeo de estados → variables locales (--t-*) que heredan los componentes */
.layout-content .status-none,
.layout-content .status-green {
  --t-bg: var(--m-success); --t-emph: var(--m-success-emphasis); --t-fg: var(--m-success-foreground); --t-border: var(--m-success-border);
}
.layout-content .status-minor,
.layout-content .status-yellow,
.layout-content .impact-minor {
  --t-bg: var(--m-attention); --t-emph: var(--m-attention-emphasis); --t-fg: var(--m-attention-foreground); --t-border: var(--m-attention-border);
}
.layout-content .status-major,
.layout-content .status-orange,
.layout-content .impact-major {
  --t-bg: var(--m-warning); --t-emph: var(--m-warning-emphasis); --t-fg: var(--m-warning-foreground); --t-border: var(--m-warning-border);
}
.layout-content .status-critical,
.layout-content .status-red,
.layout-content .impact-critical {
  --t-bg: var(--m-error); --t-emph: var(--m-error-emphasis); --t-fg: var(--m-error-foreground); --t-border: var(--m-error-border);
}
.layout-content .status-maintenance,
.layout-content .status-blue,
.layout-content .impact-maintenance {
  --t-bg: var(--m-information); --t-emph: var(--m-information-emphasis); --t-fg: var(--m-information-foreground); --t-border: var(--m-information-border);
}
.layout-content .impact-none {
  --t-bg: var(--m-muted); --t-emph: var(--m-muted-foreground); --t-fg: var(--m-foreground); --t-border: var(--m-border);
}a{text-decoration: underline};

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html body,
html body.status {
  background-color: var(--m-background);
  color: var(--m-foreground);
  font-family: var(--m-font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body .layout-content,
body .layout-content input,
body .layout-content button,
body .layout-content select,
body .layout-content textarea {
  font-family: var(--m-font-sans);
}

body .layout-content .container {
  width: auto;
  max-width: 832px;
  padding: 0 16px;
  box-sizing: border-box;
}

body .layout-content a {
  color: var(--m-primary);
  text-underline-offset: 2px;
}
body .layout-content a:hover { text-decoration: underline; }

body .layout-content small,
body .layout-content .color-secondary {
  color: var(--m-muted-foreground);
}

body .layout-content a:focus-visible,
body .layout-content button:focus-visible,
body .layout-content .uptime-day:focus-visible {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
  border-radius: var(--m-radius-sm);
}

/* --------------------------------------------------------------------------
   3. Masthead: logo + Subscribe
   -------------------------------------------------------------------------- */
body .layout-content .masthead-container .masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 48px 0 0;
  margin-bottom: 40px;
  height: auto;
}
body .layout-content .masthead .logo-container { float: none; margin: 0; }
body .layout-content .masthead .logo-container img {
  height: 32px;
  max-height: 32px;
  width: auto;
  display: block;
}
body .layout-content .masthead .updates-dropdown-container {
  position: relative;
  top: auto !important;   /* Statuspage lo centra con JS a partir del alto del logo */
  right: auto;
  float: none;
  margin: 0;
}
body .layout-content .masthead .clearfix { display: none; }

/* Botones (Subscribe, formularios, filtros) */
body .layout-content .flat-button,
body .masthead .updates-dropdown-container .show-updates-dropdown,
body .layout-content.status-full-history .show-filter.open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--m-radius-control);
  background-color: var(--m-primary) !important;
  color: var(--m-primary-foreground) !important;
  font-family: var(--m-font-sans);
  font-size: 0.875rem;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  box-shadow: var(--m-shadow-xs);
  transition: background-color 150ms ease-out;
}
body .layout-content .flat-button:hover,
body .masthead .updates-dropdown-container .show-updates-dropdown:hover {
  background-color: var(--m-primary-hover) !important;
}
body .layout-content .flat-button:focus-visible,
body .masthead .updates-dropdown-container .show-updates-dropdown:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--m-ring);
}

/* --------------------------------------------------------------------------
   4. Banner de estado global
   -------------------------------------------------------------------------- */
body .layout-content.status.status-index .page-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 40px;
  border: 1px solid var(--t-border, var(--m-border));
  border-radius: var(--m-radius-lg);
  background-color: var(--t-bg, var(--m-card)) !important;
  box-shadow: var(--m-shadow-xs);
}
body .layout-content.status.status-index .page-status::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--t-emph, var(--m-muted-foreground));
  box-shadow: 0 0 0 4px var(--t-border, var(--m-border));
}
body .layout-content.status.status-index .page-status .status {
  margin: 0;
  color: var(--t-fg, var(--m-foreground)) !important;
  font-size: 1.125rem;   /* title-md */
  line-height: 24px;
  font-weight: 500;
}
body .layout-content.status.status-index .page-status .last-updated-stamp {
  margin-left: auto;
  color: var(--t-fg, var(--m-muted-foreground));
  font-size: 0.75rem;
  line-height: 16px;
  opacity: .8;
}

/* --------------------------------------------------------------------------
   5. Incidentes abiertos y mantenimientos programados (parte superior)
   -------------------------------------------------------------------------- */
body .layout-content.status.status-index .unresolved-incidents { margin-bottom: 40px; }
body .layout-content.status.status-index .unresolved-incident {
  margin-bottom: 16px;
  border: 1px solid var(--t-border);
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  background: var(--m-card);
  box-shadow: var(--m-shadow-xs);
}
body .layout-content.status.status-index .unresolved-incident .incident-title {
  padding: 14px 20px;
  border-bottom: 1px solid var(--t-border);
  background-color: var(--t-bg) !important;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 500;
}
body .layout-content.status.status-index .unresolved-incident .incident-title a,
body .layout-content.status.status-index .unresolved-incident .incident-title .actual-title {
  color: var(--t-fg) !important;
}
body .layout-content.status.status-index .unresolved-incident .updates {
  padding: 16px 20px 4px;
  border: 0 !important;
  background: var(--m-card);
}

body .layout-content.status.status-index .scheduled-incidents-container {
  margin-bottom: 40px;
  border: 1px solid var(--m-information-border) !important;
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  box-shadow: var(--m-shadow-xs);
}
body .layout-content.status.status-index .scheduled-incidents-container .tab {
  padding: 12px 20px;
  background-color: var(--m-information) !important;
  color: var(--m-information-foreground) !important;
  border-bottom: 1px solid var(--m-information-border);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
}
body .layout-content.status.status-index .scheduled-incidents-container .scheduled-incident {
  padding: 16px 20px;
  border-color: var(--m-border) !important;
}
body .layout-content.status.status-index .scheduled-incidents-container .incident-title a {
  color: var(--m-foreground) !important;
}

/* --------------------------------------------------------------------------
   6. Componentes + barras de uptime (90 días)
   -------------------------------------------------------------------------- */
body .layout-content.status .components-section .components-uptime-link {
  margin-bottom: 8px;
  color: var(--m-muted-foreground);
  font-size: 0.75rem;
  line-height: 16px;
}

body .layout-content.status .components-section .components-container {
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  background: var(--m-card);
  box-shadow: var(--m-shadow-xs);
}
body .layout-content.status .components-container .component-container {
  margin: 0 !important;
  padding: 16px 20px !important;
  border: 0 !important;
  border-top: 1px solid var(--m-border) !important;
  border-radius: 0 !important;
}
body .layout-content.status .components-container .component-container:first-child {
  border-top: 0 !important;
}

body .layout-content.status .components-container .component-inner-container .name {
  color: var(--m-foreground) !important;
  font-size: 0.875rem;   /* body-md-medium */
  line-height: 20px;
  font-weight: 500;
}

/* Estado del componente como pill */
body .layout-content.status .components-container .component-inner-container .component-status {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border: 1px solid var(--t-border, var(--m-border));
  border-radius: 999px;
  background: var(--t-bg, var(--m-card));
  color: var(--t-fg, var(--m-foreground)) !important;
  font-size: 0.75rem;   /* badge-md */
  line-height: 16px;
  font-weight: 500;
}
body .layout-content.status .components-container .component-inner-container .component-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--t-emph, var(--m-muted-foreground));
}

/* Grupos de componentes */
body .layout-content.status .components-container .child-components-container .component-inner-container {
  padding: 12px 0;
  border-top: 1px solid var(--m-border-muted);
}
body .layout-content.status .components-container .group-parent-indicator { color: var(--m-muted-foreground); }

/* Barras */
body .layout-content.status .shared-partial.uptime-90-days-wrapper { margin-top: 12px; }
body .layout-content.status .shared-partial.uptime-90-days-wrapper svg { height: 32px; }
body .layout-content.status .shared-partial.uptime-90-days-wrapper .uptime-day {
  transition: opacity 120ms ease-out;
}
body .layout-content.status .shared-partial.uptime-90-days-wrapper .uptime-day:hover { opacity: .7; }

/* Fallback hasta que se cambien los colores nativos (ver README).
   Cuando se cambien, estas dos reglas dejan de aplicar solas. */
body .layout-content.status .uptime-90-days-wrapper rect[fill="#b3bac5"] { fill: var(--m-border-strong); }
body .layout-content.status .uptime-90-days-wrapper rect[fill="#00875a"] { fill: var(--m-success-emphasis); }

body .layout-content.status .shared-partial.uptime-90-days-wrapper .legend {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 16px;
}
body .layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item,
body .layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item.light {
  color: var(--m-muted-foreground);
  opacity: 1;
}
body .layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item-uptime-value {
  color: var(--m-foreground);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body .layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
  background: var(--m-border);
  opacity: 1;
}

/* Tooltip de las barras */
body #uptime-tooltip .tooltip-box {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  background-color: var(--m-input);
  box-shadow: var(--m-shadow-lg);
  font-family: var(--m-font-sans);
}
body #uptime-tooltip .pointer-container .pointer-larger { border-bottom-color: var(--m-border); }
body #uptime-tooltip .pointer-container .pointer-smaller { border-bottom-color: var(--m-input); }
body #uptime-tooltip .tooltip-box .tooltip-content .date {
  color: var(--m-foreground);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
}
body #uptime-tooltip .tooltip-box .outage-field {
  border: 1px solid var(--m-border-muted);
  border-radius: var(--m-radius-md);
  background-color: var(--m-muted);
}
body #uptime-tooltip .tooltip-box .no-outages-msg,
body #uptime-tooltip .tooltip-box .no-data-msg,
body #uptime-tooltip .tooltip-box .no-related-msg {
  color: var(--m-muted-foreground);
  font-size: 0.75rem;
  line-height: 16px;
}

/* --------------------------------------------------------------------------
   7. Past Incidents (home)
   -------------------------------------------------------------------------- */
body .layout-content.status .incidents-list { margin-top: 56px; }
body .layout-content.status .incidents-list h2#past-incidents,
body .layout-content.status .incidents-list > h2 {
  margin: 0 0 24px;
  color: var(--m-foreground);
  font-size: 1.5rem;     /* title-lg */
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body .layout-content.status .incidents-list .status-day { margin-bottom: 32px; }
body .layout-content.status .incidents-list .status-day .date {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-foreground);
  font-size: 0.875rem;   /* title-sm */
  line-height: 20px;
  font-weight: 500;
}
body .layout-content.status .incidents-list .status-day.no-incidents p {
  margin: 0;
  color: var(--m-muted-foreground);
  font-size: 0.875rem;
  line-height: 20px;
}

body .layout-content.status .incidents-list .incident-container { margin-bottom: 20px; }
body .layout-content.status.status-index .incidents-list .incident-title {
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 500;
}
body .layout-content.status.status-index .incidents-list .incident-title a {
  color: var(--t-fg, var(--m-foreground)) !important;
}

/* Updates como timeline */
body .layout-content.status .incidents-list .update,
body .layout-content.status .unresolved-incident .update {
  --dot: var(--m-muted-foreground);
  position: relative;
  margin: 0;
  padding: 0 0 14px 20px;
  color: var(--m-foreground);
  font-size: 0.875rem;
  line-height: 20px;
}
body .layout-content.status .incidents-list .update::before,
body .layout-content.status .unresolved-incident .update::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dot);
  box-shadow: 0 0 0 3px var(--m-card);
}
body .layout-content.status .incidents-list .update::after,
body .layout-content.status .unresolved-incident .update::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 17px;
  bottom: 0;
  width: 1px;
  background: var(--m-border);
}
body .layout-content.status .incidents-list .update:last-child::after,
body .layout-content.status .unresolved-incident .update:last-child::after { display: none; }
body .layout-content.status .update > br { display: none; }
body .layout-content.status .update strong { font-weight: 600; }
body .layout-content.status .update small {
  display: block;
  margin-top: 2px;
  color: var(--m-muted-foreground);
  font-size: 0.75rem;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

body .layout-content.status .update.investigating { --dot: var(--m-warning-emphasis); }
body .layout-content.status .update.identified    { --dot: var(--m-attention-emphasis); }
body .layout-content.status .update.monitoring,
body .layout-content.status .update.scheduled,
body .layout-content.status .update.in_progress,
body .layout-content.status .update.verifying     { --dot: var(--m-information-emphasis); }
body .layout-content.status .update.resolved,
body .layout-content.status .update.completed     { --dot: var(--m-success-emphasis); }
body .layout-content.status .update.postmortem    { --dot: var(--m-border-selected); }

/* --------------------------------------------------------------------------
   8. Página de incidente (/incidents/:id)
   -------------------------------------------------------------------------- */
body .layout-content.status.status-incident .page-title {
  margin: 0 0 32px;
  text-align: left;
}
body .layout-content.status.status-incident .incident-name {
  margin: 0 0 8px;
  color: var(--t-fg, var(--m-foreground)) !important;
  font-size: 1.5rem;     /* title-lg */
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body .layout-content.status.status-incident .subheader {
  color: var(--m-muted-foreground);
  font-size: 0.875rem;
  line-height: 20px;
}
body .layout-content.status.status-incident .incident-updates-container {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  background: var(--m-card);
  box-shadow: var(--m-shadow-xs);
  overflow: hidden;
}
body .layout-content.status.status-incident .update-row {
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--m-border);
}
body .layout-content.status.status-incident .update-row:first-child { border-top: 0; }
body .layout-content.status.status-incident .update-title {
  margin: 0;
  color: var(--m-foreground);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
}
body .layout-content.status.status-incident .update-body {
  color: var(--m-foreground);
  font-size: 0.875rem;
  line-height: 20px;
}
body .layout-content.status.status-incident .update-timestamp {
  margin-top: 4px;
  color: var(--m-muted-foreground);
  font-size: 0.75rem;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Historial (/history) y Uptime (/uptime)
   -------------------------------------------------------------------------- */
/* Tabs Incidents / Uptime como segmented control */
body .layout-content.status.status-full-history .history-nav {
  margin: 48px 0 32px;
  padding: 0;
  border: 0 !important;
  text-align: left;
}
body .layout-content.status.status-full-history .history-nav ul {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 2px;
  list-style: none;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-md);
  background: var(--m-muted);
}
body .layout-content.status.status-full-history .history-nav li { float: none; margin: 0; }
body .layout-content.status.status-full-history .history-nav a.button {
  display: block;
  margin: 0;
  padding: 7px 14px;
  border: 0 !important;
  border-radius: var(--m-radius-segment);
  background: transparent !important;
  color: var(--m-muted-foreground) !important;
  font-size: 0.875rem;   /* button-md */
  line-height: 14px;
  font-weight: 500;
  text-decoration: none;
}
body .layout-content.status.status-full-history .history-nav a.button.current {
  background: var(--m-input) !important;
  color: var(--m-foreground) !important;
  box-shadow: var(--m-shadow-sm);
}

/* Paginación */
body .layout-content.status.status-full-history .pagination { display: flex; align-items: center; gap: 12px; }
body .layout-content.status.status-full-history .pagination .current {
  color: var(--m-foreground);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
}
body .layout-content.status.status-full-history .pagination a.previous-page,
body .layout-content.status.status-full-history .pagination a.next-page {
  border: 1px solid var(--m-border-input) !important;
  border-radius: var(--m-radius-md);
  background: var(--m-input);
  box-shadow: var(--m-shadow-xs);
}
body .layout-content.status.status-full-history .pagination a.disabled { opacity: .4; box-shadow: none; }

/* Meses e incidentes */
body .layout-content.status.status-full-history .month { margin-bottom: 40px; }
body .layout-content.status.status-full-history .month .month-title {
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-foreground);
  font-size: 1.125rem;   /* title-md */
  line-height: 24px;
  font-weight: 500;
}
body .layout-content.status.status-full-history .month .incident-container {
  margin-bottom: 20px;
}
body .layout-content.status.status-full-history .month .incident-container .incident-title {
  color: var(--t-fg, var(--m-foreground)) !important;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 500;
}
body .layout-content.status.status-full-history .month .incident-container .message {
  margin-top: 4px;
  color: var(--m-foreground);
  font-size: 0.875rem;
  line-height: 20px;
}
body .layout-content.status.status-full-history .month .incident-container .secondary {
  margin-top: 4px;
  color: var(--m-muted-foreground);
  font-size: 0.75rem;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
body .layout-content.status.status-full-history .month .incident-list > .small {
  color: var(--m-muted-foreground);
  font-size: 0.875rem;
  line-height: 20px;
}

/* Calendario de uptime */
body .layout-content.status .uptime-calendar .month-name {
  color: var(--m-foreground);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
}
body .layout-content.status .uptime-calendar .month-uptime {
  color: var(--m-muted-foreground);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
body .layout-content.status .uptime-calendar svg.day {
  border-radius: var(--m-radius-segment);
  overflow: hidden;
}
body .layout-content.status .uptime-calendar svg.day rect[fill="#b3bac5"] { fill: var(--m-border-strong); }

/* Selector de componente (react-select) */
body .layout-content .select-input__control {
  min-height: 36px;
  border: 1px solid var(--m-border-input) !important;
  border-radius: var(--m-radius-control) !important;
  background: var(--m-input) !important;
  box-shadow: var(--m-shadow-xs) !important;
}
body .layout-content .select-input__control--is-focused {
  border-color: var(--m-accent-foreground) !important;
  box-shadow: 0 0 0 3px var(--m-ring) !important;
}
body .layout-content .select-input__single-value {
  color: var(--m-foreground) !important;
  font-size: 0.875rem;
  font-weight: 500;
}
body .layout-content .select-input__menu {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-control) !important;
  box-shadow: var(--m-shadow-lg) !important;
  overflow: hidden;
}
body .layout-content .select-input__option { font-size: 0.875rem; }
body .layout-content .select-input__option--is-focused { background: var(--m-muted) !important; }
body .layout-content .select-input__option--is-selected {
  background: var(--m-accent) !important;
  color: var(--m-accent-foreground) !important;
}

/* --------------------------------------------------------------------------
   10. Desplegable de suscripción y modales
   -------------------------------------------------------------------------- */
body .masthead .updates-dropdown-container .updates-dropdown {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  background: var(--m-input);
  box-shadow: var(--m-shadow-xl);
  overflow: hidden;
  font-family: var(--m-font-sans);
}
body .masthead .updates-dropdown .updates-dropdown-nav {
  background: var(--m-muted);
  border-bottom: 1px solid var(--m-border);
}
body .masthead .updates-dropdown .updates-dropdown-nav a.active {
  box-shadow: inset 0 -2px 0 var(--m-primary);
}
body div[id^="updates-dropdown"] .updates-dropdown-section { background: var(--m-input); }
body .updates-dropdown .directions {
  color: var(--m-muted-foreground);
  font-size: 0.875rem;
  line-height: 20px;
}
body .updates-dropdown label,
body div[id^="subscribe-modal"] label {
  color: var(--m-foreground);
  font-size: 0.75rem;
  line-height: 16px;
  font-weight: 500;
}

/* Inputs — regla iOS: 16px en móvil, 14px a partir de 48rem */
body .updates-dropdown input[type="text"],
body .updates-dropdown input[type="email"],
body .updates-dropdown input[type="tel"],
body .updates-dropdown select,
body div[id^="subscribe-modal"] input[type="text"],
body div[id^="subscribe-modal"] input[type="email"],
body div[id^="subscribe-modal"] select {
  box-sizing: border-box;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--m-border-input);
  border-radius: var(--m-radius-control);
  background: var(--m-input);
  color: var(--m-foreground);
  font-family: var(--m-font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  box-shadow: var(--m-shadow-xs);
}
@media (min-width: 48rem) {
  body .updates-dropdown input[type="text"],
  body .updates-dropdown input[type="email"],
  body .updates-dropdown input[type="tel"],
  body .updates-dropdown select,
  body div[id^="subscribe-modal"] input[type="text"],
  body div[id^="subscribe-modal"] input[type="email"],
  body div[id^="subscribe-modal"] select {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
body .updates-dropdown input:focus,
body .updates-dropdown select:focus,
body div[id^="subscribe-modal"] input:focus {
  outline: none;
  border-color: var(--m-accent-foreground);
  box-shadow: 0 0 0 3px var(--m-ring);
}

body div[id^="subscribe-modal"] {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-xl);
  font-family: var(--m-font-sans);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
body .layout-content .page-footer {
  margin-top: 56px;
  padding: 16px 0 40px;
  border-top: 1px solid var(--m-border) !important;
  color: var(--m-muted-foreground);
  font-size: 0.75rem;
  line-height: 16px;
}
body .layout-content .page-footer a { color: var(--m-muted-foreground); }
body .layout-content .page-footer a:hover { color: var(--m-foreground); }

/* --------------------------------------------------------------------------
   12. Responsive y movimiento reducido
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body .layout-content .masthead-container .masthead { padding-top: 32px; margin-bottom: 32px; }
  body .layout-content .masthead .logo-container img { height: 28px; max-height: 28px; }
  body .layout-content.status.status-index .page-status { padding: 14px 16px; margin-bottom: 32px; }
  body .layout-content.status .components-container .component-container { padding: 14px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body .layout-content *,
  body .layout-content *::before,
  body .layout-content *::after {
    transition: none !important;
    animation: none !important;
  }
}