/* ===== Reset ===== */
*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

body {
   font-family: var(--font-family);
   color: var(--text-primary);
   background: var(--bg-primary);
   background-image:
      radial-gradient(ellipse at 20% 50%, rgba(0, 122, 255, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(0, 122, 255, 0.04) 0%, transparent 50%);
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* ===== Navbar ===== */
.navbar {
   width: 100%;
   height: var(--navbar-h);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--space-8);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
   background: rgba(255, 255, 255, 0.72);
   backdrop-filter: saturate(180%) blur(1.25rem);
   -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
   border-bottom: 0.0625rem solid var(--gray-200);
}

.navbar__logo {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   cursor: pointer;
   text-decoration: none;
}

.navbar__logo img {
   height: 1.75rem;
}

.navbar__logo span {
   font-size: var(--font-md);
   font-weight: var(--font-weight-semibold);
   color: var(--text-primary);
   letter-spacing: -0.02em;
}

.navbar__menu {
   list-style: none;
   display: flex;
   gap: var(--space-1);
   visibility: hidden;
   opacity: 0;
   transition: opacity var(--duration-normal) var(--ease-out),
               visibility var(--duration-normal) var(--ease-out);
}

.navbar__menu.show {
   visibility: visible;
   opacity: 1;
}

.navbar__menu a {
   text-decoration: none;
   color: var(--text-secondary);
   font-size: var(--font-sm);
   font-weight: var(--font-weight-medium);
   padding: var(--space-2) var(--space-4);
   border-radius: var(--radius-full);
   transition: all var(--duration-fast) ease;
}

.navbar__menu a:hover {
   color: var(--accent);
   background: var(--accent-light);
}

/* ===== Main Layout ===== */
.main {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: calc(100vh - var(--navbar-h) - var(--footer-h));
   margin-top: var(--navbar-h);
   margin-bottom: var(--footer-h);
   padding: var(--space-8);
   transition: all var(--duration-layout) var(--ease-out);
}

/* Estado con resultados: separar scan a la izquierda */
.main.has-results {
   gap: clamp(var(--space-8), 5vw, var(--space-16));
}

/* ===== Scan Card ===== */
.scan-card {
   flex: 0 0 auto;
   width: clamp(18rem, 25vw, 22rem);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--space-8);
   padding: var(--space-12) var(--space-10);
   background: var(--bg-card);
   backdrop-filter: saturate(180%) blur(1.25rem);
   -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
   border: 0.0625rem solid var(--gray-200);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   transition: all var(--duration-layout) var(--ease-out);
}

.scan-card:hover {
   box-shadow: var(--shadow-lg), 0 0 0 0.0625rem rgba(0, 122, 255, 0.08);
}

.scan-card__icon {
   width: 5rem;
   height: 5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-blue);
}

.scan-card__icon svg {
   width: 2.5rem;
   height: 2.5rem;
   fill: var(--white);
}

.scan-card__title {
   font-size: var(--font-xl);
   font-weight: var(--font-weight-bold);
   color: var(--text-primary);
   letter-spacing: -0.03em;
   text-align: center;
}

.scan-card__subtitle {
   font-size: var(--font-sm);
   color: var(--text-secondary);
   text-align: center;
   margin-top: calc(var(--space-1) * -1);
}

.scan-card__form {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}

.scan-card__input {
   width: 100%;
   padding: var(--space-4) var(--space-5);
   border: 0.1rem solid var(--gray-200);
   border-radius: var(--radius-md);
   font-family: var(--font-family);
   font-size: var(--font-md);
   color: var(--text-primary);
   background: var(--white);
   outline: none;
   transition: all var(--duration-fast) ease;
}

.scan-card__input::placeholder {
   color: var(--gray-400);
}

.scan-card__input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.12);
}

.scan-card__btn {
   width: 100%;
   padding: var(--space-4);
   border: none;
   border-radius: var(--radius-md);
   font-family: var(--font-family);
   font-size: var(--font-md);
   font-weight: var(--font-weight-semibold);
   color: var(--white);
   background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
   cursor: pointer;
   transition: all var(--duration-fast) ease;
   box-shadow: var(--shadow-sm);
}

.scan-card__btn:hover {
   background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
   box-shadow: var(--shadow-blue);
   transform: translateY(-0.0625rem);
}

.scan-card__btn:active {
   transform: translateY(0);
   box-shadow: var(--shadow-sm);
}

/* ===== Results Panel ===== */
.results {
   flex: 0 1 auto;
   width: 0;
   max-width: 0;
   overflow: hidden;
   opacity: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--space-6);
   transition: all var(--duration-layout) var(--ease-out);
}

.main.has-results .results {
   width: clamp(20rem, 40vw, 38rem);
   max-width: clamp(20rem, 40vw, 38rem);
   opacity: 1;
}

/* Login pill */
.result-login {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-6);
   background: var(--bg-card);
   backdrop-filter: blur(0.75rem);
   -webkit-backdrop-filter: blur(0.75rem);
   border: 0.0625rem solid var(--gray-200);
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-sm);
   opacity: 0;
   transform: translateY(0.5rem);
   animation: fadeInUp var(--duration-slow) var(--ease-out) 0.3s forwards;
}

.result-login__icon {
   width: 2rem;
   height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--accent-light);
   border-radius: 50%;
}

.result-login__icon svg {
   width: 1rem;
   height: 1rem;
   fill: var(--accent);
}

.result-login p {
   font-size: var(--font-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--text-primary);
}

/* Department + Process card */
.result-card {
   width: 100%;
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   opacity: 0;
   transform: translateY(1rem);
   animation: fadeInUp var(--duration-slow) var(--ease-out) 0.45s forwards;
}

.result-card__dept {
   padding: var(--space-8) var(--space-10);
   background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
   text-align: center;
}

.result-card__dept-label {
   font-size: var(--font-xs);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: rgba(255, 255, 255, 0.6);
   margin-bottom: var(--space-2);
}

.result-card__dept-value {
   font-size: var(--font-3xl);
   font-weight: var(--font-weight-bold);
   color: var(--white);
   letter-spacing: -0.03em;
}

.result-card__proc {
   padding: var(--space-10);
   background: var(--blue-900);
   text-align: center;
}

.result-card__proc-label {
   font-size: var(--font-xs);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: rgba(255, 255, 255, 0.4);
   margin-bottom: var(--space-2);
}

.result-card__proc-value {
   font-size: var(--font-4xl);
   font-weight: var(--font-weight-bold);
   color: var(--white);
   letter-spacing: -0.03em;
}

/* Error / message */
.result-message {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-5) var(--space-6);
   background: var(--bg-card);
   backdrop-filter: blur(0.75rem);
   -webkit-backdrop-filter: blur(0.75rem);
   border: 0.0625rem solid var(--gray-200);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   opacity: 0;
   transform: translateY(0.5rem);
   animation: fadeInUp var(--duration-slow) var(--ease-out) 0.3s forwards;
}

.result-message svg {
   width: 1.5rem;
   height: 1.5rem;
   fill: var(--gray-400);
   flex-shrink: 0;
}

.result-message p {
   font-size: var(--font-md);
   color: var(--text-secondary);
   font-weight: var(--font-weight-medium);
}

/* Mensaje extra (información adicional) */
.result-message-extra {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   padding: var(--space-5) var(--space-6);
   margin-top: var(--space-6);
   background: linear-gradient(135deg, #FFF4CC, #FFE699);
   border: 0.0625rem solid rgba(255, 193, 7, 0.2);
   border-radius: var(--radius-md);
   box-shadow: 0 0.125rem 0.5rem rgba(255, 193, 7, 0.2);
   opacity: 0;
   transform: translateY(0.5rem);
   animation: fadeInUp var(--duration-slow) var(--ease-out) 0.6s forwards;
   width: 100%;
   max-width: clamp(20rem, 40vw, 38rem);
}

.result-message-extra__icon {
   width: 2rem;
   height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   flex-shrink: 0;
}

.result-message-extra__icon svg {
   width: 1.25rem;
   height: 1.25rem;
   fill: var(--gray-700);
}

.result-message-extra p {
   font-size: var(--font-md);
   color: var(--gray-800);
   font-weight: var(--font-weight-semibold);
   margin: 0;
   line-height: 1.5;
}

/* ===== Footer ===== */
.footer {
   width: 100%;
   height: var(--footer-h);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--space-8);
   position: fixed;
   bottom: 0;
   left: 0;
   background: rgba(255, 255, 255, 0.72);
   backdrop-filter: saturate(180%) blur(1.25rem);
   -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
   border-top: 0.0625rem solid var(--gray-200);
}

.footer p {
   font-size: var(--font-xs);
   color: var(--gray-400);
}

.footer a {
   color: var(--accent);
   text-decoration: none;
   font-weight: var(--font-weight-medium);
   transition: color var(--duration-fast) ease;
}

.footer a:hover {
   color: var(--accent-hover);
}

/* ===== Animations ===== */
@keyframes fadeInUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeOut {
   from {
      opacity: 1;
      transform: translateY(0);
   }
   to {
      opacity: 0;
      transform: translateY(-0.25rem);
   }
}

.fade-out {
   animation: fadeOut var(--duration-slow) var(--ease-out) forwards;
}

/* ===== Responsive ===== */
@media (max-width: 48rem) {
   .main {
      flex-direction: column;
      height: auto;
      min-height: calc(100vh - var(--navbar-h) - var(--footer-h));
      padding: var(--space-6);
   }

   html, body {
      overflow: auto;
   }

   .main.has-results {
      gap: var(--space-8);
   }

   .scan-card {
      width: min(100%, 24rem);
      padding: var(--space-8);
   }

   .results,
   .main.has-results .results {
      width: min(100%, 24rem);
      max-width: min(100%, 24rem);
   }

   .main.has-results .results {
      opacity: 1;
   }
}