/* ===========================================================================
   CAELSA BMS — base: reinicio, tipografía, estructura y controles
   Depende de tokens.css. Sin recursos externos (§12.6).
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--fondo-0);
  color: var(--texto-1);
  font-family: var(--fuente);
  font-size: var(--t-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--acento);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, kbd, samp, pre, .mono, .num {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

/* Todo valor numérico y toda referencia BACnet en monoespaciada (§12.2). */
.num { font-variant-numeric: tabular-nums; }
.ref {
  font-family: var(--fuente-mono);
  font-size: var(--t-sm);
  color: var(--texto-2);
}

/* --- foco visible en todo lo alcanzable por teclado --- */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--fondo-2);
  border: 1px solid var(--acento);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-md);
}
.salto-contenido:focus { left: var(--e-2); top: var(--e-2); }

/* --- barras de desplazamiento discretas --- */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--borde);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--texto-3); background-clip: content-box; }

/* ===========================================================================
   Estructura general
   =========================================================================== */

.aplicacion {
  display: grid;
  grid-template-columns: var(--ancho-lateral) 1fr;
  grid-template-rows: var(--alto-barra) 1fr;
  grid-template-areas:
    "marca superior"
    "lateral principal";
  height: 100vh;
  overflow: hidden;
}
.aplicacion[data-lateral="plegada"] { grid-template-columns: var(--ancho-lateral-min) 1fr; }

/* --- marca --- */
.marca {
  grid-area: marca;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-3);
  background: var(--fondo-1);
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
  white-space: nowrap;
}
.marca__logo { flex: 0 0 auto; color: var(--acento); }
.marca__texto {
  font-family: var(--fuente-mono);
  font-size: var(--t-md);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-1);
}
.marca__texto b { font-weight: 600; }
.marca__texto span { color: var(--texto-3); }
.aplicacion[data-lateral="plegada"] .marca__texto { display: none; }

/* --- barra superior --- */
.superior {
  grid-area: superior;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-3);
  background: var(--fondo-1);
  border-bottom: 1px solid var(--borde);
}
.superior__separador { flex: 1 1 auto; }
.superior__grupo { display: flex; align-items: center; gap: var(--e-2); }

/* --- barra lateral --- */
.lateral {
  grid-area: lateral;
  background: var(--fondo-1);
  border-right: 1px solid var(--borde);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--e-2) 0 var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.lateral__seccion {
  padding: var(--e-3) var(--e-3) var(--e-1);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
  white-space: nowrap;
}
.aplicacion[data-lateral="plegada"] .lateral__seccion { visibility: hidden; height: var(--e-6); padding: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  height: var(--alto-fila);
  margin: 0 var(--e-2);
  padding: 0 var(--e-2);
  border-radius: var(--r-sm);
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--transicion), color var(--transicion);
}
.nav-item:hover { background: var(--fondo-2); color: var(--texto-1); text-decoration: none; }
.nav-item[aria-current="page"] {
  background: var(--acento-suave);
  color: var(--texto-1);
  box-shadow: inset 2px 0 0 var(--acento);
}
.nav-item__icono { flex: 0 0 16px; color: currentColor; }
.nav-item__texto { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.nav-item__contador {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--texto-3);
}
.aplicacion[data-lateral="plegada"] .nav-item__texto,
.aplicacion[data-lateral="plegada"] .nav-item__contador { display: none; }

/* --- región principal --- */
.principal {
  grid-area: principal;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.principal--fijo { overflow: hidden; }

.encabezado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-0);
  position: sticky;
  top: 0;
  z-index: 5;
}
.encabezado__titulo {
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.encabezado__sub {
  font-size: var(--t-sm);
  color: var(--texto-3);
  font-family: var(--fuente-mono);
}
.encabezado__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }

.migas { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-sm); color: var(--texto-3); }
.migas a { color: var(--texto-2); }
.migas span::after { content: "/"; margin: 0 var(--e-1); color: var(--borde); }
.migas span:last-child::after { content: ""; }

.contenido { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.contenido--pleno { padding: 0; flex: 1 1 auto; min-height: 0; }

/* ===========================================================================
   Rejillas y tarjetas
   =========================================================================== */

.rejilla { display: grid; gap: var(--e-3); }
.rejilla--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.panel {
  background: var(--fondo-1);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  min-width: 0;
}
.panel__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  height: 38px;
  padding: 0 var(--e-3);
  border-bottom: 1px solid var(--borde);
}
.panel__titulo {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-2);
  font-weight: 600;
}
.panel__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-1); }
.panel__cuerpo { padding: var(--e-3); }
.panel__cuerpo--liso { padding: 0; }

/* Indicador numérico grande (panel general). */
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica__valor {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2xl);
  line-height: 1.1;
  font-weight: 500;
}
.metrica__etiqueta {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-3);
}
.metrica--ok .metrica__valor { color: var(--ok); }
.metrica--aviso .metrica__valor { color: var(--aviso); }
.metrica--error .metrica__valor { color: var(--error); }
.metrica--critico .metrica__valor { color: var(--critico); }
.metrica--inactivo .metrica__valor { color: var(--inactivo); }

/* Lista de pares clave/valor: la usan casi todos los detalles. */
.propiedades { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-1) var(--e-3); align-items: baseline; }
.propiedades dt { font-size: var(--t-sm); color: var(--texto-3); white-space: nowrap; }
.propiedades dd { font-size: var(--t-md); min-width: 0; overflow-wrap: anywhere; }
.propiedades dd.num, .propiedades dd .num { font-family: var(--fuente-mono); }

/* ===========================================================================
   Controles
   =========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  height: 28px;
  padding: 0 var(--e-3);
  background: var(--fondo-2);
  color: var(--texto-1);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:hover:not(:disabled) { background: var(--fondo-3); border-color: var(--borde-fuerte); }
.boton:active:not(:disabled) { transform: translateY(1px); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton--principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton--principal:hover:not(:disabled) { background: color-mix(in srgb, var(--acento) 85%, #fff); border-color: var(--acento); }
.boton--peligro { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--borde)); }
.boton--peligro:hover:not(:disabled) { background: var(--error-suave); }
.boton--fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.boton--fantasma:hover:not(:disabled) { background: var(--fondo-2); color: var(--texto-1); border-color: transparent; }
.boton--icono { width: 28px; padding: 0; }
.boton--alto { height: 32px; }
.boton--bloque { width: 100%; }
.boton[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--texto-1); }

.grupo-botones { display: inline-flex; }
.grupo-botones .boton { border-radius: 0; margin-left: -1px; }
.grupo-botones .boton:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.grupo-botones .boton:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.campo__etiqueta {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-3);
}
.campo__ayuda { font-size: var(--t-xs); color: var(--texto-3); }
.campo__error { font-size: var(--t-xs); color: var(--error); }

.entrada, .selector, .area {
  height: 28px;
  padding: 0 var(--e-2);
  background: var(--fondo-0);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  color: var(--texto-1);
  font-size: var(--t-md);
  min-width: 0;
  transition: border-color var(--transicion), background var(--transicion);
}
.entrada::placeholder { color: var(--texto-3); }
.entrada:hover, .selector:hover, .area:hover { border-color: var(--borde-fuerte); }
.entrada:disabled, .selector:disabled, .area:disabled { opacity: .5; cursor: not-allowed; }
.entrada--num { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; text-align: right; }
.entrada--mono { font-family: var(--fuente-mono); }
.area { height: auto; min-height: 64px; padding: var(--e-2); line-height: 1.5; resize: vertical; }
.selector { appearance: none; padding-right: var(--e-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.interruptor { display: inline-flex; align-items: center; gap: var(--e-2); cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__pista {
  width: 32px; height: 18px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: 10px;
  position: relative;
  transition: background var(--transicion), border-color var(--transicion);
}
.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--texto-3);
  transition: transform var(--transicion), background var(--transicion);
}
.interruptor input:checked + .interruptor__pista { background: var(--acento-suave); border-color: var(--acento); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(14px); background: var(--acento); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--acento); outline-offset: 1px; }

.casilla { display: inline-flex; align-items: center; gap: var(--e-2); cursor: pointer; }
.casilla input { accent-color: var(--acento); width: 14px; height: 14px; }

.barra-filtros {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: var(--e-2) var(--e-4);
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-1);
}
.barra-filtros .entrada, .barra-filtros .selector { height: 26px; }
.barra-filtros__separador { flex: 1 1 auto; }

.buscador { position: relative; display: flex; align-items: center; }
.buscador .entrada { padding-left: 26px; min-width: 200px; }
.buscador__icono { position: absolute; left: var(--e-2); color: var(--texto-3); pointer-events: none; }

/* ===========================================================================
   Tablas — densidad alta (§12.2)
   =========================================================================== */

.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-md); }
.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 30px;
  padding: 0 var(--e-3);
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-3);
  text-align: left;
  white-space: nowrap;
  user-select: none;
}
.tabla thead th[data-ordenable] { cursor: pointer; }
.tabla thead th[data-ordenable]:hover { color: var(--texto-1); }
.tabla thead th[aria-sort]:not([aria-sort="none"]) { color: var(--texto-1); }
.tabla thead th .orden-marca { color: var(--acento); margin-left: 4px; }

.tabla tbody td {
  height: var(--alto-fila);
  padding: 0 var(--e-3);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--fondo-2); }
.tabla tbody tr[aria-selected="true"] { background: var(--acento-suave); }
.tabla tbody tr[data-clicable] { cursor: pointer; }
.tabla td.num, .tabla th.num { text-align: right; font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.tabla td.mono { font-family: var(--fuente-mono); font-size: var(--t-sm); }
.tabla td.centro, .tabla th.centro { text-align: center; }
.tabla td.acciones { text-align: right; padding-right: var(--e-2); }
.tabla--compacta tbody td { height: 26px; }

.tabla-envoltorio { position: relative; overflow: auto; min-height: 0; }
.tabla-envoltorio--alto { max-height: 60vh; }

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-8) var(--e-4);
  color: var(--texto-3);
  text-align: center;
}
.vacio__titulo { color: var(--texto-2); font-size: var(--t-lg); }
.vacio__detalle { font-size: var(--t-sm); max-width: 46ch; }

.paginacion {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  color: var(--texto-3);
}
.paginacion__separador { flex: 1 1 auto; }

/* ===========================================================================
   Estado: puntos, chips, severidades
   =========================================================================== */

.punto-estado {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--inactivo);
  flex: 0 0 8px;
}
.punto-estado--ok { background: var(--ok); }
.punto-estado--aviso { background: var(--aviso); }
.punto-estado--error { background: var(--error); }
.punto-estado--critico { background: var(--critico); }
.punto-estado--inactivo { background: var(--inactivo); }
.punto-estado--anulado { background: var(--anulado); }
.punto-estado--pulso { animation: pulso 1.6s ease-in-out infinite; }

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  height: 20px;
  padding: 0 var(--e-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  color: var(--texto-2);
  font-size: var(--t-xs);
  white-space: nowrap;
}
.chip--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-suave); }
.chip--aviso { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 35%, transparent); background: var(--aviso-suave); }
.chip--error { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, transparent); background: var(--error-suave); }
.chip--critico { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 45%, transparent); background: var(--critico-suave); }
.chip--inactivo { color: var(--inactivo); border-color: color-mix(in srgb, var(--inactivo) 35%, transparent); background: var(--inactivo-suave); }
.chip--anulado { color: var(--anulado); border-color: color-mix(in srgb, var(--anulado) 35%, transparent); background: var(--anulado-suave); }
.chip--acento { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 35%, transparent); background: var(--acento-suave); }
.chip--mono { font-family: var(--fuente-mono); }

/* Calidad del valor (§12.2). */
.valor { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.valor--buena { color: var(--texto-1); }
.valor--incierta { color: var(--aviso); }
.valor--obsoleta { color: var(--texto-3); }
.valor--fallo { color: var(--error); }
.valor--sin_datos { color: var(--texto-3); }
.valor__unidad { color: var(--texto-3); margin-left: 3px; font-size: var(--t-sm); }

.etiqueta-tenue { color: var(--texto-3); font-size: var(--t-sm); }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===========================================================================
   Avisos y mensajes
   =========================================================================== */

.aviso-caja {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--texto-3);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  font-size: var(--t-sm);
  color: var(--texto-2);
}
.aviso-caja--info { border-left-color: var(--acento); }
.aviso-caja--ok { border-left-color: var(--ok); }
.aviso-caja--aviso { border-left-color: var(--aviso); }
.aviso-caja--error { border-left-color: var(--error); color: var(--texto-1); }

.cargando {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--borde);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.barra-carga {
  height: 2px;
  background: var(--acento);
  transform-origin: left;
  animation: carga 1.2s ease-in-out infinite;
}
@keyframes carga {
  0% { transform: scaleX(0); opacity: 1; }
  70% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ===========================================================================
   Login — única página sin barra lateral
   =========================================================================== */

.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background:
    radial-gradient(1200px 600px at 50% -20%, var(--fondo-2), transparent 70%),
    var(--fondo-0);
}
.acceso__caja {
  width: 100%;
  max-width: 360px;
  background: var(--fondo-1);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--e-6);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.acceso__marca { display: flex; align-items: center; gap: var(--e-2); }
.acceso__titulo {
  font-family: var(--fuente-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--t-lg);
}
.acceso__sub { color: var(--texto-3); font-size: var(--t-sm); }
.acceso__pie { text-align: center; color: var(--texto-3); font-size: var(--t-xs); font-family: var(--fuente-mono); }

/* ===========================================================================
   Utilidades mínimas (sin framework)
   =========================================================================== */

.fila { display: flex; align-items: center; gap: var(--e-2); }
.fila--sep { justify-content: space-between; }
.fila--alto { align-items: flex-start; }
.columna { display: flex; flex-direction: column; gap: var(--e-2); }
.columna--3 { gap: var(--e-3); }
.crecer { flex: 1 1 auto; min-width: 0; }
.envolver { flex-wrap: wrap; }
.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.derecha { margin-left: auto; }
.centrado { text-align: center; }
.sm { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.tenue { color: var(--texto-3); }
.medio { color: var(--texto-2); }

@media (max-width: 900px) {
  .aplicacion { grid-template-columns: var(--ancho-lateral-min) 1fr; }
  .aplicacion .marca__texto { display: none; }
  .aplicacion .nav-item__texto, .aplicacion .nav-item__contador { display: none; }
  .contenido { padding: var(--e-3); }
}