/* =============================================================================
   NEXUS: sistema visual
   Fibra (estructura) / Señal (acción) / Óptico (indicador activo) sobre blanco.
   La línea cian con brillo es la "señal": marca lo activo en toda la interfaz.
   ========================================================================== */

:root {
  --nx-fibra: #0a1f44;
  --nx-fibra-2: #13306a;
  --nx-fibra-3: #1c3e80;
  --nx-senal: #1f5bff;
  --nx-senal-hover: #1748d1;
  --nx-senal-activo: #133db3;
  --nx-senal-suave: #e8efff;
  --nx-optico: #19b6e8;
  --nx-optico-suave: #e3f6fd;
  --nx-optico-texto: #0a6585;
  --nx-nube: #f3f6fb;
  --nx-borde: #dfe5ef;
  --nx-borde-suave: #edf1f7;
  --nx-borde-fuerte: #c5cfdf;
  --nx-tinta: #13213c;
  --nx-tenue: #59667e;
  --nx-ok: #0b7f51;
  --nx-ok-suave: #e3f4eb;
  --nx-alerta: #9a6100;
  --nx-alerta-suave: #fff3d9;
  --nx-error: #c62f2f;
  --nx-error-suave: #fdeded;
  --nx-radio: 12px;
  --nx-lateral: 264px;
  --nx-barra-movil: 64px;

  --bs-body-font-family: 'Archivo Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--nx-tinta);
  --bs-body-color-rgb: 19, 33, 60;
  --bs-body-bg: var(--nx-nube);
  --bs-emphasis-color: var(--nx-tinta);
  --bs-secondary-color: var(--nx-tenue);
  --bs-border-color: var(--nx-borde);
  --bs-primary: #1f5bff;
  --bs-primary-rgb: 31, 91, 255;
  --bs-link-color: #1f5bff;
  --bs-link-color-rgb: 31, 91, 255;
  --bs-link-hover-color: #1748d1;
  --bs-link-hover-color-rgb: 23, 72, 209;
  --bs-danger: #c62f2f;
  --bs-danger-rgb: 198, 47, 47;
  --bs-success: #0b7f51;
  --bs-success-rgb: 11, 127, 81;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.625rem;
  --bs-focus-ring-color: rgba(31, 91, 255, 0.28);
}

/* --- Base y tipografía ----------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vista-desktop {
  font-size: 0.9375rem;
}

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

.wordmark {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
}

.page-title {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.page-sub {
  color: var(--nx-tenue);
  margin: 0.375rem 0 0;
  max-width: 70ch;
}

.num {
  font-variant-numeric: tabular-nums;
}

.text-tenue {
  color: var(--nx-tenue) !important;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: #fff;
  color: var(--nx-senal);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
}

.skip-link:focus {
  top: 1rem;
}

/* --- Ajustes de Bootstrap ------------------------------------------------- */

.btn {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  --bs-btn-bg: var(--nx-senal);
  --bs-btn-border-color: var(--nx-senal);
  --bs-btn-hover-bg: var(--nx-senal-hover);
  --bs-btn-hover-border-color: var(--nx-senal-hover);
  --bs-btn-active-bg: var(--nx-senal-activo);
  --bs-btn-active-border-color: var(--nx-senal-activo);
  --bs-btn-disabled-bg: var(--nx-senal);
  --bs-btn-disabled-border-color: var(--nx-senal);
  --bs-btn-focus-shadow-rgb: 31, 91, 255;
}

.btn-outline-primary {
  --bs-btn-color: var(--nx-senal);
  --bs-btn-border-color: #b3c7ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nx-senal);
  --bs-btn-hover-border-color: var(--nx-senal);
  --bs-btn-active-bg: var(--nx-senal-hover);
  --bs-btn-active-border-color: var(--nx-senal-hover);
  --bs-btn-focus-shadow-rgb: 31, 91, 255;
}

.btn-quiet {
  --bs-btn-color: var(--nx-tinta);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--nx-borde);
  --bs-btn-hover-color: var(--nx-tinta);
  --bs-btn-hover-bg: var(--nx-nube);
  --bs-btn-hover-border-color: var(--nx-borde-fuerte);
  --bs-btn-active-bg: var(--nx-borde-suave);
  --bs-btn-active-border-color: var(--nx-borde-fuerte);
}

.btn-outline-danger {
  --bs-btn-color: var(--nx-error);
  --bs-btn-border-color: #efc2c2;
  --bs-btn-hover-bg: var(--nx-error);
  --bs-btn-hover-border-color: var(--nx-error);
}

.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

.btn-quiet.is-loading::after,
.btn-outline-primary.is-loading::after {
  border-color: var(--nx-senal);
  border-right-color: transparent;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.form-label .opcional {
  color: var(--nx-tenue);
  font-weight: 400;
}

.form-control,
.form-select {
  border-color: var(--nx-borde-fuerte);
}

.form-control:focus,
.form-select:focus {
  border-color: #7fa2ff;
  box-shadow: 0 0 0 0.25rem rgba(31, 91, 255, 0.16);
}

.form-control::placeholder {
  color: #8a96ab;
}

.form-check-input:checked {
  background-color: var(--nx-senal);
  border-color: var(--nx-senal);
}

/* Solo se renderiza cuando hay error: siempre visible. */
.invalid-feedback {
  display: block;
}

.form-text {
  color: var(--nx-tenue);
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--nx-borde);
  --bs-dropdown-link-active-bg: var(--nx-senal);
  --bs-dropdown-box-shadow: 0 12px 32px rgba(10, 31, 68, 0.14);
  box-shadow: var(--bs-dropdown-box-shadow);
  padding: 0.375rem;
  min-width: 15rem;
}

.dropdown-item {
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
}

.dropdown-item .bi {
  color: var(--nx-tenue);
}

.dropdown-item.text-danger .bi {
  color: inherit;
}

.alert {
  border-radius: 10px;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.alert > .bi {
  font-size: 1.125rem;
  line-height: 1.35;
}

.modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 31, 68, 0.25);
}

/* --- Logo ------------------------------------------------------------------ */

.logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.logo-mark .hex {
  fill: none;
  stroke: var(--nx-optico);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.logo-mark .ramas {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.logo-mark .nodo {
  fill: #fff;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #fff;
  text-decoration: none;
}

.brand-link:hover {
  color: #fff;
}

.brand-link .wordmark {
  font-size: 1.125rem;
}

/* --- Avatar, rol y estado -------------------------------------------------- */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--nx-fibra-3);
  color: #fff;
  font-weight: 650;
  font-size: 0.8125rem;
  font-stretch: 110%;
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 1.125rem;
}

.avatar.tecnico {
  background: var(--nx-optico-suave);
  color: var(--nx-optico-texto);
}

.avatar.admin {
  background: var(--nx-senal-suave);
  color: var(--nx-senal-activo);
}

.avatar.inactivo {
  background: var(--nx-borde-suave);
  color: #8a96ab;
}

.rol {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.rol-superadmin {
  background: var(--nx-fibra);
  color: #fff;
}

.rol-admin {
  background: var(--nx-senal-suave);
  color: var(--nx-senal-activo);
}

.rol-tecnico {
  background: var(--nx-optico-suave);
  color: var(--nx-optico-texto);
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.estado::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.estado-activo {
  color: var(--nx-ok);
}

.estado-inactivo {
  color: #6f7b91;
}

.estado-bloqueado {
  color: var(--nx-alerta);
}

.estado-pendiente {
  color: var(--nx-senal);
}

.etiqueta-pronto {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nx-optico-texto);
  background: var(--nx-optico-suave);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Estructura de escritorio ---------------------------------------------- */

.shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.shell-side {
  flex: 0 0 var(--nx-lateral);
  background: var(--nx-fibra);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.side {
  --bs-offcanvas-width: 280px;
  --bs-offcanvas-bg: var(--nx-fibra);
  --bs-offcanvas-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: rgba(255, 255, 255, 0.75);
}

.side-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.375rem 1.5rem 1.125rem;
}

.side-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
}

.side-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-group + .side-group {
  margin-top: 1.5rem;
}

.side-group-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 0.375rem 0.75rem;
  font-weight: 500;
}

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  font-weight: 500;
}

.side-link .bi {
  font-size: 1.125rem;
}

.side-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.side-link:focus-visible {
  outline-color: var(--nx-optico);
}

.side-link.active {
  color: #fff;
  background: rgba(25, 182, 232, 0.12);
}

.side-link.active::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nx-optico);
  box-shadow: 0 0 10px rgba(25, 182, 232, 0.85);
}

.side-tag {
  margin-left: auto;
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

.side-foot {
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.side-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.side-user .avatar {
  background: var(--nx-optico);
  color: var(--nx-fibra);
}

.side-user strong {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-user small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}

.shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 64px;
  padding: 0 2rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nx-borde);
}

.topbar-fecha {
  color: var(--nx-tenue);
  font-size: 0.875rem;
}

.btn-icono {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  font-size: 1.375rem;
  color: var(--nx-tinta);
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border-radius: 999px;
  font-weight: 500;
  color: var(--nx-tinta);
}

.user-btn:hover,
.user-btn[aria-expanded='true'] {
  background: var(--nx-nube);
  border-color: var(--nx-borde);
}

.dropdown-header strong {
  display: block;
  color: var(--nx-tinta);
  font-size: 0.9375rem;
}

.content {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  padding: 2rem;
}

.foot {
  padding: 1rem 2rem 1.5rem;
  color: var(--nx-tenue);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.foot a {
  color: inherit;
}

@media (max-width: 991.98px) {
  .shell-side {
    flex-basis: 0;
    width: 0;
    position: static;
    height: auto;
  }

  .topbar,
  .content,
  .foot {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* --- Encabezado de página -------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

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

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--nx-tenue);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.back-link:hover {
  color: var(--nx-senal);
}

/* --- Paneles --------------------------------------------------------------- */

.nx-panel {
  background: #fff;
  border: 1px solid var(--nx-borde);
  border-radius: var(--nx-radio);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--nx-borde);
}

.panel-head h2 {
  font-size: 1rem;
  font-weight: 650;
  font-stretch: 108%;
  margin: 0;
}

.panel-head a {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.panel-body {
  padding: 1.25rem;
}

.panel-section {
  padding: 1.5rem;
  margin: 0;
  border: 0;
  min-width: 0;
}

.panel-section + .panel-section {
  border-top: 1px solid var(--nx-borde);
}

.panel-section legend {
  font-size: 1rem;
  font-weight: 650;
  font-stretch: 108%;
  margin-bottom: 1rem;
}

.panel-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--nx-borde);
  background: #fafbfd;
  border-radius: 0 0 var(--nx-radio) var(--nx-radio);
}

/* Franja de indicadores: las líneas divisorias salen del gap de 1px. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--nx-borde);
  overflow: hidden;
}

.stat {
  background: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.stat-label {
  color: var(--nx-tenue);
  font-size: 0.875rem;
}

.stat-value {
  font-stretch: 115%;
  font-weight: 650;
  font-size: 2.25rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat-note {
  font-size: 0.8125rem;
  color: var(--nx-tenue);
}

a.stat-note {
  color: var(--nx-senal);
  text-decoration: none;
}

.stat-alerta .stat-value {
  color: var(--nx-alerta);
}

@media (max-width: 1199.98px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Tablas ---------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}

.nx-table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: #f7f9fd;
  margin: 0;
}

.nx-table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nx-tenue);
  background: #fafbfd;
  border-bottom: 1px solid var(--nx-borde);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.nx-table thead th:first-child {
  border-top-left-radius: var(--nx-radio);
}

.nx-table thead th:last-child {
  border-top-right-radius: var(--nx-radio);
}

.nx-table td {
  padding: 0.875rem 1rem;
  border-color: var(--nx-borde-suave);
  vertical-align: middle;
}

.nx-table tbody tr:last-child td {
  border-bottom: 0;
}

.persona {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.persona strong {
  display: block;
  font-weight: 600;
}

.persona small {
  color: var(--nx-tenue);
}

.tag-tu {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--nx-senal);
  border: 1px solid #b3c7ff;
  border-radius: 999px;
  padding: 0 0.4375rem;
  margin-left: 0.375rem;
  vertical-align: 1px;
}

/* --- Filtros, paginación y estados vacíos ---------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.875rem;
  margin-bottom: 1rem;
  align-items: center;
}

.campo-busqueda {
  position: relative;
  flex: 1 1 260px;
}

.campo-busqueda .bi {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-tenue);
  pointer-events: none;
}

.campo-busqueda .form-control {
  padding-left: 2.5rem;
}

.filtros .form-select {
  width: auto;
  min-width: 170px;
}

/* En escritorio los filtros extra se alinean con la búsqueda; en móvil se pliegan. */
.vista-desktop .filtros-extra {
  display: contents;
}

.vista-mobile .filtros-extra {
  width: 100%;
}

.vista-mobile .filtros-extra-contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.paginador {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--nx-tenue);
  font-size: 0.875rem;
}

.vacio {
  text-align: center;
  padding: 2.75rem 1.5rem;
  color: var(--nx-tenue);
}

.vacio > .bi {
  font-size: 2rem;
  color: var(--nx-borde-fuerte);
  display: block;
  margin-bottom: 0.5rem;
}

.vacio strong {
  display: block;
  color: var(--nx-tinta);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.vacio .btn {
  margin-top: 1rem;
}

/* --- Feed de actividad y listas clave/valor -------------------------------- */

.feed {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.feed li {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  align-items: flex-start;
}

.feed li + li {
  border-top: 1px solid var(--nx-borde-suave);
}

.feed-icono {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--nx-nube);
  color: var(--nx-tenue);
  flex-shrink: 0;
}

.feed-alerta .feed-icono {
  background: var(--nx-alerta-suave);
  color: var(--nx-alerta);
}

.feed-texto {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.feed-texto small {
  display: block;
  color: var(--nx-tenue);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 1.25rem;
}

.kv dt {
  color: var(--nx-tenue);
  font-weight: 400;
}

.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.acciones-seguridad {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}

.acciones-seguridad form {
  margin: 0;
}

.acciones-seguridad .btn {
  width: 100%;
  justify-content: flex-start;
}

.acciones-seguridad .ayuda {
  font-size: 0.8125rem;
  color: var(--nx-tenue);
  margin: 0.25rem 0 0.5rem;
}

/* --- Credencial temporal --------------------------------------------------- */

.credencial {
  border: 1px solid #b9ccff;
  background: var(--nx-senal-suave);
  border-radius: var(--nx-radio);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.credencial-titulo {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  font-weight: 600;
  margin: 0;
}

.credencial-titulo .bi {
  color: var(--nx-senal);
  font-size: 1.125rem;
}

.credencial-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin: 0.875rem 0;
}

.credencial-datos dt {
  font-size: 0.8125rem;
  color: var(--nx-tenue);
  font-weight: 500;
}

/* Monoespaciada para distinguir caracteres al dictar la contraseña. */
.credencial-datos dd {
  font-family: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

.credencial-nota {
  font-size: 0.8125rem;
  color: var(--nx-tenue);
  margin: 0;
}

/* --- Contraseñas ----------------------------------------------------------- */

.input-password {
  position: relative;
}

.input-password .form-control {
  padding-right: 3rem;
}

.btn-ver {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--nx-tenue);
  border-radius: 6px;
}

.btn-ver:hover {
  color: var(--nx-tinta);
}

.input-password .form-control.is-invalid {
  background-image: none;
}

.reglas-password {
  list-style: none;
  padding: 0;
  margin: 0.625rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--nx-tenue);
}

.reglas-password li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.reglas-password li::before {
  content: '\f28a';
  font-family: 'bootstrap-icons';
  font-size: 0.8125rem;
}

.reglas-password li.ok {
  color: var(--nx-ok);
}

.reglas-password li.ok::before {
  content: '\f26a';
}

.form-angosto {
  max-width: 560px;
}

/* --- Inicio del técnico ---------------------------------------------------- */

.inicio-tecnico {
  max-width: 640px;
}

.tarjeta-resumen {
  position: relative;
  overflow: hidden;
  background: var(--nx-fibra);
  color: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.375rem 1.5rem;
  margin-bottom: 1rem;
}

.tarjeta-resumen::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nx-optico), rgba(25, 182, 232, 0) 75%);
  box-shadow: 0 0 12px rgba(25, 182, 232, 0.6);
}

.tarjeta-resumen-label {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.875rem;
}

.tarjeta-resumen-cifra {
  display: block;
  font-stretch: 115%;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.05;
  margin-top: 0.25rem;
}

.tarjeta-resumen-cifra small {
  font-size: 1rem;
  font-weight: 500;
  font-stretch: 100%;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 0.375rem;
}

.tarjeta-resumen-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.875rem 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
}

.tarjeta-resumen-datos strong {
  color: #fff;
  font-weight: 650;
}

.tarjeta-resumen .variacion-sube {
  color: #6ee7b7;
}

.tarjeta-resumen .variacion-baja {
  color: #fca5a5;
}

.tarjeta-resumen .variacion-igual {
  color: rgba(255, 255, 255, 0.7);
}

.accion-principal {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-radius: 14px;
  background: var(--nx-senal);
  color: #fff;
  text-decoration: none;
  min-height: 72px;
  margin-bottom: 1rem;
}

.accion-principal:hover {
  color: #fff;
  background: var(--nx-senal-hover);
}

.accion-principal > .bi {
  font-size: 1.625rem;
}

.accion-principal > .bi-chevron-right {
  margin-left: auto;
  font-size: 1.125rem;
  opacity: 0.8;
}

.accion-principal strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 650;
}

.accion-principal span {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* --- Vista móvil ----------------------------------------------------------- */

.vista-mobile {
  padding-top: calc(56px + env(safe-area-inset-top));
  padding-bottom: calc(var(--nx-barra-movil) + env(safe-area-inset-bottom));
}

.appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 0.75rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nx-fibra);
  color: #fff;
}

.appbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(25, 182, 232, 0), rgba(25, 182, 232, 0.65), rgba(25, 182, 232, 0));
}

.appbar .logo-mark {
  width: 26px;
  height: 26px;
}

.appbar .wordmark {
  font-size: 1rem;
}

.appbar-avatar {
  border: 0;
  background: none;
  padding: 6px;
  border-radius: 50%;
}

.appbar-avatar .avatar {
  background: var(--nx-optico);
  color: var(--nx-fibra);
  width: 34px;
  height: 34px;
}

.m-content {
  padding: 1.25rem 1rem 1.75rem;
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--nx-borde);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--nx-barra-movil);
  color: var(--nx-tenue);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  -webkit-tap-highlight-color: transparent;
}

.tab .bi {
  font-size: 1.375rem;
  line-height: 1;
}

.tab.active {
  color: var(--nx-senal);
  font-weight: 600;
}

.tab.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 26%;
  right: 26%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--nx-optico);
  box-shadow: 0 0 10px rgba(25, 182, 232, 0.75);
}

.hoja {
  --bs-offcanvas-height: auto;
  max-height: 88vh;
  border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.hoja-asa {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--nx-borde-fuerte);
  margin: 0.625rem auto 0;
}

.hoja .offcanvas-header {
  gap: 0.875rem;
  justify-content: flex-start;
  padding: 1rem 1.25rem 0.5rem;
}

.hoja .offcanvas-header strong {
  display: block;
  font-size: 1rem;
}

.hoja .offcanvas-body {
  padding: 0.25rem 1.25rem 1rem;
}

.hoja-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hoja-lista li + li {
  border-top: 1px solid var(--nx-borde-suave);
}

.hoja-lista form {
  margin: 0;
}

.hoja-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 54px;
  padding: 0 0.25rem;
  color: var(--nx-tinta);
  text-decoration: none;
  background: none;
  border: 0;
  font-size: 1rem;
  text-align: left;
}

.hoja-item .bi {
  font-size: 1.25rem;
  color: var(--nx-tenue);
  width: 24px;
}

.hoja-item.peligro,
.hoja-item.peligro .bi {
  color: var(--nx-error);
}

.hoja-separador {
  height: 8px;
  border: 0 !important;
}

.vista-mobile .page-title {
  font-size: 1.375rem;
}

.vista-mobile .page-head {
  margin-bottom: 1.125rem;
  align-items: flex-start;
}

.vista-mobile .page-actions,
.vista-mobile .page-actions .btn {
  width: 100%;
}

.vista-mobile .form-control,
.vista-mobile .form-select {
  min-height: 48px;
  font-size: 1rem;
}

.vista-mobile .btn {
  min-height: 46px;
}

.vista-mobile .btn-sm {
  min-height: 38px;
}

.vista-mobile .panel-section {
  padding: 1.25rem 1rem;
}

.vista-mobile .panel-foot {
  flex-direction: column-reverse;
  padding: 1rem;
}

.vista-mobile .panel-foot .btn {
  width: 100%;
}

.vista-mobile .stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vista-mobile .stat {
  padding: 1rem;
}

.vista-mobile .stat-value {
  font-size: 1.875rem;
}

.vista-mobile .kv {
  grid-template-columns: 1fr;
  gap: 0.125rem;
}

.vista-mobile .kv dd + dt {
  margin-top: 0.75rem;
}

.vista-mobile .reglas-password {
  grid-template-columns: 1fr;
}

.vista-mobile .filtros {
  padding: 0;
  border: 0;
  background: none;
}

.vista-mobile .filtros .form-select {
  flex: 1 1 140px;
  min-width: 0;
}

.vista-mobile .feed li {
  padding: 0.75rem 1rem;
}

.nx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--nx-borde);
  border-radius: var(--nx-radio);
  overflow: hidden;
}

.nx-list > li + li {
  border-top: 1px solid var(--nx-borde-suave);
}

.nx-list-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  min-height: 68px;
  color: inherit;
  text-decoration: none;
}

.nx-list-item:hover {
  color: inherit;
}

.nx-list-item:active {
  background: var(--nx-nube);
}

.nx-list-main {
  flex: 1;
  min-width: 0;
}

.nx-list-main strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-list-main small {
  display: block;
  color: var(--nx-tenue);
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-list-item > .bi-chevron-right {
  color: var(--nx-borde-fuerte);
}

.fab {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--nx-barra-movil) + 1rem + env(safe-area-inset-bottom));
  z-index: 1025;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--nx-senal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(31, 91, 255, 0.35);
}

.fab:hover {
  color: #fff;
  background: var(--nx-senal-hover);
}

.aviso-vista {
  font-size: 0.8125rem;
  color: var(--nx-tenue);
  text-align: center;
  margin: 1.5rem 0 0;
}

/* --- Acceso (login) -------------------------------------------------------- */

.auth-body {
  background: #fff;
  padding: 0;
}

.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr);
}

.auth-arte {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 80% at 32% 50%, #133171 0%, var(--nx-fibra) 62%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 3rem;
}

.auth-marca,
.auth-lema {
  position: relative;
}

.auth-marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.auth-marca .logo-mark {
  width: 40px;
  height: 40px;
}

.auth-marca .wordmark {
  font-size: 1.5rem;
}

.auth-lema h2 {
  font-stretch: 120%;
  font-weight: 650;
  font-size: 2.125rem;
  line-height: 1.12;
  max-width: 13ch;
  margin: 0;
}

.auth-lema p {
  color: rgba(255, 255, 255, 0.62);
  margin: 0.875rem 0 0;
  max-width: 36ch;
}

.auth-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 2rem 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  margin-block: auto;
}

.auth-titulo {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.auth-sub {
  color: var(--nx-tenue);
  margin-bottom: 1.75rem;
}

.auth-ayuda {
  color: var(--nx-tenue);
  font-size: 0.875rem;
  margin: 1.5rem 0 0;
}

.auth-pie {
  padding-top: 2rem;
  font-size: 0.8125rem;
  color: var(--nx-tenue);
  text-align: center;
}

.auth-pie a {
  color: inherit;
}

/* Arte de fibra: un tronco llega al splitter y se reparte hacia los hogares. */
.fibra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fibra-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.4;
}

.fibra-pulso {
  fill: none;
  stroke: var(--nx-optico);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 80 2000;
  stroke-dashoffset: 80;
}

.fibra-pulso.tronco {
  animation: pulso-tronco 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.fibra-pulso.rama {
  animation: pulso-rama 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.fibra-nodo {
  fill: var(--nx-fibra);
  stroke: var(--nx-optico);
  stroke-width: 2;
}

.fibra-anillo {
  fill: none;
  stroke: var(--nx-optico);
  stroke-width: 1.5;
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: anillo 5s ease-out infinite;
}

.fibra-hogar {
  fill: var(--nx-fibra);
  stroke: rgba(25, 182, 232, 0.55);
  stroke-width: 1.5;
  animation: hogar 5s ease-out infinite;
}

@keyframes pulso-tronco {
  0% {
    stroke-dashoffset: 80;
  }
  24%,
  100% {
    stroke-dashoffset: -1000;
  }
}

@keyframes pulso-rama {
  0%,
  22% {
    stroke-dashoffset: 80;
  }
  62%,
  100% {
    stroke-dashoffset: -1000;
  }
}

@keyframes anillo {
  0%,
  20% {
    transform: scale(1);
    opacity: 0.35;
  }
  26% {
    transform: scale(1.6);
    opacity: 0.7;
  }
  42%,
  100% {
    transform: scale(1);
    opacity: 0.35;
  }
}

@keyframes hogar {
  0%,
  56% {
    fill: var(--nx-fibra);
  }
  62% {
    fill: var(--nx-optico);
  }
  85%,
  100% {
    fill: var(--nx-fibra);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fibra-pulso {
    display: none;
  }

  .fibra-anillo,
  .fibra-hogar,
  .btn.is-loading::after {
    animation: none;
  }
}

/* Acceso en pantallas angostas (y siempre en la vista móvil). */
@media (max-width: 991.98px) {
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .auth-arte {
    min-height: 220px;
    padding: 1.5rem 1.25rem;
  }

  .auth-lema h2 {
    font-size: 1.375rem;
    max-width: 18ch;
  }

  .auth-lema p {
    display: none;
  }

  .auth-panel {
    padding: 2rem 1.25rem 1.5rem;
  }
}

.vista-mobile.auth-body .auth {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.vista-mobile.auth-body .auth-arte {
  min-height: 220px;
  padding: calc(1.5rem + env(safe-area-inset-top)) 1.25rem 1.5rem;
}

.vista-mobile.auth-body .auth-lema h2 {
  font-size: 1.375rem;
  max-width: 18ch;
}

.vista-mobile.auth-body .auth-lema p {
  display: none;
}

.vista-mobile.auth-body .auth-panel {
  padding: 2rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}

/* --- Error ----------------------------------------------------------------- */

.error-codigo {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--nx-senal);
  margin-bottom: 0.75rem;
}

/* Desfase leve entre ramas: la señal se reparte de forma orgánica. */
.pulsos-rama .rama:nth-child(2), .hogares .fibra-hogar:nth-child(2) { animation-delay: 0.05s; }
.pulsos-rama .rama:nth-child(3), .hogares .fibra-hogar:nth-child(3) { animation-delay: 0.1s; }
.pulsos-rama .rama:nth-child(4), .hogares .fibra-hogar:nth-child(4) { animation-delay: 0.02s; }
.pulsos-rama .rama:nth-child(5), .hogares .fibra-hogar:nth-child(5) { animation-delay: 0.07s; }
.pulsos-rama .rama:nth-child(6), .hogares .fibra-hogar:nth-child(6) { animation-delay: 0.12s; }
.pulsos-rama .rama:nth-child(7), .hogares .fibra-hogar:nth-child(7) { animation-delay: 0.04s; }
.pulsos-rama .rama:nth-child(8), .hogares .fibra-hogar:nth-child(8) { animation-delay: 0.09s; }

.min-w-0 {
  min-width: 0;
}

.vista-mobile .campo-busqueda {
  flex: 1 1 0;
  min-width: 0;
}

.vista-mobile .filtros input[type='date'] {
  flex: 1 1 140px;
  width: auto;
}

/* --- Producción ------------------------------------------------------------ */

.chips-mes {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-bottom: 1.25rem;
  scrollbar-width: none;
}

.chips-mes::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--nx-borde-fuerte);
  background: #fff;
  color: var(--nx-tinta);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.chip:hover {
  color: var(--nx-tinta);
  border-color: var(--nx-senal);
}

.chip.activo {
  background: var(--nx-fibra);
  border-color: var(--nx-fibra);
  color: #fff;
}

.vista-mobile .chip {
  min-height: 40px;
}

.variacion {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.variacion-sube {
  color: var(--nx-ok);
}

.variacion-baja {
  color: var(--nx-error);
}

.variacion-igual {
  color: var(--nx-tenue);
}

.stats-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
  .stats-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vista-desktop .stats > .stat:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

.vista-mobile .stats > .stat:last-child:nth-child(odd) {
  grid-column: span 2;
}

/* Medidor de participación: pista del mismo azul en un tono claro. */
.medidor {
  display: inline-block;
  flex: 1 1 auto;
  width: 100%;
  max-width: 120px;
  height: 6px;
  border-radius: 3px;
  background: var(--nx-senal-suave);
  overflow: hidden;
}

.medidor-relleno {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--nx-senal);
}

.participacion {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 150px;
}

.participacion .num {
  min-width: 3.25rem;
  text-align: right;
  font-size: 0.875rem;
}

/* Gráfica de columnas de una serie */
.grafica {
  position: relative;
  padding: 1.25rem 1.25rem 1rem;
}

.grafica-area {
  position: relative;
  height: 200px;
  margin-left: 2.75rem;
}

.vista-mobile .grafica-area {
  height: 160px;
}

.grafica-guia {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--nx-borde-suave);
}

.grafica-guia.pos-0 {
  border-top-color: var(--nx-borde-fuerte);
}

.grafica-guia span {
  position: absolute;
  right: calc(100% + 0.5rem);
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--nx-tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grafica-columnas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.grafica-col {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 4px;
}

.grafica-col:focus-visible {
  outline: 2px solid var(--nx-senal);
  outline-offset: 1px;
}

.grafica-barra {
  display: block;
  width: 100%;
  max-width: 24px;
  background: var(--nx-senal);
  border-radius: 4px 4px 0 0;
  transition: background-color 0.12s;
}

.grafica-col:hover .grafica-barra,
.grafica-col:focus-visible .grafica-barra {
  background: #5683ff;
}

/* Con un periodo resaltado, el resto pasa a un azul tenue. */
.grafica.con-resalte .grafica-barra {
  background: #c3d3ff;
}

.grafica.con-resalte .resaltada .grafica-barra {
  background: var(--nx-senal);
}

.grafica-valor {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -0.375rem);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nx-tinta);
  white-space: nowrap;
}

.grafica-eje {
  display: flex;
  gap: 2px;
  margin: 0.375rem 0 0 2.75rem;
}

.grafica-eje span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--nx-tenue);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grafica-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid var(--nx-borde);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 31, 68, 0.14);
  pointer-events: none;
  transform: translate(-50%, -100%);
}

.grafica-tooltip strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
}

.grafica-tooltip span,
.grafica-tooltip small {
  display: block;
  font-size: 0.8125rem;
  color: var(--nx-tenue);
}

.grafica-tabla {
  padding: 0 1.25rem 1rem;
  font-size: 0.875rem;
}

.grafica-tabla summary {
  color: var(--nx-senal);
  cursor: pointer;
  font-weight: 500;
  width: max-content;
}

.grafica-tabla table {
  margin-top: 0.75rem;
  max-width: 480px;
}

/* Carga de archivos */
.zona-carga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.zona-carga .form-control {
  flex: 1 1 280px;
  width: auto;
}

.resumen-carga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--nx-borde);
  overflow: hidden;
}

.resumen-carga > div {
  background: #fff;
  padding: 1rem 1.25rem;
}

.resumen-carga dt {
  font-weight: 400;
  color: var(--nx-tenue);
  font-size: 0.8125rem;
}

.resumen-carga dd {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 650;
  font-stretch: 110%;
}

.celda-actividad {
  max-width: 340px;
}

.celda-actividad small,
.celda-sub {
  display: block;
  color: var(--nx-tenue);
  font-size: 0.8125rem;
}

/* --- Escalas 0-100 % (generadas): alturas, posiciones y anchos ------------ */
.alto-0{height:0%}.pos-0{bottom:0%}.ancho-0{width:0%}
.alto-1{height:1%}.pos-1{bottom:1%}.ancho-1{width:1%}
.alto-2{height:2%}.pos-2{bottom:2%}.ancho-2{width:2%}
.alto-3{height:3%}.pos-3{bottom:3%}.ancho-3{width:3%}
.alto-4{height:4%}.pos-4{bottom:4%}.ancho-4{width:4%}
.alto-5{height:5%}.pos-5{bottom:5%}.ancho-5{width:5%}
.alto-6{height:6%}.pos-6{bottom:6%}.ancho-6{width:6%}
.alto-7{height:7%}.pos-7{bottom:7%}.ancho-7{width:7%}
.alto-8{height:8%}.pos-8{bottom:8%}.ancho-8{width:8%}
.alto-9{height:9%}.pos-9{bottom:9%}.ancho-9{width:9%}
.alto-10{height:10%}.pos-10{bottom:10%}.ancho-10{width:10%}
.alto-11{height:11%}.pos-11{bottom:11%}.ancho-11{width:11%}
.alto-12{height:12%}.pos-12{bottom:12%}.ancho-12{width:12%}
.alto-13{height:13%}.pos-13{bottom:13%}.ancho-13{width:13%}
.alto-14{height:14%}.pos-14{bottom:14%}.ancho-14{width:14%}
.alto-15{height:15%}.pos-15{bottom:15%}.ancho-15{width:15%}
.alto-16{height:16%}.pos-16{bottom:16%}.ancho-16{width:16%}
.alto-17{height:17%}.pos-17{bottom:17%}.ancho-17{width:17%}
.alto-18{height:18%}.pos-18{bottom:18%}.ancho-18{width:18%}
.alto-19{height:19%}.pos-19{bottom:19%}.ancho-19{width:19%}
.alto-20{height:20%}.pos-20{bottom:20%}.ancho-20{width:20%}
.alto-21{height:21%}.pos-21{bottom:21%}.ancho-21{width:21%}
.alto-22{height:22%}.pos-22{bottom:22%}.ancho-22{width:22%}
.alto-23{height:23%}.pos-23{bottom:23%}.ancho-23{width:23%}
.alto-24{height:24%}.pos-24{bottom:24%}.ancho-24{width:24%}
.alto-25{height:25%}.pos-25{bottom:25%}.ancho-25{width:25%}
.alto-26{height:26%}.pos-26{bottom:26%}.ancho-26{width:26%}
.alto-27{height:27%}.pos-27{bottom:27%}.ancho-27{width:27%}
.alto-28{height:28%}.pos-28{bottom:28%}.ancho-28{width:28%}
.alto-29{height:29%}.pos-29{bottom:29%}.ancho-29{width:29%}
.alto-30{height:30%}.pos-30{bottom:30%}.ancho-30{width:30%}
.alto-31{height:31%}.pos-31{bottom:31%}.ancho-31{width:31%}
.alto-32{height:32%}.pos-32{bottom:32%}.ancho-32{width:32%}
.alto-33{height:33%}.pos-33{bottom:33%}.ancho-33{width:33%}
.alto-34{height:34%}.pos-34{bottom:34%}.ancho-34{width:34%}
.alto-35{height:35%}.pos-35{bottom:35%}.ancho-35{width:35%}
.alto-36{height:36%}.pos-36{bottom:36%}.ancho-36{width:36%}
.alto-37{height:37%}.pos-37{bottom:37%}.ancho-37{width:37%}
.alto-38{height:38%}.pos-38{bottom:38%}.ancho-38{width:38%}
.alto-39{height:39%}.pos-39{bottom:39%}.ancho-39{width:39%}
.alto-40{height:40%}.pos-40{bottom:40%}.ancho-40{width:40%}
.alto-41{height:41%}.pos-41{bottom:41%}.ancho-41{width:41%}
.alto-42{height:42%}.pos-42{bottom:42%}.ancho-42{width:42%}
.alto-43{height:43%}.pos-43{bottom:43%}.ancho-43{width:43%}
.alto-44{height:44%}.pos-44{bottom:44%}.ancho-44{width:44%}
.alto-45{height:45%}.pos-45{bottom:45%}.ancho-45{width:45%}
.alto-46{height:46%}.pos-46{bottom:46%}.ancho-46{width:46%}
.alto-47{height:47%}.pos-47{bottom:47%}.ancho-47{width:47%}
.alto-48{height:48%}.pos-48{bottom:48%}.ancho-48{width:48%}
.alto-49{height:49%}.pos-49{bottom:49%}.ancho-49{width:49%}
.alto-50{height:50%}.pos-50{bottom:50%}.ancho-50{width:50%}
.alto-51{height:51%}.pos-51{bottom:51%}.ancho-51{width:51%}
.alto-52{height:52%}.pos-52{bottom:52%}.ancho-52{width:52%}
.alto-53{height:53%}.pos-53{bottom:53%}.ancho-53{width:53%}
.alto-54{height:54%}.pos-54{bottom:54%}.ancho-54{width:54%}
.alto-55{height:55%}.pos-55{bottom:55%}.ancho-55{width:55%}
.alto-56{height:56%}.pos-56{bottom:56%}.ancho-56{width:56%}
.alto-57{height:57%}.pos-57{bottom:57%}.ancho-57{width:57%}
.alto-58{height:58%}.pos-58{bottom:58%}.ancho-58{width:58%}
.alto-59{height:59%}.pos-59{bottom:59%}.ancho-59{width:59%}
.alto-60{height:60%}.pos-60{bottom:60%}.ancho-60{width:60%}
.alto-61{height:61%}.pos-61{bottom:61%}.ancho-61{width:61%}
.alto-62{height:62%}.pos-62{bottom:62%}.ancho-62{width:62%}
.alto-63{height:63%}.pos-63{bottom:63%}.ancho-63{width:63%}
.alto-64{height:64%}.pos-64{bottom:64%}.ancho-64{width:64%}
.alto-65{height:65%}.pos-65{bottom:65%}.ancho-65{width:65%}
.alto-66{height:66%}.pos-66{bottom:66%}.ancho-66{width:66%}
.alto-67{height:67%}.pos-67{bottom:67%}.ancho-67{width:67%}
.alto-68{height:68%}.pos-68{bottom:68%}.ancho-68{width:68%}
.alto-69{height:69%}.pos-69{bottom:69%}.ancho-69{width:69%}
.alto-70{height:70%}.pos-70{bottom:70%}.ancho-70{width:70%}
.alto-71{height:71%}.pos-71{bottom:71%}.ancho-71{width:71%}
.alto-72{height:72%}.pos-72{bottom:72%}.ancho-72{width:72%}
.alto-73{height:73%}.pos-73{bottom:73%}.ancho-73{width:73%}
.alto-74{height:74%}.pos-74{bottom:74%}.ancho-74{width:74%}
.alto-75{height:75%}.pos-75{bottom:75%}.ancho-75{width:75%}
.alto-76{height:76%}.pos-76{bottom:76%}.ancho-76{width:76%}
.alto-77{height:77%}.pos-77{bottom:77%}.ancho-77{width:77%}
.alto-78{height:78%}.pos-78{bottom:78%}.ancho-78{width:78%}
.alto-79{height:79%}.pos-79{bottom:79%}.ancho-79{width:79%}
.alto-80{height:80%}.pos-80{bottom:80%}.ancho-80{width:80%}
.alto-81{height:81%}.pos-81{bottom:81%}.ancho-81{width:81%}
.alto-82{height:82%}.pos-82{bottom:82%}.ancho-82{width:82%}
.alto-83{height:83%}.pos-83{bottom:83%}.ancho-83{width:83%}
.alto-84{height:84%}.pos-84{bottom:84%}.ancho-84{width:84%}
.alto-85{height:85%}.pos-85{bottom:85%}.ancho-85{width:85%}
.alto-86{height:86%}.pos-86{bottom:86%}.ancho-86{width:86%}
.alto-87{height:87%}.pos-87{bottom:87%}.ancho-87{width:87%}
.alto-88{height:88%}.pos-88{bottom:88%}.ancho-88{width:88%}
.alto-89{height:89%}.pos-89{bottom:89%}.ancho-89{width:89%}
.alto-90{height:90%}.pos-90{bottom:90%}.ancho-90{width:90%}
.alto-91{height:91%}.pos-91{bottom:91%}.ancho-91{width:91%}
.alto-92{height:92%}.pos-92{bottom:92%}.ancho-92{width:92%}
.alto-93{height:93%}.pos-93{bottom:93%}.ancho-93{width:93%}
.alto-94{height:94%}.pos-94{bottom:94%}.ancho-94{width:94%}
.alto-95{height:95%}.pos-95{bottom:95%}.ancho-95{width:95%}
.alto-96{height:96%}.pos-96{bottom:96%}.ancho-96{width:96%}
.alto-97{height:97%}.pos-97{bottom:97%}.ancho-97{width:97%}
.alto-98{height:98%}.pos-98{bottom:98%}.ancho-98{width:98%}
.alto-99{height:99%}.pos-99{bottom:99%}.ancho-99{width:99%}
.alto-100{height:100%}.pos-100{bottom:100%}.ancho-100{width:100%}

.vista-mobile .filtros .filtro-completo {
  flex: 1 1 100%;
}

.stats-5 .stat {
  padding: 1.25rem;
}

.stats-5 .stat-value {
  font-size: 1.875rem;
}

/* --- Registro de producción (formulario del técnico) ----------------------- */

.registro-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 760px;
}

#f-peticion {
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.segmentado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.segmento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 76px;
  padding: 0.5rem;
  border: 1px solid var(--nx-borde-fuerte);
  border-radius: var(--nx-radio);
  background: #fff;
  color: var(--nx-tinta);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.segmento .bi {
  font-size: 1.375rem;
  color: var(--nx-tenue);
}

.segmento:hover {
  border-color: var(--nx-senal);
}

.btn-check:checked + .segmento {
  border-color: var(--nx-senal);
  background: var(--nx-senal-suave);
  color: var(--nx-senal-activo);
  box-shadow: inset 0 0 0 1px var(--nx-senal);
}

.btn-check:checked + .segmento .bi {
  color: var(--nx-senal);
}

.btn-check:focus-visible + .segmento {
  outline: 2px solid var(--nx-senal);
  outline-offset: 2px;
}

.segmentado.is-invalid .segmento {
  border-color: var(--nx-error);
}

.items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.item-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 0.5rem 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--nx-borde);
  border-radius: 10px;
  background: var(--nx-nube);
}

.item-actividad {
  min-width: 0;
}

.item-actividad .form-select {
  background-color: #fff;
}

.item-detalle {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--nx-tenue);
}

.item-detalle:empty {
  display: none;
}

.paso {
  display: flex;
}

.paso .form-control {
  width: 3.5rem;
  text-align: center;
  border-radius: 0;
  background: #fff;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.paso .form-control::-webkit-inner-spin-button,
.paso .form-control::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.paso-btn {
  width: 2.5rem;
  border: 1px solid var(--nx-borde-fuerte);
  background: #fff;
  color: var(--nx-tinta);
}

.paso-btn:first-child {
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.paso-btn:last-child {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.paso-btn:hover {
  background: var(--nx-senal-suave);
  color: var(--nx-senal-activo);
}

.item-quitar {
  width: 2.5rem;
  height: 38px;
  padding: 0;
  color: var(--nx-tenue);
  border: 1px solid transparent;
}

.item-quitar:hover {
  color: var(--nx-error);
  border-color: #efc2c2;
  background: #fff;
}

.vista-mobile .item-fila {
  grid-template-columns: minmax(0, 1fr) auto;
}

.vista-mobile .item-actividad {
  grid-column: 1 / -1;
}

.vista-mobile .paso-btn {
  width: 3rem;
}

.vista-mobile .paso .form-control {
  width: 4rem;
}

.vista-mobile .item-quitar {
  height: 48px;
  width: 3rem;
}

.total-registro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--nx-borde);
  background: #fafbfd;
  border-radius: 0 0 var(--nx-radio) var(--nx-radio);
}

.total-registro span {
  color: var(--nx-tenue);
}

.total-registro strong {
  font-stretch: 115%;
  font-size: 1.375rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.acciones-registro {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.vista-mobile .acciones-registro {
  flex-direction: column-reverse;
}

.vista-mobile .acciones-registro .btn {
  width: 100%;
}

.estado-error {
  color: var(--nx-error);
}

/* Cifras compactas del inicio del técnico */
.mini-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 1.25rem 0.25rem;
}

.mini-cifras dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nx-tenue);
}

.mini-cifras dd {
  margin: 0.125rem 0 0;
  font-stretch: 115%;
  font-size: 1.5rem;
  font-weight: 650;
}

.mini-cifras .alerta dd {
  color: var(--nx-error);
}

.mini-cifras-nota {
  margin: 0;
  padding: 0.25rem 1.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--nx-tenue);
}

.tarjeta-resumen-enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.875rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.tarjeta-resumen-enlace:hover {
  color: var(--nx-optico);
}

.stat-error .stat-value {
  color: var(--nx-error);
}