/* Estilos del monitor. Un solo archivo servido desde el propio origen: la
   política de seguridad de contenido no admite nada externo. */

:root {
  --fondo: #f7f7f8;
  --tinta: #1c1c1e;
  --suave: #6b6b73;
  --borde: #d9d9e0;
  --tarjeta: #ffffff;
  --sana: #1a7f4b;
  --degradada: #9a6700;
  --caida: #b3261e;
  --desconocida: #6b6b73;
  /* Tintes de fondo de los dos estados que hay que atender. Muy claros a
     propósito: tiñen la fila sin competir con el texto que lleva encima. */
  --caida-tenue: #fdf1f0;
  --degradada-tenue: #fdf6e7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--tinta);
  background: var(--fondo);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
}

.top h1 {
  margin: 0;
  font-size: 1.1rem;
}

/* Navegación y sesión son un solo bloque a la derecha, con el mismo lenguaje
   visual: pastillas con borde, sin subrayado y separadas entre sí. */
.session {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.logout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user {
  color: var(--suave);
}

main {
  padding: 1.5rem;
}

footer {
  padding: 1rem 1.5rem 2rem;
  color: var(--suave);
}

button {
  padding: 0.45rem 0.9rem;
  font: inherit;
  color: var(--tarjeta);
  background: var(--tinta);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.card {
  max-width: 26rem;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
}

.card h2 {
  margin-top: 0;
  font-size: 1rem;
}

.login form {
  display: grid;
  gap: 0.35rem;
}

.login input {
  padding: 0.5rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
}

.login button {
  margin-top: 1rem;
}

.hint {
  color: var(--suave);
}

.alert {
  padding: 0.6rem 0.8rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 6px;
}

.alert.error {
  color: var(--caida);
  border-color: var(--caida);
}

/* Los cuatro conteos, en tarjetas. El número manda: es lo que se lee de un
   vistazo desde el otro lado del escritorio. */
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.counter {
  padding: 0.9rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde);
  border-radius: 10px;
}

.counter p {
  margin: 0;
}

.counter .figure {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.counter .label {
  margin-top: 0.15rem;
  color: var(--suave);
}

.counter .of {
  color: var(--suave);
}

/* Un conteo de problemas en cero es una buena noticia, y una buena noticia no
   necesita color: se apaga para que el ojo pase de largo. */
.counter.quiet .figure {
  color: var(--suave);
  font-weight: 600;
}

.counter.bad.loud {
  border-color: var(--caida);
  background: var(--caida-tenue);
}

.counter.bad.loud .figure,
.counter.bad.loud .label {
  color: var(--caida);
}

.counter.warn.loud {
  border-color: var(--degradada);
  background: var(--degradada-tenue);
}

.counter.warn.loud .figure,
.counter.warn.loud .label {
  color: var(--degradada);
}

.counter.bad.loud .label,
.counter.warn.loud .label {
  font-weight: 600;
}

.reading {
  margin: 0 0 1rem;
}

table {
  width: 100%;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  /* Sin `overflow: hidden`, que redondeaba las esquinas a costa de romper el
     encabezado fijo: cualquier ancestro con el desbordamiento recortado se
     convierte en el contenedor contra el que se pega `position: sticky`, y el
     encabezado no llegaría nunca a la ventana.

     Y `separate` en vez de `collapse`, que era lo que había: con los bordes
     fundidos, el navegador ignora el redondeo de la tabla —lo tapaba el
     `overflow`— y además las celdas pegadas pierden su borde inferior, porque
     al fundirse el borde se queda con la tabla y no viaja con la celda. Con
     `border-spacing: 0` no se separa ninguna celda y no hay bordes dobles:
     cada una dibuja solo el de abajo. */
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
}

/* Con 34 filas el encabezado se va de la pantalla al segundo desplazamiento, y
   sin él las nueve columnas son nueve valores sin nombre. */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--suave);
  background: var(--tarjeta);
  /* `border-bottom` no viaja con una celda pegada —el borde se queda con la
     tabla—, de modo que la línea de separación la pinta una sombra. */
  box-shadow: inset 0 -1px 0 var(--borde);
}

thead th:first-child {
  border-top-left-radius: 10px;
}

thead th:last-child {
  border-top-right-radius: 10px;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

.tag,
.chip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.8rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}

/* Una instalación sana no tiene que llamar la atención: el estado se lee
   apagado y el ojo pasa de largo. Las otras tres sí. */
.tag.sana {
  color: var(--suave);
  border-color: var(--borde);
}

.tag.degradada {
  color: var(--tarjeta);
  background: var(--degradada);
  border-color: var(--degradada);
  font-weight: 600;
}

.tag.caida {
  color: var(--tarjeta);
  background: var(--caida);
  border-color: var(--caida);
  font-weight: 600;
}

.tag.desconocida {
  color: var(--desconocida);
  border-style: dashed;
}

.chip {
  margin: 0 0.2rem 0.2rem 0;
}

.chip.up {
  color: var(--sana);
}

.chip.down {
  color: var(--caida);
}

.unknown {
  color: var(--suave);
}

/* La jerarquía de la tabla: el nombre de la empresa es lo que se busca cuando
   algo está mal, y lo que sobra cuando todo está bien. Una barra en el canto
   izquierdo marca la fila entera sin necesidad de leerla. */
tbody th[scope="row"] {
  /* La barra es una sombra interior y no un `border-left`: un borde de 4 px,
     aunque fuera transparente, le ganaría al de 1 px de la tabla —en un empate
     de bordes gana el más ancho— y le borraría el canto izquierdo a todas las
     filas. La sombra no compite con nadie. */
  box-shadow: inset 4px 0 0 transparent;
  font-weight: 400;
  color: var(--suave);
}

tr.row-caida th[scope="row"] {
  color: var(--caida);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--caida);
}

tr.row-degradada th[scope="row"] {
  color: var(--tinta);
  font-weight: 600;
  box-shadow: inset 4px 0 0 var(--degradada);
}

tr.row-desconocida th[scope="row"] {
  color: var(--tinta);
  box-shadow: inset 4px 0 0 var(--desconocida);
}

tbody tr.row-caida {
  background: var(--caida-tenue);
}

tbody tr.row-degradada {
  background: var(--degradada-tenue);
}

tr.note td {
  padding-top: 0;
  color: var(--degradada);
  border-bottom: 1px solid var(--borde);
}

tr.note.for-caida {
  background: var(--caida-tenue);
}

tr.note.for-caida td {
  color: var(--caida);
}

tr.note.for-degradada {
  background: var(--degradada-tenue);
}

/* Menú de la cabecera. Dos pantallas: el estado y la configuración del correo. */

.menu {
  display: flex;
  gap: 0.5rem;
}

.menu a {
  padding: 0.45rem 0.9rem;
  color: var(--suave);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.menu a:hover {
  color: var(--tinta);
  border-color: var(--suave);
}

/* La página actual, con el mismo relleno sólido que el botón de la derecha:
   dónde se está no puede deducirse leyendo la barra de direcciones. */
.menu a.current {
  color: var(--tarjeta);
  background: var(--tinta);
  border-color: var(--tinta);
  font-weight: 600;
}

.menu a.current:hover {
  color: var(--tarjeta);
}

/* Configuración del resumen diario. */

.settings {
  max-width: 44rem;
}

.settings h2 {
  margin-top: 0;
  font-size: 1rem;
}

.settings h3 {
  margin-top: 2rem;
  font-size: 0.9rem;
}

.settings-form {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 1.25rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
}

.settings-form label {
  font-weight: 600;
}

.settings-form .hint {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
}

.settings-form textarea,
.settings-form input[type="time"] {
  padding: 0.5rem;
  font: inherit;
  color: inherit;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
}

.settings-form textarea {
  resize: vertical;
}

.settings-form input[type="time"] {
  justify-self: start;
}

.settings-form .check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-weight: 400;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}

button.secondary {
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
}

.alert.ok {
  color: var(--sana);
  border-color: var(--sana);
}

.changes {
  margin-top: 0.5rem;
}

code {
  padding: 0.05rem 0.25rem;
  font-size: 0.9em;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 4px;
}