/* =====================================================================
   Portal SEI · hoja de estilos
   Sin dependencias externas: la CSP declara font-src 'self', asi que no
   se pueden cargar tipografias de terceros. Se usa la pila del sistema.

   Todas las animaciones mueven SOLO transform y opacity. Son las dos
   propiedades que el navegador resuelve en el compositor, sin recalcular
   posiciones ni repintar: por eso la bienvenida no baja el rendimiento
   ni siquiera en un equipo modesto o un telefono.
   ===================================================================== */

:root {
  --hondo:      #001B2E;
  --hondo-alto: #00263F;
  --azul:       #005B9B;
  --azul-claro: #006AA2;
  --cian:       #00A7C7;
  --cian-vivo:  #16C4DF;
  --tinta:      #122A3F;
  --papel:      #FFFFFF;
  --nieve:      #E8F1F8;
  --apagado:    #93AEC4;
  --radio:      14px;
  --letra: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.5;
  color: var(--nieve);
  background: var(--hondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Un resplandor frio detras de todo. Es un degradado fijo, no una
   animacion: no cuesta nada y evita que el fondo se vea plano. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(58% 46% at 50% 8%,  rgba(0, 167, 199, .17), transparent 70%),
    radial-gradient(50% 50% at 88% 96%, rgba(0, 91, 155, .30),  transparent 72%),
    linear-gradient(168deg, var(--hondo-alto), var(--hondo) 62%);
  z-index: -1;
}

.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--papel);
  color: var(--tinta);
  padding: 10px 16px;
  border-radius: 0 0 var(--radio) 0;
  z-index: 50;
}
.salto:focus { left: 0; }

/* ---------- Pantallas ---------------------------------------------- */
/* Solo una es visible a la vez. El atributo hidden manda sobre el
   display:flex, que si no lo dejaria a la vista igual. */
.pantalla {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}
.pantalla[hidden] { display: none; }

.pantalla--visible { animation: aparecer .45s ease-out both; }

@keyframes aparecer {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* La bienvenida se va empujando ligeramente hacia arriba: da sensacion
   de avance hacia el login en vez de un corte seco. */
.pantalla--saliendo { animation: retirarse .5s ease-in both; }

@keyframes retirarse {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(0, -22px, 0) scale(.985); }
}

/* ---------- 1. Bienvenida ------------------------------------------ */
.onda-caja {
  position: relative;
  width: 340px;
  height: 340px;
  display: grid;
  place-items: center;
}

.marca-grande {
  width: 150px;
  height: 150px;
  border-radius: 34px;
  animation: marcaEntra 1s cubic-bezier(.22, .9, .28, 1) both;
  will-change: transform, opacity;
}

@keyframes marcaEntra {
  from { opacity: 0; transform: scale(.72); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}

/* Los anillos salen del isotipo hacia afuera. La figura del logo es una
   antena emitiendo, asi que la animacion dice lo mismo que la marca en
   vez de ser un adorno cualquiera. */
.onda {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid var(--cian);
  border-radius: 50%;
  opacity: 0;
  animation: irradiar 2.6s cubic-bezier(.16, .6, .3, 1) infinite;
  will-change: transform, opacity;
}
.onda--1 { animation-delay: .75s; }
.onda--2 { animation-delay: 1.45s; }
.onda--3 { animation-delay: 2.15s; }

@keyframes irradiar {
  0%   { opacity: .85; transform: scale(1);   border-width: 2px; }
  70%  { opacity: .12; }
  100% { opacity: 0;   transform: scale(2.3); border-width: 1px; }
}

.omitir {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 1px solid rgba(147, 174, 196, .35);
  color: var(--apagado);
  font: inherit;
  font-size: .82rem;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  animation: asomar .5s ease-out 1.5s both;
  transition: color .2s, border-color .2s;
}
.omitir:hover { color: var(--nieve); border-color: rgba(232, 241, 248, .6); }

@keyframes asomar { to { opacity: 1; } }

/* ---------- 2 y 3. Tarjetas de formulario --------------------------- */
.tarjeta {
  width: 100%;
  max-width: 396px;
  background: var(--papel);
  color: var(--tinta);
  border-radius: 20px;
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  box-shadow: 0 24px 60px rgba(0, 12, 24, .45), 0 2px 6px rgba(0, 12, 24, .3);
}

/* El logotipo horizontal trae el fondo blanco incrustado (las contraformas
   de las letras son trazados blancos, no agujeros). Por eso solo se usa
   sobre la tarjeta blanca, nunca sobre el fondo oscuro. */
.logotipo {
  width: 100%;
  max-width: 268px;
  height: auto;
  align-self: center;
  margin-bottom: 4px;
}

.tarjeta__nota {
  margin: -6px 0 0;
  font-size: .9rem;
  color: #5A7286;
}

.campo { display: flex; flex-direction: column; gap: 6px; }

.campo label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5A7286;
}

.campo input {
  font: inherit;
  color: var(--tinta);
  background: #F2F6FA;
  border: 1px solid #D3DFEA;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.campo input:hover { border-color: #B6C8D8; }
.campo input:focus {
  outline: none;
  background: var(--papel);
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(0, 106, 162, .18);
}

.aviso {
  margin: 0;
  font-size: .88rem;
  color: #A4262C;
  background: #FDEDEE;
  border: 1px solid #F3C9CC;
  border-radius: 10px;
  padding: 9px 12px;
  animation: sacudir .34s ease-out;
}
.aviso[hidden] { display: none; }

/* Un temblor corto y pequeño. Comunica el rechazo sin que el usuario
   tenga que releer, y termina rapido para no estorbar. */
@keyframes sacudir {
  0%, 100% { transform: none; }
  22%      { transform: translate3d(-5px, 0, 0); }
  55%      { transform: translate3d(4px, 0, 0); }
  80%      { transform: translate3d(-2px, 0, 0); }
}

.boton {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  padding: 13px 18px;
  cursor: pointer;
  transition: transform .14s, box-shadow .2s, background .2s, opacity .2s;
}
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .6; cursor: progress; }

.boton--primario {
  color: #fff;
  background: linear-gradient(135deg, var(--azul) 0%, var(--cian) 130%);
  box-shadow: 0 6px 18px rgba(0, 91, 155, .35);
}
.boton--primario:hover:not([disabled]) { box-shadow: 0 9px 24px rgba(0, 106, 162, .45); }

/* ---------- 4. Portales --------------------------------------------- */
#portales { justify-content: flex-start; padding-top: 26px; }

.barra {
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 42px;
}
.barra__hueco { flex: 1; }

.marca-chica { width: 40px; height: 40px; border-radius: 10px; }

.icono-boton {
  font: inherit;
  font-size: .86rem;
  /* Sin esto, en pantallas angostas el texto se parte en dos lineas y el
     radio de 999px convierte el boton en un globo. */
  white-space: nowrap;
  color: var(--apagado);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(147, 174, 196, .22);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: color .18s, background .18s, border-color .18s;
}
.icono-boton:hover {
  color: var(--nieve);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(232, 241, 248, .45);
}
.icono-boton[hidden] { display: none; }

.rejilla {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  /* Centrada en el espacio que queda bajo la barra: con pocas plataformas
     y una pantalla alta, pegarla arriba deja el bloque flotando en un
     vacio enorme. */
  margin-block: auto;
}

.portal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 24px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--nieve);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(147, 174, 196, .18);
  overflow: hidden;
  opacity: 0;
  animation: subir .55s cubic-bezier(.2, .8, .3, 1) both;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), border-color .22s, background .22s, box-shadow .22s;
}

/* Escalonado por clase, no por atributo style: la CSP prohibe estilos en
   linea, asi que el retardo tiene que estar aqui. */
.portal.r1 { animation-delay: .05s; }
.portal.r2 { animation-delay: .12s; }
.portal.r3 { animation-delay: .19s; }
.portal.r4 { animation-delay: .26s; }
.portal.r5 { animation-delay: .33s; }
.portal.r6 { animation-delay: .40s; }
.portal.r7 { animation-delay: .47s; }
.portal.r8 { animation-delay: .54s; }

@keyframes subir {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}

.portal:hover, .portal:focus-visible {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(22, 196, 223, .55);
  box-shadow: 0 16px 38px rgba(0, 10, 20, .42);
}

/* Una linea de luz cruza la tarjeta al pasar el puntero. Es un solo
   pseudoelemento moviendose en X: no repinta nada mas. */
.portal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(22, 196, 223, .13), transparent);
  transform: translate3d(0, 0, 0);
  transition: transform .65s cubic-bezier(.3, .7, .3, 1);
  pointer-events: none;
}
.portal:hover::after, .portal:focus-visible::after { transform: translate3d(360%, 0, 0); }

.portal__icono {
  width: 42px;
  height: 42px;
  color: var(--cian-vivo);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.portal:hover .portal__icono { transform: scale(1.09); }

.portal__nombre {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.15;
}

.portal__detalle {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--apagado);
  margin: 0;
}

/* Solo se muestra cuando falta poco: enterarse de que el acceso vence
   despues de perderlo es la peor forma de enterarse. */
.portal__vence {
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #FFD08A;
  background: rgba(255, 176, 60, .12);
  border: 1px solid rgba(255, 176, 60, .3);
  border-radius: 999px;
  padding: 3px 10px;
}

.rechazo {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 22px;
  font-size: .92rem;
  color: #FFD08A;
  background: rgba(255, 176, 60, .1);
  border: 1px solid rgba(255, 176, 60, .3);
  border-radius: 12px;
  padding: 12px 16px;
  animation: aparecer .4s ease-out both;
}
.rechazo[hidden] { display: none; }

.vacio { color: var(--apagado); font-size: .95rem; }
.vacio[hidden] { display: none; }

/* ---------- Foco visible en todo lo interactivo --------------------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cian-vivo);
  outline-offset: 3px;
}

/* ---------- Menos movimiento ---------------------------------------- */
/* Quien pidio menos animacion en su sistema no recibe ninguna: los
   anillos, el escalonado y los desplazamientos se apagan. La bienvenida
   sigue existiendo, pero se resuelve con una aparicion simple, y el
   guion de JavaScript ademas la acorta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .onda { display: none; }
  .marca-grande, .portal, .omitir { opacity: 1; }
  .portal:hover, .portal:focus-visible { transform: none; }
}

/* ---------- Pantallas chicas ---------------------------------------- */
@media (max-width: 560px) {
  .onda-caja { width: 260px; height: 260px; }
  .marca-grande { width: 116px; height: 116px; border-radius: 26px; }
  .onda { width: 116px; height: 116px; }
  .tarjeta { padding: 28px 22px 26px; border-radius: 17px; }
  .rejilla { grid-template-columns: 1fr; gap: 15px; }
  .barra { margin-bottom: 30px; }
}