/* Registro de centrales: colores y convenciones de un panel de incendio.
   Rojo = alarma, ámbar = problema, verde = normal. La pantalla LCD es el único
   elemento "de marca"; todo lo demás es sobrio. */
:root {
  --acero: #E3E6E4;        /* fondo: gabinete de la central */
  --placa: #F8F9F8;        /* superficies */
  --tinta: #1F2A2E;        /* texto principal */
  --tinta-2: #56646A;      /* texto secundario */
  --linea: #C8CECB;        /* bordes */
  --rojo: #C8102E;         /* alarma */
  --rojo-suave: #FBE9EC;
  --ambar: #A86A12;        /* problema / sin conexión */
  --ambar-suave: #FBF1E1;
  --verde: #2F7D4F;        /* normal */
  --lcd: #C3D3AC;          /* pantalla retroiluminada */
  --lcd-tinta: #1D2A17;
  --foco: #1F6FB2;

  --sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --paso: 8px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--acero); color: var(--tinta);
  font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--tinta); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
h1, h2 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: calc(var(--paso) * 1.5); }

/* ---------- Pantalla LCD ---------- */
.lcd {
  background: var(--lcd); color: var(--lcd-tinta); font-family: var(--mono);
  border-radius: 4px; box-shadow: inset 0 2px 6px rgba(29, 42, 23, 0.25);
  border: 1px solid #9FB189;
}

/* ---------- Acceso ---------- */
body.acceso { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--paso) * 2); }
.placa {
  width: min(400px, 100%); background: var(--placa); border: 1px solid var(--linea);
  border-radius: 10px; padding: calc(var(--paso) * 3);
  box-shadow: 0 1px 0 #fff inset, 0 12px 32px -16px rgba(31, 42, 46, 0.35);
}
.placa .lcd { padding: calc(var(--paso) * 2) calc(var(--paso) * 2.25); margin-bottom: calc(var(--paso) * 3); }
.placa .lcd h1 { font-family: var(--mono); font-size: 1.25rem; font-weight: 500; letter-spacing: 0; }
.placa .lcd p { margin: 4px 0 0; font-size: 0.9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .placa .lcd p::after { content: "_"; animation: cursor 1.1s steps(1) infinite; }
  @keyframes cursor { 50% { opacity: 0; } }
}

.formulario { display: grid; gap: 6px; }
.formulario label { font-weight: 600; font-size: 0.9375rem; margin-top: 10px; }
.formulario label:first-of-type { margin-top: 0; }
input, select {
  font: inherit; color: var(--tinta); background: #fff; border: 1px solid var(--linea);
  border-radius: 6px; padding: 10px 12px; min-height: 44px; width: 100%;
}
input:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--foco); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; border-radius: 6px; padding: 10px 16px; min-height: 44px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.boton-principal { background: var(--tinta); color: #fff; }
.boton-principal:hover { background: #2F3E44; }
.boton-sobrio { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton-sobrio:hover { background: #fff; }
.formulario .boton { margin-top: calc(var(--paso) * 2.5); width: 100%; }
.aviso {
  background: var(--rojo-suave); color: #8E0B21; border: 1px solid #F0C2CA;
  border-radius: 6px; padding: 10px 12px; margin: 0 0 calc(var(--paso) * 2); font-size: 0.9375rem;
}
.nota { color: var(--tinta-2); font-size: 0.875rem; margin: calc(var(--paso) * 2.5) 0 0; }

/* ---------- Barra superior ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 40px); background: var(--tinta); color: #fff;
}
.marca { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.0625rem; }
.sesion { display: flex; align-items: center; gap: 16px; }
.quien { display: grid; text-align: right; line-height: 1.25; font-size: 0.875rem; }
.quien span { color: #B9C4C7; }
.barra .boton-sobrio { color: #fff; border-color: #56646A; min-height: 38px; padding: 6px 12px; }
.barra .boton-sobrio:hover { background: #2F3E44; }

/* ---------- Contenido ---------- */
.contenido { max-width: 1240px; margin: 0 auto; padding: calc(var(--paso) * 4) clamp(16px, 4vw, 40px) calc(var(--paso) * 8); }
.encabezado { margin-bottom: calc(var(--paso) * 3); }
.resumen { margin: 6px 0 0; color: var(--tinta-2); max-width: 70ch; }
.resumen strong { font-weight: 600; }
.refresco { display: block; font-size: 0.8125rem; }
.texto-alarma { color: var(--rojo); }
.texto-problema { color: var(--ambar); }
section { margin-top: calc(var(--paso) * 5); }
.volver { margin: 0 0 calc(var(--paso) * 1.5); font-size: 0.9375rem; }
.vacio { color: var(--tinta-2); background: var(--placa); border: 1px dashed var(--linea); border-radius: 6px; padding: 16px; margin: 0; }
.secundario { color: var(--tinta-2); }

/* ---------- Estado tipo LED ---------- */
.estado { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.led { width: 12px; height: 12px; border-radius: 50%; background: #9AA4A0; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25); }
.estado-normal .led   { background: var(--verde); box-shadow: 0 0 0 3px rgba(47,125,79,.18); }
.estado-problema .led { background: #E0A030; box-shadow: 0 0 0 3px rgba(224,160,48,.25); }
.estado-alarma .led   { background: var(--rojo); box-shadow: 0 0 0 3px rgba(200,16,46,.22); }
.estado-problema { color: var(--ambar); }
.estado-alarma { color: var(--rojo); }
@media (prefers-reduced-motion: no-preference) {
  .estado-alarma .led { animation: parpadeo 1s steps(1) infinite; }
  @keyframes parpadeo { 50% { background: #F2A5B2; } }
}

/* ---------- Lista de centrales (como la lista de zonas del panel) ---------- */
.centrales { list-style: none; margin: 0; padding: 0; background: var(--placa); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.central {
  display: grid; grid-template-columns: 170px minmax(180px, 1fr) minmax(0, 360px) 170px;
  align-items: center; gap: 20px; padding: 14px 20px; border-top: 1px solid var(--linea);
  border-left: 4px solid transparent;
}
.central:first-child { border-top: 0; }
.central-alarma { border-left-color: var(--rojo); background: #FDF5F6; }
.central-problema { border-left-color: #E0A030; }
.central-nombre { display: grid; min-width: 0; }
.central-nombre a { font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.central-nombre a:hover { text-decoration: underline; }
.central-nombre span, .central-datos { color: var(--tinta-2); font-size: 0.875rem; }
.central-datos { display: grid; text-align: right; }
.central-datos strong { color: var(--tinta); }
.lcd-linea { display: grid; padding: 6px 10px; font-size: 0.8125rem; line-height: 1.45; white-space: pre; overflow: hidden; }
.lcd-linea span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Tablas ---------- */
.desplazable { overflow-x: auto; background: var(--placa); border: 1px solid var(--linea); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th { text-align: left; font-weight: 600; font-size: 0.8125rem; color: var(--tinta-2); padding: 10px 12px; border-bottom: 1px solid var(--linea); background: #EEF1EF; white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid #E2E6E4; vertical-align: top; }
td a { white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.impresa { font-family: var(--mono); font-size: 0.8125rem; white-space: pre; }
.fila-rst td { color: var(--tinta-2); }
.tipo { font-weight: 600; white-space: nowrap; }
.sev-1 { color: var(--rojo); }
.sev-2 { color: #B5471B; }
.sev-3 { color: var(--ambar); }

/* ---------- Detalle de central ---------- */
.encabezado-central { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.ficha { background: var(--placa); border: 1px solid var(--linea); border-radius: 10px; padding: 14px 18px; min-width: 280px; }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 0.875rem; }
.ficha dt { color: var(--tinta-2); }
.ficha dd { margin: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.filtros label { display: grid; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--tinta-2); }
.filtros input, .filtros select { min-width: 150px; font-weight: 400; font-size: 0.9375rem; color: var(--tinta); }
.paginas { display: flex; gap: 16px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 0.9375rem; }
.paginas span { color: var(--tinta-2); }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 900px) {
  .central { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .central-estado { grid-column: 2; grid-row: 1; justify-self: end; }
  .central-nombre { grid-column: 1; grid-row: 1; }
  .lcd-linea { grid-column: 1 / -1; }
  .central-datos { grid-column: 1 / -1; text-align: left; display: flex; gap: 16px; }
  .dos-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .quien { display: none; }
  h1 { font-size: 1.5rem; }
  .filtros label, .filtros input, .filtros select, .filtros .boton { width: 100%; }
}

/* ---------- Navegación principal ---------- */
.principal { display: flex; align-items: center; gap: 24px; }
.principal a:not(.marca) { color: #C9D2D5; text-decoration: none; font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent; }
.principal a:not(.marca):hover { color: #fff; }
.principal a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

/* ---------- Administración ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: calc(var(--paso) * 3); }
.pestanas a { padding: 10px 14px; text-decoration: none; color: var(--tinta-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.encabezado-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.mensajes { display: grid; gap: 8px; margin-bottom: calc(var(--paso) * 3); }
.mensaje { margin: 0; padding: 10px 14px; border-radius: 6px; border: 1px solid; }
.mensaje-ok { background: #E8F3EC; border-color: #B9DAC6; color: #1F5A37; }
.mensaje-error { background: var(--rojo-suave); border-color: #F0C2CA; color: #8E0B21; }

.ficha-form { max-width: 820px; }
.ficha-form fieldset { border: 0; padding: 0; margin: calc(var(--paso) * 3) 0 0; }
.ficha-form legend { font-weight: 600; font-size: 1rem; margin-bottom: 8px; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 20px; margin-top: 16px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo label { font-weight: 600; font-size: 0.9375rem; }
.opcional { font-weight: 400; color: var(--tinta-2); }
.ayuda { margin: 0; color: var(--tinta-2); font-size: 0.875rem; }
.campo-casilla { margin-top: 20px; }
.campo-casilla label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--tinta); }
.acciones { margin-top: calc(var(--paso) * 3); display: flex; gap: 12px; flex-wrap: wrap; }

.opciones-tipo { display: grid; gap: 8px; }
.opciones-tipo label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--placa); border: 1px solid var(--linea); border-radius: 6px; cursor: pointer; }
.opciones-tipo label:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.opciones-tipo input { margin-top: 3px; flex: none; }
.opciones-tipo span { display: grid; color: var(--tinta-2); font-size: 0.9375rem; }
.opciones-tipo strong { color: var(--tinta); }
.opciones-tipo[disabled] label { cursor: not-allowed; opacity: 0.65; }

.etiqueta { display: inline-block; font-size: 0.8125rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.etiqueta-ok { color: var(--verde); border-color: #B9DAC6; background: #EEF6F1; }
.etiqueta-off { color: var(--tinta-2); border-color: var(--linea); background: #EEF1EF; }
.centro { text-align: center; }
th.centro { text-align: center; }
.matriz td:first-child { min-width: 280px; }
.matriz .etiqueta { margin-left: 8px; }
.asignaciones td:first-child { min-width: 240px; }
.detalle { font-family: var(--mono); font-size: 0.75rem; color: var(--tinta-2); max-width: 420px; overflow-wrap: anywhere; }

.zona-peligro { border-top: 1px solid var(--linea); padding-top: calc(var(--paso) * 3); max-width: 820px; }
.zona-peligro p { color: var(--tinta-2); max-width: 70ch; }
.boton-peligro { background: transparent; color: var(--rojo); border-color: #E6A9B3; }
.boton-peligro:hover { background: var(--rojo-suave); }

@media (max-width: 720px) {
  .principal { gap: 14px; }
  .principal .marca { display: auto; }
}