@font-face {
  font-family: "Fira Sans";
  src: url("/static/fonts/FiraSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/static/fonts/FiraSans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/static/fonts/FiraSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/static/fonts/FiraSans-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --dc-primary: #1D388C;
  --dc-primary-700: #16306F;
  --dc-primary-900: #0E1F4A;
  --dc-primary-50: #EAEEF7;
  --dc-accent-celeste: #2AA6E0;
  --dc-accent-fucsia: #FB2D7C;
  --dc-accent-verde: #66B34D;
  --dc-accent-naranja: #F8AE48;
  --dc-white: #FFFFFF;
  --dc-light: #F8F8F8;
  --dc-dark: #121212;
  --dc-gray: #6C757D;
  --dc-gray-100: #F3F4F6;
  --dc-gray-200: #E5E7EB;
  --dc-gray-300: #D1D5DB;
  --dc-gray-400: #9CA3AF;
  --dc-gray-500: #6B7280;
  --dc-gray-600: #4B5563;
  --dc-gray-700: #374151;
  --dc-gray-800: #1F2937;
  --dc-gray-900: #111827;
  --dc-bg: var(--dc-light);
  --dc-bg-elevated: var(--dc-white);
  --dc-fg: var(--dc-dark);
  --dc-fg-muted: var(--dc-gray-600);
  --dc-border: var(--dc-gray-200);
  --dc-success: var(--dc-accent-verde);
  --dc-warning: var(--dc-accent-naranja);
  --dc-danger: var(--dc-accent-fucsia);
  --dc-info: var(--dc-accent-celeste);
  --dc-font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dc-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --dc-radius-sm: 0.375rem;
  --dc-radius-md: 0.5rem;
  --dc-radius-lg: 0.75rem;
  --dc-radius-xl: 1rem;
  --dc-radius-2xl: 1.5rem;
  --dc-radius-pill: 9999px;
  --dc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --dc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --dc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --fondo: var(--dc-bg);
  --fondo-2: var(--dc-gray-100);
  --superficie: var(--dc-bg-elevated);
  --superficie-2: var(--dc-gray-100);
  --superficie-3: var(--dc-gray-200);
  --borde: var(--dc-border);
  --borde-fuerte: var(--dc-gray-300);
  --texto: var(--dc-fg);
  --texto-2: var(--dc-fg-muted);
  --texto-3: var(--dc-gray-500);
  --acento: var(--dc-primary);
  --acento-fuerte: var(--dc-primary-700);
  --acento-tenue: var(--dc-primary-50);
  --ok: var(--dc-success);
  --ok-tenue: rgba(102, 179, 77, 0.12);
  --alerta: var(--dc-danger);
  --alerta-tenue: rgba(251, 45, 124, 0.12);
  --ok-fuerte: #2F6B23;
  --alerta-fuerte: #B0124F;
  --celeste-tenue: rgba(42, 166, 224, 0.12);
  --celeste-fuerte: #2592C5;
  --naranja-tenue: rgba(248, 174, 72, 0.12);
  --naranja-fuerte: #8A4B00;
  --radio: var(--dc-radius-lg);
  --radio-sm: var(--dc-radius-md);
  --radio-pill: var(--dc-radius-pill);
  --sidebar-ancho: 248px;
  --fuente: var(--dc-font-sans);
  --mono: var(--dc-font-mono);
  --sombra: var(--dc-shadow-lg);
  --sidebar-texto: rgba(255, 255, 255, 0.82);
  --sidebar-texto-fuerte: rgba(255, 255, 255, 0.92);
  --sidebar-texto-tenue: rgba(255, 255, 255, 0.62);
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-borde: rgba(255, 255, 255, 0.16);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.55;
  font-size: 15px;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a:hover {
  color: var(--acento-fuerte);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-ancho) 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 24px 16px;
  background: var(--dc-primary);
  border-right: 1px solid var(--dc-primary-900);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.marca-isotipo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.marca-texto {
  white-space: nowrap;
}

.sidebar .marca {
  color: var(--dc-white);
}

.nav-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-titulo {
  padding: 0 10px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--sidebar-texto-tenue);
}

.nav-enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radio-sm);
  color: var(--sidebar-texto);
  font-size: 0.92rem;
  font-weight: 450;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-enlace:hover {
  background: var(--sidebar-hover);
  color: var(--dc-white);
}

.nav-enlace.activa {
  background: var(--acento-tenue);
  color: var(--acento-fuerte);
  border-color: rgba(29, 56, 140, 0.15);
  box-shadow: var(--dc-shadow-sm);
}

.nav-enlace:focus-visible {
  outline: 2px solid var(--dc-white);
  outline-offset: 2px;
}

.nav-candado {
  margin-left: auto;
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  opacity: 0.7;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.25'/%3E%3Cpath d='M7.5 10.5V6.75a4.5 4.5 0 0 1 9 0v3.75'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.25'/%3E%3Cpath d='M7.5 10.5V6.75a4.5 4.5 0 0 1 9 0v3.75'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sidebar-pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 10px 0;
  border-top: 1px solid var(--sidebar-borde);
}

.usuario-actual {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.usuario-nombre {
  font-size: 0.86rem;
  color: var(--sidebar-texto-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario-rol {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-texto-tenue);
}

.sidebar .boton-secundario {
  background: transparent;
  color: var(--sidebar-texto);
  border-color: var(--sidebar-borde);
}

.sidebar .boton-secundario:hover {
  background: var(--sidebar-hover);
  color: var(--dc-white);
  border-color: rgba(255, 255, 255, 0.32);
}

.sidebar .boton:focus-visible {
  outline: 2px solid var(--dc-white);
  outline-offset: 2px;
}

.principal {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 32px;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.cabecera h1 {
  font-size: 1.28rem;
}

.cabecera-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--texto-3);
  letter-spacing: 0;
}

.cabecera-acciones {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.contenido {
  padding: 28px 32px 56px;
  max-width: 1180px;
  width: 100%;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--dc-radius-xl);
  box-shadow: var(--dc-shadow-sm);
  padding: 26px 28px;
  margin-bottom: 20px;
}

.tarjeta-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.etiqueta {
  color: var(--texto-3);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.metrica-grande {
  font-family: var(--mono);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  margin: 10px 0 0;
}

.metrica-grande.acento {
  color: var(--acento);
}

.metrica-sub {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--texto-3);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  font-size: 0.9rem;
  transition: background 0.12s ease;
}

thead th {
  background: var(--fondo-2);
  color: var(--texto-2);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--borde-fuerte);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--superficie-2);
}

td.num,
th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radio-pill);
  border: 1px solid transparent;
  background: var(--acento);
  color: var(--dc-white);
  font-family: var(--fuente);
  font-size: 0.9rem;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.boton:hover {
  background: var(--acento-fuerte);
  color: var(--dc-white);
}

.boton:active {
  background: var(--dc-primary-900);
}

.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.boton-secundario {
  background: var(--superficie-2);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

.boton-secundario:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

.boton-secundario:active {
  background: var(--superficie-3);
  border-color: var(--texto-3);
}

.boton-peligro {
  background: transparent;
  color: var(--alerta-fuerte);
  border-color: rgba(251, 45, 124, 0.35);
}

.boton-peligro:hover {
  background: var(--alerta-tenue);
  color: var(--alerta-fuerte);
}

.boton-peligro:active {
  background: rgba(251, 45, 124, 0.2);
  color: var(--alerta-fuerte);
}

.boton-mini {
  padding: 6px 11px;
  font-size: 0.82rem;
}

input,
select,
textarea {
  font-family: var(--fuente);
  font-size: 0.92rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  padding: 9px 11px;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.boton:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: transparent;
}

input::placeholder {
  color: var(--texto-3);
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--texto-2);
}

.selector-sedes {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.selector-sedes a {
  padding: 7px 15px;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-2);
  font-size: 0.88rem;
}

.selector-sedes a:hover {
  color: var(--texto);
  border-color: var(--texto-3);
}

.selector-sedes a.activa {
  background: var(--acento);
  color: var(--dc-white);
  border-color: var(--acento);
  font-weight: 550;
}

.formulario-rango,
.formulario-linea {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.formulario-device {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.formulario-alertas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}

.formulario-device select,
.formulario-device input {
  padding: 7px 9px;
  font-size: 0.84rem;
}

.pila {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pagina-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--dc-primary-50) 0%, transparent 60%),
    var(--fondo);
}

.tarjeta-login {
  width: 100%;
  max-width: 360px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 34px 30px;
  box-shadow: var(--sombra);
}

.tarjeta-login .marca {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-bottom: 8px;
}

.tarjeta-login .marca-isotipo {
  height: 56px;
}

.tarjeta-login .marca-texto {
  font-size: 1.15rem;
}

.login-lema {
  margin: 0 0 24px;
  font-size: 0.88rem;
  color: var(--texto-3);
  text-align: center;
}

.formulario-login {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulario-login .boton {
  margin-top: 4px;
  width: 100%;
  padding: 11px;
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 550;
  font-family: var(--mono);
  letter-spacing: -0.01em;
}

.insignia::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.estado-badge,
.salud-badge,
.ocupacion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 550;
  background: var(--ok-tenue);
  color: var(--ok-fuerte);
}

.estado-badge::before,
.salud-badge::before,
.ocupacion-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.estado-badge.suspendida,
.salud-badge.caido,
.ocupacion-badge.lleno {
  background: var(--alerta-tenue);
  color: var(--alerta-fuerte);
}

.ocupacion-badge.alto {
  background: var(--naranja-tenue);
  color: var(--naranja-fuerte);
}

.ocupacion-badge.desconocido {
  background: var(--superficie-3);
  color: var(--texto-2);
}

.estado-badge.sincronizado {
  background: var(--ok-tenue);
  color: var(--ok-fuerte);
}

.estado-badge.desactualizado {
  background: var(--naranja-tenue);
  color: var(--naranja-fuerte);
}

.estado-badge.error_credencial {
  background: var(--alerta-tenue);
  color: var(--alerta-fuerte);
}

.campo-ayuda {
  margin: -2px 0 0;
  font-size: 0.8rem;
  color: var(--texto-3);
}

.modulos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.modulo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}

.modulo-nombre {
  flex: 1;
  min-width: 90px;
  font-size: 0.86rem;
  color: var(--texto);
}

.aviso-vacio {
  color: var(--texto-2);
  font-size: 0.9rem;
  padding: 8px 0;
}

.modulo-bloqueado-icono {
  width: 44px;
  height: 44px;
  margin: 0 0 4px;
  background-color: var(--dc-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.25'/%3E%3Cpath d='M7.5 10.5V6.75a4.5 4.5 0 0 1 9 0v3.75'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.25'/%3E%3Cpath d='M7.5 10.5V6.75a4.5 4.5 0 0 1 9 0v3.75'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aviso-token {
  background: var(--acento-tenue);
  border: 1px solid rgba(29, 56, 140, 0.2);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.aviso-token .etiqueta {
  color: var(--acento);
}

.token-nuevo {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--texto);
  word-break: break-all;
}

.aviso-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--alerta-fuerte);
  background: var(--alerta-tenue);
  border: 1px solid rgba(251, 45, 124, 0.28);
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0 0 16px;
}

.grafico {
  width: 100%;
  height: auto;
  display: block;
}

.grafico-area {
  fill: var(--celeste-tenue);
}

.grafico-linea {
  fill: none;
  stroke: var(--celeste-fuerte);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.grafico-linea-salidas {
  fill: none;
  stroke: var(--dc-accent-fucsia);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.grafico-texto {
  fill: var(--texto-2);
  font-family: var(--mono);
  font-size: 10px;
}

.grafico-leyenda {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--texto-2);
}

.grafico-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.grafico-leyenda i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--celeste-fuerte);
}

.grafico-leyenda i.salidas {
  background: var(--dc-accent-fucsia);
}

.grafico-eje-x {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-2);
}

.grafico-envoltura {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-2);
  padding: 16px 16px 10px;
}

.barra-medidor {
  height: 8px;
  border-radius: var(--radio-pill);
  background: var(--superficie-3);
  overflow: hidden;
  margin-top: 14px;
}

.barra-medidor span {
  display: block;
  height: 100%;
  border-radius: var(--radio-pill);
  background: var(--acento);
}

.barra-medidor span.alto {
  background: var(--acento);
}

.barra-medidor span.lleno {
  background: var(--alerta);
}

.barra-medidor span.ok {
  background: var(--ok);
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .sidebar-pie {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    border-top: none;
    padding: 0;
  }

  .nav-grupo {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nav-titulo {
    display: none;
  }

  .cabecera,
  .contenido {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media print {
  .sidebar,
  .cabecera,
  .informes-formulario {
    display: none;
  }

  .app {
    display: block;
  }

  .contenido {
    padding: 0;
    max-width: none;
  }
}