/**
 * style/panel.css — Panel de estado, /fronteras/geoservicios/
 *
 * NO ES UN SEGUNDO DISEÑO. La caja, el "Volver", el título centrado y el pie
 * salen de style/base.css, que es la misma hoja que carga la consulta. Lo único
 * propio de acá es la grilla de un servicio y sus tres luces.
 *
 * Los dos huecos verticales —del título al contenido y de lo último al pie— son
 * los mismos que en las páginas de texto y en la consulta. El porqué del
 * segundo está en style/text.css, donde está medido.
 */

/* 65 Y NO 47, medido contra las otras páginas. Las de texto ponen 47 en la
   cabecera MÁS el relleno de arriba del <main>, y entre el título y el contenido
   quedan 65. Acá no hay <main> con relleno propio, así que los 47 solos dejarían
   el contenido más arriba que en el resto del sitio: el número coincidiría y la
   distancia no. */
.panel-cabecera { margin-bottom: 65px; }

.barra { margin: 0 0 24px; }

.pais {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 12px;
}
.pais h2 {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  margin: 0 0 10px;
}

/* Tres columnas: la luz, quién es, y el dato. El motivo del error, cuando lo
   hay, ocupa de la segunda columna hasta el final, debajo. */
.serv {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.serv:first-of-type { border-top: 0; }

/* El protocolo —wfs, rest— al lado del nombre del organismo: lo califica a él,
   no a la capa. En mono porque es un dato técnico y no una palabra de la
   oración, y más gris que el nombre para que no le compita: lo primero que hay
   que leer en ese renglón es de quién es el servicio. */
.serv .tipo {
  font-family: var(--mono); text-transform: lowercase;
  font-size: .86em; color: var(--ink2);
}

/* EL NOMBRE DE LA CAPA, en gris: es el dato con el que se le escribe al
   organismo si algo deja de andar, no lo que se lee primero. Lo primero es de
   quién es el servicio, y eso lo decide el contraste entre los dos. */
.serv .clave { color: var(--ink2); }

/* EL TIEMPO DE RESPUESTA, en mono: son cifras que se comparan de una fila a la
   otra, y en mono quedan alineadas porque todos los dígitos miden igual. */
.serv .dato { font-family: var(--mono); }

/* Mientras se mide, una barra del ancho de un tiempo y no un guión: el guión
   dice "no hay dato" y acá lo que pasa es que todavía no llegó. El ancho es el
   de "1234 ms", así que al llegar el número la columna no se mueve.

   `align-self: start` ES LO QUE HACE QUE LA FILA TAMPOCO SE MUEVA. La fila
   alinea sus celdas por la LÍNEA DE BASE del texto, y la barra no tiene texto:
   sin una línea de base propia, el navegador usa su borde de abajo, así que
   para alinearlo con la primera línea del nombre la empuja hacia arriba y la
   fila crece seis píxeles. Al llegar el número la fila se encogía de golpe.
   Alineada al principio queda exactamente donde va a quedar el número. */
.serv .dato.esqueleto { width: 7ch; align-self: start; }

/* El motivo de una falla ocupa el ancho entero de la fila. Metido en la columna
   del nombre quedaría partido en una palabra por renglón, que es ilegible justo
   cuando hay que leerlo. */
.serv .motivo { grid-column: 1 / -1; margin: 4px 0 0; }

/* ── LOS DOS FILTROS DE ARRIBA ────────────────────────────────────────────
   Mismo pill que el segmentado de la consulta: quien usa las dos pantallas
   reconoce la forma. Marcado se ve hundido, y eso lo dice el borde y el fondo,
   no sólo el color — la misma regla que las luces. */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filtros { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--ink2);
  font: inherit; font-size: 14px; cursor: pointer;
}
.pill .n { font-family: var(--mono); color: var(--ink); }
.pill:hover { border-color: var(--ink2); }
.pill[aria-pressed="true"] {
  background: var(--panel); border-color: var(--ink2); color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── LA FLECHA DEL BOTÓN DE ACTUALIZAR ────────────────────────────────────
   Gira sólo mientras dura la corrida. Quien pidió menos movimiento no la ve
   girar: para esa persona el botón igual dice que está ocupado con aria-busy,
   que es lo que lee un lector de pantalla. */
#correr { display: inline-flex; align-items: center; gap: 8px; }
.refrescar { width: 15px; height: 15px; flex: 0 0 auto; }
#correr.girando .refrescar { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #correr.girando .refrescar { animation: none; }
}

/* TRES ESTADOS Y NO DOS. "Esperando" existe porque un servicio que tarda
   cuarenta segundos y contesta no es lo mismo que uno caído, y mientras la
   corrida avanza hay que poder distinguirlos.

   Y el color NO es lo único que los distingue: al lado de cada luz está el
   tiempo y, si falló, el motivo escrito. Quien no distingue rojo de verde lee
   igual qué pasó — es la misma regla que en el resultado de la consulta. */
.luz { width: 10px; height: 10px; border-radius: 50%; }
.luz.espera { background: var(--border-md, #bbb); }
.luz.bien   { background: #2e7d32; }
.luz.mal    { background: #c62828; }

@media (max-width: 640px) {
  .serv { grid-template-columns: 14px 1fr; }
  .dato { grid-column: 2; text-align: left; }
}