/* Estilos de /seguimiento — pagina publica para consultar una reparacion.
   Complementa las utilidades Bootstrap del template; evita `style="..."`
   inline por politica CSP del proyecto (style-src sin unsafe-inline). */

.seguimiento-main {
  /* Pequeno refuerzo sobre `bg-body-tertiary` del template: un gradiente muy
     sutil que da mas profundidad que un color plano. */
  background: linear-gradient(
    180deg,
    var(--bs-tertiary-bg) 0%,
    rgba(var(--bs-primary-rgb), 0.04) 100%
  );
}

.seguimiento-hero-icon {
  height: 4.5rem;
  width: 4.5rem;
}

.seguimiento-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.seguimiento-card:hover {
  box-shadow: 0 1.5rem 3rem rgba(var(--bs-primary-rgb), 0.12) !important;
  transform: translateY(-2px);
}

.seguimiento-input-group:focus-within {
  box-shadow:
    0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2),
    0 0.25rem 0.75rem rgba(var(--bs-primary-rgb), 0.08) !important;
  border-color: var(--bs-primary) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.seguimiento-input {
  letter-spacing: 0.06em;
  box-shadow: none;
}

.seguimiento-input:focus {
  background-color: var(--bs-body-bg) !important;
  box-shadow: none;
}

.seguimiento-submit {
  border: 1px solid var(--bs-primary) !important;
  border-radius: var(--bs-border-radius-pill) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.seguimiento-submit:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 0.75rem 1.5rem rgba(var(--bs-primary-rgb), 0.45);
  transform: translateY(-1px);
}

.seguimiento-submit:active {
  transform: translateY(0);
}

.seguimiento-hint {
  backdrop-filter: blur(4px);
}

/* Dark mode: fondo del pill del hint coherente con la base. */
[data-bs-theme="dark"] .seguimiento-hint {
  background-color: rgba(var(--bs-body-color-rgb), 0.04) !important;
  border-color: rgba(var(--bs-body-color-rgb), 0.12) !important;
}

/* ---------- Vista del estado (/seguimiento/{codigo}) ---------- */

.seguimiento-codigo-display {
  color: var(--bs-primary);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin: 0;
}

.seguimiento-codigo-card-jefe .seguimiento-codigo-display {
  font-size: 1.75rem;
  letter-spacing: 0.14em;
}

.seguimiento-estado-badge {
  background-color: var(--bs-secondary);
  color: #ffffff;
  border-radius: 2rem;
  letter-spacing: 0.02em;
}

.seguimiento-estado-badge i {
  font-size: 0.5rem;
  vertical-align: middle;
}