:root {
  color-scheme: light dark;

  --brand: #000000;

  --font:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --bg: #ffffff;
  --surface: #ffffff;

  --text: #17191c;
  --text-secondary: #555b64;
  --muted: #9298a1;

  --border: #e1e4e8;
  --bar-empty: #e7e9ec;

  --green: #22b887;
  --green-soft: #e4f8f1;
  --green-border: #42c89f;

  --red: #e85f63;
  --red-soft: #fcebec;
  --red-border: #ed777a;

  --orange: #df9635;
  --orange-soft: #fff4e5;
  --orange-border: #e8ad61;

  --blue: #648bdc;
  --blue-soft: #edf2fc;
  --blue-border: #8ba8e5;
}


/* -------------------------------------------------------
   BASE
------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family: var(--font);

  -webkit-font-smoothing: antialiased;
}

.page {
  width: min(920px, calc(100% - 32px));

  margin: 0 auto;
  padding: 38px 0 70px;
}


/* -------------------------------------------------------
   CABECERA / LOGO
------------------------------------------------------- */

.brand-header {
  margin-bottom: 40px;
}

.brand-logo-slot {
  /*
   * Espacio reservado fijo independientemente
   * de las proporciones de cada marca.
   */
  width: 100%;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
}

.brand-logo {
  /*
   * ALTURA fija / ancho automático.
   * Nunca se recorta.
   */
  display: block;

  width: auto;
  height: 56px;

  max-width: min(320px, 80vw);

  object-fit: contain;
  object-position: center;

  overflow: visible;
}

.brand-fallback {
  margin: 0;

  text-align: center;

  font-size: 28px;
  font-weight: 650;

  letter-spacing: -.5px;
}


/* -------------------------------------------------------
   ESTADO GENERAL
------------------------------------------------------- */

.overall {
  margin-bottom: 24px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
}

.overall-head {
  min-height: 56px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 15px 20px;
}

.overall-body {
  padding: 18px 20px;

  border-top: 1px solid rgba(128,128,128,.12);

  color: var(--text-secondary);

  font-size: 14px;
  line-height: 1.5;
}

.status-symbol {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  font-size: 12px;
  font-weight: 750;
}


/* OK */

.overall.ok {
  border-color: var(--green-border);
}

.overall.ok .overall-head {
  background: var(--green-soft);
}

.overall.ok .status-symbol {
  background: var(--green);
}


/* DEGRADADO */

.overall.degraded {
  border-color: var(--orange-border);
}

.overall.degraded .overall-head {
  background: var(--orange-soft);
}

.overall.degraded .status-symbol {
  background: var(--orange);
}


/* DOWN */

.overall.down {
  border-color: var(--red-border);
}

.overall.down .overall-head {
  background: var(--red-soft);
}

.overall.down .status-symbol {
  background: var(--red);
}


/* MANTENIMIENTO */

.overall.maintenance {
  border-color: var(--blue-border);
}

.overall.maintenance .overall-head {
  background: var(--blue-soft);
}

.overall.maintenance .status-symbol {
  background: var(--blue);
}


/* UNKNOWN */

.overall.unknown .overall-head {
  background: #f3f4f6;
}

.overall.unknown .status-symbol {
  background: #979da5;
}


/* -------------------------------------------------------
   INCIDENTES / MANTENIMIENTO
------------------------------------------------------- */

.notice {
  margin-bottom: 14px;

  padding: 18px 20px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
}

.notice h3 {
  margin: 0 0 7px;

  font-size: 15px;
  font-weight: 650;
}

.notice-content {
  color: var(--text-secondary);

  font-size: 14px;
  line-height: 1.5;
}

.notice-date {
  margin-top: 9px;

  color: var(--muted);

  font-size: 12px;
}

.notice.danger {
  border-color: var(--red-border);
  background: var(--red-soft);
}

.notice.warning {
  border-color: var(--orange-border);
  background: var(--orange-soft);
}

.notice.info {
  border-color: var(--blue-border);
  background: var(--blue-soft);
}

/*
 * Los incidentes "primary" usan el color de marca,
 * pero de manera MUY suave.
 */
.notice.brand {
  border-color:
    color-mix(
      in srgb,
      var(--brand) 50%,
      var(--border)
    );

  background:
    color-mix(
      in srgb,
      var(--brand) 5%,
      var(--surface)
    );
}

.notice.maintenance {
  border-color: var(--blue-border);
  background: var(--blue-soft);
}


/* -------------------------------------------------------
   SISTEMAS
------------------------------------------------------- */

.system-card {
  margin-top: 28px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
}

.system-card-header {
  min-height: 62px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  border-bottom: 1px solid var(--border);
}

.system-card-header h2 {
  margin: 0;

  font-size: 18px;
  font-weight: 650;
}

.group-heading {
  padding: 16px 20px 7px;

  color: var(--muted);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;
}

.monitor {
  padding: 17px 20px 20px;

  border-bottom: 1px solid var(--border);
}

.monitor:last-child {
  border-bottom: 0;
}

.monitor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.monitor-name-wrap {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 11px;
}


/* ICONOS DE SERVICIO */

.service-icon {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background: var(--brand);
  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  overflow: hidden;
}

.service-icon.image-mode {
  background: transparent;

  border-radius: 0;

  overflow: visible;
}

.service-icon.image-mode img {
  display: block;

  width: auto;
  height: 22px;

  max-width: 30px;

  object-fit: contain;
}


/* TEXTO SERVICIO */

.monitor-name {
  font-size: 15px;
  font-weight: 600;
}

.monitor-name a {
  color: inherit;

  text-decoration: none;
}

.monitor-name a:hover {
  text-decoration: underline;
}

.monitor-subtitle {
  margin-top: 2px;

  color: var(--muted);

  font-size: 12px;
}

.uptime {
  white-space: nowrap;

  color: var(--muted);

  font-size: 14px;
}

.uptime strong {
  color: var(--text-secondary);

  font-weight: 500;
}


/* -------------------------------------------------------
   BARRAS
------------------------------------------------------- */

.bars {
  width: 100%;
  height: 19px;

  display: grid;
  grid-template-columns: repeat(90, minmax(0, 1fr));

  gap: 3px;

  margin-top: 13px;
}

.bar {
  min-width: 0;
  height: 19px;

  border-radius: 2px;

  background: var(--bar-empty);
}

.bar.up {
  background: var(--green);
}

.bar.down {
  background: var(--red);
}

.bar.pending {
  background: var(--orange);
}

.bar.maintenance {
  background: var(--blue);
}

.monitor-meta {
  margin-top: 7px;

  display: flex;
  justify-content: space-between;

  gap: 15px;

  color: var(--muted);

  font-size: 11px;
}


/* -------------------------------------------------------
   HISTORIAL 15 DÍAS
------------------------------------------------------- */

.history-section {
  margin-top: 38px;
}

.history-section > h2 {
  margin: 0 0 14px;

  font-size: 18px;
  font-weight: 650;
}

.day-history {
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
}

.day-row {
  padding: 16px 20px;

  border-bottom: 1px solid var(--border);
}

.day-row:last-child {
  border-bottom: 0;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
}

.day-date {
  font-size: 14px;
  font-weight: 600;

  text-transform: capitalize;
}

.day-clear {
  display: flex;
  align-items: center;

  gap: 7px;

  color: var(--green);

  font-size: 13px;
  font-weight: 550;
}

.day-clear-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--green);
}

.day-events {
  margin-top: 11px;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

.history-event {
  display: grid;

  grid-template-columns: 9px 1fr;

  gap: 10px;
}

.history-event-dot {
  width: 8px;
  height: 8px;

  margin-top: 5px;

  border-radius: 50%;

  background: var(--orange);
}

.history-event.outage
.history-event-dot {
  background: var(--red);
}

.history-event.maintenance
.history-event-dot {
  background: var(--blue);
}

.history-event-title {
  font-size: 13px;
  font-weight: 600;
}

.history-event-time {
  margin-top: 2px;

  color: var(--muted);

  font-size: 11px;
}

.history-event-content {
  margin-top: 4px;

  color: var(--text-secondary);

  font-size: 12px;
  line-height: 1.45;
}


/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */

.site-footer {
  margin-top: 39px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  text-align: center;
}

.footer-update {
  color: #a0a5ac;

  font-size: 11px;
}

.provider {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  color: #777d85;

  font-size: 11px;
}

.provider-logo {
  display: block;

  width: auto;
  height: 19px;

  opacity: .57;
}


/* =======================================================
   DARK MODE
======================================================= */

@media (prefers-color-scheme: dark) {

  :root {
    --bg: #111315;
    --surface: #171a1d;

    --text: #f1f2f4;
    --text-secondary: #bdc2c8;
    --muted: #8f969f;

    --border: #2c3136;
    --bar-empty: #30353a;

    /*
     * Tintes oscuros MUCHO más discretos.
     */
    --green: #31bf94;
    --green-soft: #142921;
    --green-border: #276c56;

    --red: #e36a6d;
    --red-soft: #2b1a1c;
    --red-border: #794044;

    --orange: #d99b4b;
    --orange-soft: #292116;
    --orange-border: #705632;

    --blue: #718fd1;
    --blue-soft: #1b2230;
    --blue-border: #3e527d;
  }


  .overall.unknown .overall-head {
    background: #202327;
  }


  /*
   * Primary de marca:
   * apenas un tinte, no esa masa marrón anterior.
   */
  .notice.brand {
    border-color:
      color-mix(
        in srgb,
        var(--brand) 38%,
        var(--border)
      );

    background:
      color-mix(
        in srgb,
        var(--brand) 6%,
        var(--surface)
      );
  }


  /*
   * Todos los logos actuales son originalmente negros.
   */
  .brand-logo,
  .service-icon.image-mode img {
    filter: invert(1) brightness(.94);
  }


  /*
   * Logo del proveedor:
   * gris claro controlado.
   */
  .provider-logo {
    filter: invert(1) brightness(.85);

    opacity: .62;
  }


  .footer-update {
    color: #777f88;
  }


  .provider {
    color: #969da5;
  }
}


/* -------------------------------------------------------
   MÓVIL
------------------------------------------------------- */

@media (max-width: 650px) {

  .page {
    width: min(
      100% - 24px,
      920px
    );

    padding-top: 24px;
  }


  .brand-header {
    margin-bottom: 30px;
  }


  .brand-logo-slot {
    height: 62px;
  }


  .brand-logo {
    height: 48px;

    max-width: 75vw;
  }


  .bars {
    grid-template-columns:
      repeat(60, minmax(0,1fr));

    gap: 2px;
  }


  /*
   * En móvil mostramos los últimos 60 huecos.
   */
  .bar:nth-child(-n+30) {
    display: none;
  }


  .monitor {
    padding-left: 16px;
    padding-right: 16px;
  }


  .system-card-header {
    padding-left: 16px;
    padding-right: 16px;
  }


  .day-row {
    padding: 15px 16px;
  }


  .monitor-top {
    align-items: flex-start;
  }


  .uptime {
    font-size: 12px;
  }

}


/* Incidencia activa / reciente */

.incident-range {
  color: var(--red);
  font-weight: 650;
}

.current-down {
  color: var(--red);
  font-weight: 650;
}

.uptime:has(+ *) {
  transition: color .15s ease;
}


/* =======================================================
   HISTORIAL — diseño abierto
======================================================= */

.history-section {
  margin-top: 44px;
}

.history-section > h2 {
  margin: 0 0 27px;

  font-size: 20px;
  font-weight: 650;
}


.day-history {
  border: 0;
  border-radius: 0;

  background: transparent;

  overflow: visible;
}


.history-day {
  margin-bottom: 38px;
}


.history-day-header {
  font-size: 18px;
  font-weight: 650;

  text-transform: capitalize;
}


.history-day-rule {
  height: 1px;

  margin-top: 9px;

  background: var(--border);
}


.history-empty {
  margin-top: 16px;

  color: var(--muted);

  font-size: 15px;
}


.history-item {
  margin-top: 18px;
}


.history-item + .history-item {
  margin-top: 25px;
}


.history-item h3 {
  margin: 0 0 10px;

  font-size: 17px;
  font-weight: 650;
}


.history-description {
  color: var(--text);

  font-size: 14px;
  line-height: 1.5;
}


.history-timestamp {
  margin-top: 6px;

  color: var(--muted);

  font-size: 12px;
}


/* colores del título según el tipo */

.history-outage h3 {
  color: var(--red);
}

.history-maintenance h3 {
  color: var(--blue);
}

.history-manual h3 {
  color: var(--orange);
}


@media (prefers-color-scheme: dark) {

  .history-empty {
    color: #8d949c;
  }

}


/* Fecha de actualización en la tarjeta general */

.overall-head {
  justify-content: space-between;
}

.overall-title {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 11px;
}

.overall-updated {
  flex: 0 0 auto;

  margin-left: 20px;

  color: var(--muted);

  font-size: 11px;
  font-weight: 450;

  white-space: nowrap;
}


@media (max-width: 650px) {

  .overall-head {
    align-items: flex-start;
    flex-direction: column;

    gap: 8px;
  }

  .overall-updated {
    margin-left: 31px;

    white-space: normal;
  }

}


/* Proveedor del sistema */

.provider-link {
  display: flex;
  align-items: center;

  color: inherit;
  text-decoration: none;
}

.provider-logo {
  height: 23px;
  width: auto;

  transition:
    opacity .15s ease,
    transform .15s ease;
}

.provider-link:hover .provider-logo {
  opacity: .78;
  transform: translateY(-1px);
}


/* Hora relativa del estado general */

.overall-updated {
  color: var(--text);

  font-size: 13px;
  font-weight: 500;

  opacity: .9;
}


@media (prefers-color-scheme: dark) {

  .overall-updated {
    color: var(--text);
    opacity: .92;
  }

}


/* Explicación adicional de incidencias */

.overall-summary {
  font-weight: 500;
}

.overall-detail {
  margin-top: 10px;

  max-width: 780px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.55;
}


/* Mantenimiento programado / activo */

.maintenance-phase {
  margin-bottom: 6px;

  color: var(--blue);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .045em;
  text-transform: uppercase;
}

/* Horario del mantenimiento */
.maintenance-schedule {
  margin-top: 13px;

  color: var(--text-secondary);

  font-size: 13px;
  font-weight: 500;
}