/* Estilo compartido de las pantallas de acceso · Universidad Autónoma */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --naranja: #FF6600; --tinta: #141414; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--naranja); color: var(--tinta); overflow: hidden;
}
button, input { font: inherit; color: inherit; }

/* Fondo: palabras gigantes en el mismo tono */
.fondo {
  position: fixed; inset: -2vw -6vw; display: flex; flex-direction: column; justify-content: center;
  pointer-events: none; user-select: none; overflow: hidden;
}
.fila-fondo {
  white-space: nowrap; font-size: clamp(64px, 9.4vw, 168px); line-height: 1.08;
  letter-spacing: -0.02em; color: #EE5E00;
}
.fila-fondo.fina { font-weight: 400; }
.fila-fondo.gruesa { font-weight: 900; }
/* Desplazamiento continuo de izquierda a derecha: la pista tiene dos mitades idénticas */
.pista { display: inline-flex; will-change: transform; animation: deslizar var(--duracion, 110s) linear infinite; }
.pista span { padding-right: .4em; }
.fila-fondo.fina .pista { --duracion: 160s; }
.fila-fondo.gruesa .pista { --duracion: 120s; }
@keyframes deslizar { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .pista { animation: none; } }

/* Tarjeta */
.escena { position: relative; min-height: 100%; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.tarjeta {
  width: 100%; max-width: 440px; background: #fff; border-radius: 18px;
  padding: 28px 40px 30px; box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 0 38px rgba(255,255,255,.55);
}
.logo { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 4px 0 6px; min-height: 64px; }
.logo img { width: 100%; max-width: 300px; height: auto; display: block; }
.portal-nombre { text-align: center; font-size: 12px; font-weight: 600; color: #8a8a8a; letter-spacing: .02em; margin-bottom: 20px; }
.logo-texto { display: none; text-align: left; line-height: 1.05; }
.logo-texto .sello {
  width: 50px; height: 58px; border: 2.5px solid var(--tinta); border-radius: 6px 6px 22px 22px;
  display: grid; place-items: center; font-weight: 900; font-size: 26px; color: var(--naranja);
}
.logo-texto .linea1 { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.logo-texto .linea2 { font-size: 20px; line-height: 1.2; margin-top: 1px; font-weight: 900; letter-spacing: -.01em; }
.logo-texto .linea3 { font-size: 11px; color: #777; font-weight: 500; margin-top: 3px; }
.sin-logo .logo img { display: none; }
.sin-logo .logo-texto { display: flex; gap: 12px; align-items: center; }

.titulo-tarjeta { font-size: 15px; font-weight: 800; text-align: center; margin: -6px 0 6px; }
.texto-tarjeta { font-size: 12.5px; color: #666; text-align: center; margin-bottom: 16px; line-height: 1.45; }

.campo { position: relative; margin-bottom: 14px; }
.campo input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid #c9c9c9; border-radius: 6px;
  font-size: 15.5px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.campo input::placeholder { color: #222; opacity: 1; }
.campo input:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(255,102,0,.18); }
.campo input:focus::placeholder { color: #aaa; }
.campo .ver {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-size: 12px; font-weight: 700; color: #777; cursor: pointer; padding: 6px;
}
.campo .ver:hover { color: var(--naranja); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boton {
  display: block; margin: 20px auto 0; background: var(--tinta); color: #fff; border: 0;
  border-radius: 999px; padding: 11px 26px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .1s, background .15s;
}
.boton:hover { background: #000; }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .55; cursor: wait; }
.boton:focus-visible, .campo .ver:focus-visible, .enlace:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }

.mensaje { min-height: 18px; margin-top: 12px; font-size: 13px; text-align: center; color: #c62828; font-weight: 600; }
.mensaje.ok { color: #2e7d32; }
.nota { margin-top: 14px; font-size: 11.5px; color: #888; text-align: center; line-height: 1.45; }
.enlace { color: var(--naranja); font-weight: 700; text-decoration: none; background: none; border: 0; cursor: pointer; font-size: inherit; }
.enlace:hover { text-decoration: underline; }

@media (max-width: 480px) { .tarjeta { padding: 24px 22px 26px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }