@import url('/fuentes/fuentes.css');

/* Panel del VPS — sistema visual importado de Claude Design
   ("Server Panel Mobile Design", 4/11/2026). Ver DISENO.md.

   Los valores de color, tamaño y espaciado vienen del diseño tal cual; lo que
   cambió al traerlo es el idioma (castellano) y que las fuentes se sirven
   desde este mismo servidor en vez de Google Fonts. */

/* ---------------------------------------------------------------- tokens */

:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg:     oklch(0.165 0.006 255);
  --bg2:    oklch(0.215 0.007 255);
  --sheet:  oklch(0.195 0.007 255);
  --line:   oklch(0.32 0.008 255);
  --line2:  oklch(0.25 0.007 255);
  --skel:   oklch(0.26 0.007 255);
  --fg:     oklch(0.94 0.004 255);
  --fg2:    oklch(0.77 0.008 255);
  --fg3:    oklch(0.68 0.008 255);
  --ok:     oklch(0.80 0.15 152);
  --warn:   oklch(0.83 0.14 80);
  --down:   oklch(0.74 0.17 25);
  --paused: oklch(0.79 0.07 255);
}

/* El diseño traía el tema fijo en oscuro con un botón que lo cambia. Acá el
   sistema manda por defecto y el botón sólo pisa esa elección, que se guarda.
   Por eso el bloque claro aparece dos veces: una por preferencia del sistema,
   otra forzada por el botón. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg:     oklch(0.985 0.003 255);
    --bg2:    oklch(0.955 0.004 255);
    --sheet:  oklch(0.99 0.003 255);
    --line:   oklch(0.86 0.006 255);
    --line2:  oklch(0.92 0.005 255);
    --skel:   oklch(0.92 0.005 255);
    --fg:     oklch(0.20 0.01 255);
    --fg2:    oklch(0.40 0.01 255);
    --fg3:    oklch(0.47 0.01 255);
    --ok:     oklch(0.49 0.13 152);
    --warn:   oklch(0.51 0.12 70);
    --down:   oklch(0.52 0.19 25);
    --paused: oklch(0.47 0.08 255);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg:     oklch(0.985 0.003 255);
  --bg2:    oklch(0.955 0.004 255);
  --sheet:  oklch(0.99 0.003 255);
  --line:   oklch(0.86 0.006 255);
  --line2:  oklch(0.92 0.005 255);
  --skel:   oklch(0.92 0.005 255);
  --fg:     oklch(0.20 0.01 255);
  --fg2:    oklch(0.40 0.01 255);
  --fg3:    oklch(0.47 0.01 255);
  --ok:     oklch(0.49 0.13 152);
  --warn:   oklch(0.51 0.12 70);
  --down:   oklch(0.52 0.19 25);
  --paused: oklch(0.47 0.08 255);
}

:root {
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --padX: 16px;
}
@media (min-width: 960px) { :root { --padX: 28px; } }

/* ----------------------------------------------------------------- base */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--fg); }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.mono { font-family: var(--mono); }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.romper { overflow-wrap: anywhere; }

.et {
  font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg2);
}

.c-ok { color: var(--ok); } .c-warn { color: var(--warn); }
.c-down { color: var(--down); } .c-paused { color: var(--paused); }
.c-fg2 { color: var(--fg2); } .c-fg3 { color: var(--fg3); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- login */

.login {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login form {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 16px;
}
.login .sitio { font-family: var(--mono); font-size: 13px; color: var(--fg2); }
.login h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.login label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--fg2);
}
.login input {
  min-height: 48px; padding: 0 12px;
  font-size: 16px;            /* 16px evita que iOS haga zoom al enfocar */
  font-family: var(--mono);
  background: var(--bg2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px;
}
.login input[aria-invalid="true"] { border-color: var(--down); }
.login .mal {
  font-family: var(--mono); font-size: 13px;
  color: var(--down); line-height: 1.4;
}
.login .entrar {
  min-height: 48px; border: 0; border-radius: 8px;
  background: var(--fg); color: var(--bg);
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.login .entrar[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------------ app */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh; min-height: 100svh;
}
main { min-width: 0; padding-bottom: 104px; }

/* ------------------------------------------------------------- veredicto */

.veredicto {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top) + 14px) var(--padX) 12px;
  display: flex; align-items: flex-start; gap: 12px;
}
.veredicto .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.veredicto .titular {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 28px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15;
  transition: color .3s;
}
.veredicto .titular .glifo { font-family: var(--mono); font-size: 22px; }
.veredicto .sub {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--fg2); overflow-wrap: anywhere;
}
.refrescar {
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--fg);
  font-family: var(--mono); font-size: 20px; cursor: pointer;
}
.refrescar:hover { background: var(--bg2); }
.refrescar[disabled] { color: var(--fg3); cursor: progress; }

/* ------------------------------------------------------------- problemas */

.problemas { padding: 6px var(--padX); border-bottom: 1px solid var(--line); }
.problema {
  width: 100%; min-height: 44px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  background: none; border: 0; color: var(--fg);
  text-align: left; font-size: 15px; line-height: 1.35; cursor: pointer;
}
.problema .glifo { flex: none; width: 18px; text-align: center; font-family: var(--mono); }
.problema .qué { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.problema .chev { flex: none; color: var(--fg3); font-size: 18px; }

/* --------------------------------------------------------------- vitales */

.vitales {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px; row-gap: 10px;
  padding: 14px var(--padX);
  border-bottom: 1px solid var(--line);
}
.vital { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vital .valor {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 500;
}
/* OJO: NO llamar a esto .detalle. Esa clase es la del panel de detalle, que
   es position:fixed/sticky con height:100vh y visibility:hidden. Como esas
   propiedades no las pisa `.vital .detalle`, la línea quedaba invisible en el
   celular y estirada a 844px en escritorio. */
.vital .det {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--fg2);
}
.vitales .host {
  grid-column: 1 / -1;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--fg2);
}

/* --------------------------------------------------------------- grupos */

.grupo { padding: 16px 0 4px; border-bottom: 1px solid var(--line); }
.grupo > header {
  display: flex; align-items: center; gap: 12px;
  min-height: 28px; padding: 0 var(--padX);
}
.grupo h2 {
  margin: 0; flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg); overflow-wrap: anywhere;
}
.grupo .pausadas, .grupo .estado {
  flex: none; font-family: var(--mono); font-size: 12px;
}
.grupo .dominio {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px;
  min-height: 36px; padding: 0 var(--padX);
}
.grupo .dominio a {
  font-size: 14px; color: var(--fg2);
  min-height: 36px; display: flex; align-items: center;
  overflow-wrap: anywhere;
}
.grupo .dominio .codigo {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--fg2);
}
.grupo .dominio .codigo.mal { color: var(--down); }

/* ----------------------------------------------------------------- filas */

.fila {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  column-gap: 12px; align-items: center;
  width: 100%; min-height: 52px;
  padding: 7px var(--padX);
  background: transparent;
  border: 0; border-top: 1px solid var(--line2);
  color: var(--fg); text-align: left; cursor: pointer;
}
.fila:hover { background: var(--bg2); }
.fila[aria-current="true"] { background: var(--bg2); }
.fila .glifo {
  text-align: center; font-family: var(--mono); font-size: 14px;
  transition: color .3s;
}
.fila .cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila .nom {
  min-width: 0; font-family: var(--mono); font-size: 14px;
  color: var(--fg); overflow-wrap: anywhere;
}
.fila .dato {
  min-width: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; line-height: 1.4; color: var(--fg2);
  overflow-wrap: anywhere;
}
.fila .chev { color: var(--fg3); font-size: 18px; text-align: right; }

/* ---------------------------------------------------------------- vacío */

.vacio {
  padding: 40px var(--padX);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.vacio strong { font-size: 17px; font-weight: 600; }
.vacio p {
  margin: 0; font-size: 14px; line-height: 1.5;
  color: var(--fg2); max-width: 420px; text-wrap: pretty;
}
.vacio code { font-family: var(--mono); }

/* -------------------------------------------------------------- esqueleto */

.hueso { border-radius: 3px; background: var(--skel); }
.esq-vitales {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 16px var(--padX); border-bottom: 1px solid var(--line);
}
.esq-vital { display: flex; flex-direction: column; gap: 8px; }
.esq-grupo { padding: 18px 0 6px; border-bottom: 1px solid var(--line); }
.esq-grupo > div:first-child { padding: 0 var(--padX) 10px; }
.esq-fila {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 var(--padX);
  border-top: 1px solid var(--line2);
}
.esq-fila .punto { width: 10px; height: 10px; border-radius: 5px; background: var(--skel); flex: none; }
.esq-fila .lineas { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* ------------------------------------------------------------------- pie */

.pie { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--padX); }
.pie button {
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--fg2);
  font-size: 14px; cursor: pointer;
}
.pie button:hover { color: var(--fg); }

/* --------------------------------------------------------------- detalle */

.velo {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.velo[data-abierto="true"] { opacity: 1; pointer-events: auto; }

.detalle {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  max-height: 88vh;
  background: var(--sheet);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(105%); visibility: hidden;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility .26s;
  padding-bottom: env(safe-area-inset-bottom);
}
.detalle[data-abierto="true"] { transform: translateY(0); visibility: visible; }
.detalle .agarre { display: flex; justify-content: center; padding-top: 8px; }
.detalle .agarre i { width: 36px; height: 4px; border-radius: 2px; background: var(--line); }

.detalle > header {
  position: sticky; top: 0; z-index: 1;
  background: var(--sheet);
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line2);
}
.detalle > header .glifo {
  flex: none; width: 18px; padding-top: 3px; text-align: center;
  font-family: var(--mono); font-size: 15px;
}
.detalle > header .quien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.detalle > header .nom {
  font-family: var(--mono); font-size: 17px; font-weight: 500;
  overflow-wrap: anywhere;
}
.detalle > header .tipo { font-size: 13px; color: var(--fg2); }
.detalle .cerrar {
  flex: none; min-height: 44px; padding: 0 12px; margin: -6px -8px 0 0;
  border: 0; background: none; color: var(--fg2);
  font-size: 14px; cursor: pointer;
}
.detalle .cerrar:hover { color: var(--fg); }

.detalle .cuerpo {
  display: flex; flex-direction: column; gap: 22px;
  padding: 16px 16px 24px;
}
.detalle .sin-sel {
  padding: 28px 24px; font-size: 14px; line-height: 1.5;
  color: var(--fg2); text-wrap: pretty;
}

.datos {
  margin: 0;
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px; row-gap: 8px; font-size: 13.5px;
}
.datos dt { color: var(--fg2); }
.datos dd { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.datos dd .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.datos dd .sub {
  font-family: var(--mono); font-size: 12px; color: var(--fg2);
  overflow-wrap: anywhere; line-height: 1.45;
}

.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones button {
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg2); color: var(--fg);
  font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.acciones button.riesgo { border-color: var(--down); color: var(--down); }
.acciones button[disabled] {
  color: var(--fg3); border-color: var(--line); cursor: not-allowed;
}
.acciones button[aria-busy="true"] { cursor: progress; }

.bloque { display: flex; flex-direction: column; gap: 8px; }
.bloque > .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.salida {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.salida .tit {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
}
.salida .tit .qué { overflow-wrap: anywhere; }
.salida .tit .hora { flex: none; color: var(--fg2); font-weight: 400; }
.salida pre {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere;
}
.sin-salida { font-size: 13.5px; color: var(--fg2); }

.seguir {
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; margin-right: -12px;
  border: 0; background: none; color: var(--fg);
  font-size: 14px; cursor: pointer;
}
.seguir .glifo { font-family: var(--mono); color: var(--fg3); }
.seguir[aria-pressed="true"] .glifo { color: var(--ok); }

.registro {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.registro div {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere;
}
.registro .ts { color: var(--fg3); }
.registro .msg.mal { color: var(--down); }
.registro .msg.ojo { color: var(--warn); }

/* ---------------------------------------------------------------- cintas */

.cinta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 8px);
  background: var(--bg2); color: var(--fg);
  border-top: 1px solid var(--line);
}
.cinta[data-tipo="offline"] { border-top-color: var(--down); }
.cinta[data-tipo="vencida"] { border-top-color: var(--warn); }
.cinta .glifo { font-family: var(--mono); }
.cinta .qué { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.cinta button {
  flex: none; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg);
  font-size: 14px; cursor: pointer;
}
.cinta button.primario {
  border: 0; background: var(--fg); color: var(--bg); font-weight: 600;
}

/* ----------------------------------------------------------- confirmación */

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
}
.modal .caja {
  width: 100%; max-width: 420px;
  background: var(--sheet); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.modal h3 { margin: 0; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.modal p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg2); text-wrap: pretty; }
.modal label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--fg2); }
.modal label b { font-family: var(--mono); font-weight: 400; color: var(--fg); overflow-wrap: anywhere; }
.modal input {
  min-height: 48px; padding: 0 12px;
  font-size: 16px; font-family: var(--mono);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px;
}
.modal input[data-coincide="true"] { border-color: var(--down); }
.modal .botones { display: flex; justify-content: flex-end; gap: 8px; }
.modal .botones button {
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--fg);
  font-size: 14.5px; cursor: pointer;
}
.modal .botones .hacerlo { font-weight: 600; color: var(--fg3); cursor: not-allowed; }
.modal .botones .hacerlo[data-listo="true"] {
  background: var(--down); border-color: var(--down); color: var(--bg);
  cursor: pointer;
}

/* ------------------------------------------------------------ escritorio
   Cambio estructural: el detalle deja de ser una hoja y pasa a ser una
   columna fija de 440px que está siempre presente. */

@media (min-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr) 440px; }

  .velo { display: none; }

  .detalle {
    position: sticky; top: 0; bottom: auto; left: auto; right: auto;
    z-index: 1;
    height: 100vh; height: 100svh; max-height: none;
    transform: none; visibility: visible;
    border-radius: 0;
    border-top: 0; border-left: 1px solid var(--line);
  }
  .detalle .agarre { display: none; }
  .detalle > header { padding: 12px 24px; }
  .detalle .cuerpo { padding: 16px 24px 24px; }
  .registro { max-height: 340px; }

  /* Nombre y dato en columnas separadas: en una pantalla ancha alinearlos
     deja leer la columna de datos de un vistazo. */
  .fila { grid-template-columns: 18px minmax(180px, 280px) minmax(0, 1fr) 16px; }
  .fila .cuerpo { display: contents; }

  .modal { align-items: center; }
}