/* Panel del router. Mismo lenguaje visual que Control y el dashboard: fondo
   oscuro, acento verde, tipografia del sistema. Quien administra pasa de una
   consola a otra y no deberia notar que son tres servicios distintos.

   Reglas de layout que se respetan en todo el archivo:
   - Tipografia fluida con clamp(), nunca px fijos, para que se lea igual en
     1080p y en un ultrawide de 5120px.
   - Todo el contenido dentro de un ancho maximo y centrado: una linea de texto
     de 3000px es ilegible por mucha pantalla que sobre.
   - Unidades relativas dentro de las formulas, para no romper el zoom del
     navegador. */

:root {
  color-scheme: dark;
  --bg: #07090d;
  --panel: #10141c;
  --panel-2: #151b25;
  --ink: #f5f7fb;
  --muted: #8f9baa;
  --soft: #b9c2cf;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --green: #8dffbe;
  --green-2: #36e88f;
  --amber: #ffc95e;
  --red: #ff5f72;
  --radius: 0.5rem;

  /* La raiz crece con moderacion: legible en ultrawide sin inflar 1080p. */
  --type-root: clamp(0.9375rem, 0.12vw + 0.8rem, 1.125rem);
  --type-page: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
  --type-section: clamp(1.05rem, 0.95rem + 0.25vw, 1.3rem);
  --type-body: clamp(0.875rem, 0.82rem + 0.14vw, 1rem);
  --type-meta: clamp(0.78rem, 0.74rem + 0.1vw, 0.9rem);
  --type-label: clamp(0.72rem, 0.69rem + 0.08vw, 0.82rem);

  /* El contenido acompana al ancho de la ventana en vez de quedarse clavado:
     esto es un panel de tablas y tarjetas, no un articulo, y en un monitor
     grande el espacio se aprovecha. Quien cuida la legibilidad es --prose, que
     limita los bloques de texto corrido. El tope solo evita lo absurdo en
     pantallas enormes. */
  --shell: 94vw;
  --prose: 75ch;
  --gutter: clamp(1.125rem, 0.6rem + 1.4vw, 2.5rem);
}

* { box-sizing: border-box; }

html { font-size: var(--type-root); }

body {
  margin: 0;
  padding: 0 0 3.5rem;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--type-body);
  line-height: 1.55;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ── Cabecera y navegacion ─────────────────────────────────────────────── */

.topbar { border-bottom: 1px solid var(--line); }

.topbar > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-block: 1.35rem;
}

.topbar h1 {
  margin: 0.15rem 0 0;
  font-size: var(--type-page);
  line-height: 1.2;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar-status { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.pill {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(54, 232, 143, 0.4);
  border-radius: 999px;
  background: rgba(54, 232, 143, 0.09);
  color: var(--green);
  font-size: var(--type-meta);
  font-weight: 700;
  white-space: nowrap;
}

.pill.muted { border-color: var(--line); background: var(--panel-2); color: var(--muted); }
.pill.warn { border-color: rgba(255, 201, 94, 0.4); background: rgba(255, 201, 94, 0.09); color: var(--amber); }

.tabs { border-bottom: 1px solid var(--line); }

.tabs > .shell {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding-top: 0.85rem;
}

.tabs button {
  padding: 0.6rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.tabs button.active { border-bottom-color: var(--green-2); color: var(--ink); }
.tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }

/* ── Secciones ─────────────────────────────────────────────────────────── */

main { padding-top: 1.6rem; }
.tab { display: none; }
.tab.active { display: block; }

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.section-head h2 {
  margin: 0 0 0.25rem;
  font-size: var(--type-section);
  line-height: 1.25;
}

.section-head p {
  max-width: var(--prose);
  margin: 0;
  color: var(--muted);
  font-size: var(--type-meta);
}

/* ── Tarjetas ──────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 0.75rem; }

.card {
  display: grid;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.card.ok { border-left-color: var(--green-2); }
.card.warn { border-left-color: var(--amber); }
.card.off { border-left-color: var(--muted); opacity: 0.72; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.card-head strong { font-size: var(--type-body); }
.card-head .phone { color: var(--muted); font-size: var(--type-meta); }

.card dl {
  display: grid;
  /* El destino es el dato largo y el que hay que poder leer entero; los demas
     son cortos y no necesitan la misma anchura. Repartirlos por igual cortaba
     la URL mientras al lado sobraba espacio. */
  grid-template-columns:
    minmax(0, 2.6fr) minmax(0, 1.1fr) minmax(0, 0.8fr)
    minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 0.65rem 1.15rem;
  margin: 0;
}

.card dt {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  font-size: var(--type-meta);
}

/* Debajo de este ancho el reparto fijo aprieta demasiado: cada dato pasa a
   ocupar lo que necesita. */
@media (max-width: 60rem) {
  .card dl { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .card dl .wide { grid-column: 1 / -1; }
}

.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Controles ─────────────────────────────────────────────────────────── */

button, .primary {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.primary { border-color: rgba(54, 232, 143, 0.45); background: rgba(54, 232, 143, 0.12); color: var(--green); }
button:hover, .primary:hover { border-color: var(--line-strong); }
button:focus-visible, .primary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
.danger { border-color: rgba(255, 95, 114, 0.4); color: #ff9595; }

.panel {
  display: grid;
  gap: 1rem;
  max-width: 45rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

/* Cada campo es una rejilla de tres filas: etiqueta, control y ayuda.
   `align-content: start` es lo que impide que un campo sin ayuda estire sus
   filas y deje su input desalineado frente al de al lado. */
label {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
  color: var(--soft);
  font-size: var(--type-label);
  font-weight: 800;
}

label small {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.45;
}

input, textarea, select {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 500;
}

textarea { min-height: auto; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
input[readonly] { cursor: default; color: var(--soft); background: rgba(255, 255, 255, 0.035); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 500;
}

.check input { width: auto; min-height: auto; margin-top: 0.2rem; }
.check span { color: var(--muted); font-size: var(--type-meta); }

/* Dos columnas solo cuando hay sitio de verdad. `auto-fit` con `minmax` evita
   el salto brusco de una media query. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem 1rem;
  align-items: start;
}

/* ── Dialogo ───────────────────────────────────────────────────────────── */

dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--type-body);
}

dialog::backdrop { background: rgba(0, 0, 0, 0.62); }

dialog form {
  display: grid;
  gap: 0.9rem;
  max-height: calc(100vh - 2rem);
  padding: 1.4rem;
  overflow-y: auto;
}

dialog h2 { margin: 0; font-size: var(--type-section); line-height: 1.25; }

menu {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0.25rem 0 0;
  padding: 0;
}

/* ── Estados ───────────────────────────────────────────────────────────── */

.error { min-height: 1em; margin: 0; color: #ff9595; font-size: var(--type-meta); }

.empty {
  max-width: var(--prose);
  padding: 1.6rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.flash {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: min(28rem, calc(100vw - 2.5rem));
  padding: 0.75rem 1rem;
  border: 1px solid rgba(54, 232, 143, 0.45);
  border-radius: var(--radius);
  background: rgba(16, 20, 28, 0.96);
  color: var(--green);
  font-size: var(--type-meta);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .tabs button, button, .primary { transition: border-color 120ms ease, color 120ms ease; }
}

/* ── Alarma de politica de Meta ─────────────────────────────────────────────
   Una sancion de Meta tiene que doler a la vista: una advertencia sin atender
   se convierte en bloqueo a los 7 dias y ese cliente se queda sin Messenger.
   Por eso la franja va sobre el contenido, en rojo, en cualquier pestana, y no
   se puede cerrar: desaparece cuando el aviso se marca como atendido. */

.alarm {
  width: 100%;
  max-width: var(--shell);
  margin: 1.1rem auto 0;
  padding: 1rem clamp(1rem, 0.6rem + 1vw, 1.6rem);
  border: 1px solid rgba(255, 95, 114, 0.55);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  background: rgba(255, 95, 114, 0.12);
  /* La animacion es la que hace que no se confunda con el resto del panel.
     Se respeta a quien pidio menos movimiento: el color ya alcanza. */
  animation: alarm-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .alarm { animation: none; }
}

@keyframes alarm-pulse {
  0%, 100% { border-left-color: var(--red); background: rgba(255, 95, 114, 0.12); }
  50% { border-left-color: #ff97a4; background: rgba(255, 95, 114, 0.22); }
}

.alarm h2 {
  margin: 0 0 0.3rem;
  color: #ff9595;
  font-size: var(--type-section);
}

.alarm p { margin: 0 0 0.35rem; max-width: var(--prose); }
.alarm .alarm-meta { color: var(--soft); font-size: var(--type-meta); }
.alarm menu { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.7rem 0 0; padding: 0; }

/* Contador en la pestana: el numero de avisos sin atender. */
.badge {
  display: inline-block;
  min-width: 1.35em;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--red);
  color: #1a0308;
  font-size: var(--type-label);
  font-weight: 800;
  text-align: center;
}

.card.alarma { border-left-color: var(--red); background: rgba(255, 95, 114, 0.07); }
.card.atendida { opacity: 0.72; }
.card .motivo { margin: 0; color: var(--soft); max-width: var(--prose); }
.card .cuenta-atras { color: #ff9595; font-weight: 700; }

/* ── Caudal por ruta ───────────────────────────────────────────────────────
   El medidor es una barra y no un numero suelto porque la pregunta que se le
   hace al panel es comparativa: quien va disparado respecto de los demas. El
   ancho va en porcentaje para que siga funcionando de 1080p a ultrawide. */

.sub {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nota {
  color: var(--muted);
  font-size: var(--type-meta);
  max-width: var(--prose);
}

.medidor {
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.medidor > span {
  display: block;
  height: 100%;
  background: var(--green-2);
  transition: width 0.3s ease;
}

.card.warn .medidor > span { background: var(--amber); }
.card.alarma .medidor > span { background: var(--red); }