.boton {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.68rem 0.95rem;
  font-weight: 760;
  line-height: 1.1;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.boton:hover {
  transform: translateY(-1px);
}

.boton:disabled {
  opacity: 0.58;
  transform: none;
}

.boton-primario {
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: var(--sombra-boton);
}

.boton-primario:hover {
  background: var(--color-primary-hover);
  color: #ffffff;
}

.boton-secundario {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.boton-secundario:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-primary-hover);
}

.boton-terciario {
  background: transparent;
  color: var(--color-text-secondary);
}

.boton-terciario:hover {
  background: var(--color-surface-tertiary);
  color: var(--color-text);
}

.boton-peligro {
  border-color: color-mix(in srgb, var(--color-danger) 42%, var(--color-border));
  color: var(--color-danger);
}

.boton-peligro:hover {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.boton-icono {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
}

.boton-mini {
  min-height: 34px;
  padding: 0.38rem 0.58rem;
  font-size: 0.84rem;
}

.icono {
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--icono-url) center / contain no-repeat;
  -webkit-mask: var(--icono-url) center / contain no-repeat;
}

.icono-circle-question {
  --icono-url: url("/assets/iconos/circle-question.svg");
}

.icono-chevron-left {
  --icono-url: url("/assets/iconos/chevron-left.svg");
}

.icono-chevron-right {
  --icono-url: url("/assets/iconos/chevron-right.svg");
}

.icono-eye {
  --icono-url: url("/assets/iconos/eye.svg");
}

.icono-eye-slash {
  --icono-url: url("/assets/iconos/eye-slash.svg");
}

.icono-moon {
  --icono-url: url("/assets/iconos/moon.svg");
}

.icono-right-to-bracket {
  --icono-url: url("/assets/iconos/right-to-bracket.svg");
}

.icono-right-from-bracket {
  --icono-url: url("/assets/iconos/right-from-bracket.svg");
}

.icono-gauge-high {
  --icono-url: url("/assets/iconos/gauge-high.svg");
}

.icono-users {
  --icono-url: url("/assets/iconos/users.svg");
}

.icono-id-card {
  --icono-url: url("/assets/iconos/id-card.svg");
}

.icono-pen-to-square {
  --icono-url: url("/assets/iconos/pen-to-square.svg");
}

.icono-user-slash {
  --icono-url: url("/assets/iconos/user-slash.svg");
}

.icono-user-check {
  --icono-url: url("/assets/iconos/user-check.svg");
}

.icono-key {
  --icono-url: url("/assets/iconos/key.svg");
}

.icono-trash {
  --icono-url: url("/assets/iconos/trash.svg");
}

.icono-building {
  --icono-url: url("/assets/iconos/building.svg");
}

.icono-user-shield {
  --icono-url: url("/assets/iconos/user-shield.svg");
}

.icono-comments {
  --icono-url: url("/assets/iconos/comments.svg");
}

.icono-gear {
  --icono-url: url("/assets/iconos/gear.svg");
}

.icono-sun {
  --icono-url: url("/assets/iconos/sun.svg");
}

.notificacion {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.78rem 0.9rem;
  background: var(--color-info-soft);
  color: var(--color-info);
  font-weight: 650;
}

.notificacion:empty {
  display: none;
}

.notificacion::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  margin-top: 0.42rem;
  background: currentColor;
}

.notificacion-error {
  border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border));
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.notificacion-exito {
  border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border));
  background: var(--color-success-soft);
  color: var(--color-success);
}

.notificacion-advertencia {
  border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-border));
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.bloque-estado {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-sm);
}

.bloque-estado h1,
.bloque-estado h2,
.bloque-estado h3,
.bloque-estado p {
  margin: 0;
}

.bloque-estado h1,
.bloque-estado h2,
.bloque-estado h3 {
  color: var(--color-text);
}

.modal-capa {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 13, 25, 0.62);
  backdrop-filter: blur(4px);
}

.modal-panel {
  display: grid;
  width: min(100%, 620px);
  max-height: calc(100vh - 2rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.modal-panel > form,
.modal-panel > .detalle-modal,
.modal-panel > .modal-qr,
.modal-panel > p {
  min-height: 0;
  overflow: auto;
  padding: 0 1.35rem 1.35rem;
}

.modal-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 1.35rem;
}

.modal-encabezado h2 {
  margin: 0;
  color: var(--color-text);
  font-size: 1.25rem;
  letter-spacing: 0;
}

.modal-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top: 1px solid var(--color-border);
  padding: 1rem 1.35rem;
  background: var(--color-surface-secondary);
}

.estado {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.38rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  background: var(--color-info-soft);
  color: var(--color-info);
  font-size: 0.8rem;
  font-weight: 820;
}

.estado::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.estado-activa,
.estado-en_residencial,
.estado-activo {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.estado-proxima {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.estado-expirada {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.estado-consumida {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.estado-cancelada,
.estado-suspendido,
.estado-cerrado {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.qr-contenedor {
  display: grid;
  justify-items: center;
}

.qr-imagen {
  width: min(100%, 210px);
  height: auto;
  border: 8px solid #ffffff;
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.qr-grande .qr-imagen {
  width: min(100%, 300px);
}

.menu-usuario {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
  color: var(--color-text);
}

.menu-usuario strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.menu-usuario span {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.84rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-iniciales {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-weight: 840;
}

.lista-compacta {
  display: grid;
  gap: 0.65rem;
}

.detalle-modal {
  display: grid;
  gap: 0.8rem;
}