/* ============================================================
   IAPROPIA · sistema base

   Aqui no hay ni un color: solo la estructura, la tipografia y los
   componentes, escritos contra variables. Cada pantalla define su paleta
   en paletas.css y hereda todo lo demas.

   Viene del laboratorio de web/lab, donde se compararon cuatro
   direcciones de color sin tocar nada mas que las variables.
   ============================================================ */

/* La tipografia de Arkaia: Rajdhani para todo -condensada, tecnica, legible
   en cuerpos pequenos- y Orbitron reservada al nombre. Orbitron en parrafos
   se vuelve ilegible enseguida; aqui solo aparece en el rotulo. */
@font-face{
  font-family:'Rajdhani';
  src:url('../fonts/rajdhani.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Orbitron';
  src:url('../fonts/orbitron.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
/* Inter se queda para el texto corrido y para los campos: Rajdhani es
   condensada y en un formulario largo cansa. */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-arisa:'Rajdhani','Inter',-apple-system,sans-serif;
  --f-marca:'Orbitron','Rajdhani',-apple-system,sans-serif;

  /* Escala tipografica. Los titulares llevan clamp porque estas pantallas
     se ven igual en un portatil de 13" que en un monitor de 27". */
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-base:.9375rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:clamp(1.25rem,1.8vw,1.5rem);
  --fs-h2:clamp(1.5rem,2.6vw,2rem);
  --fs-h1:clamp(1.75rem,3.4vw,2.5rem);
  --fs-display:clamp(2.25rem,4.6vw,3.5rem);

  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-full:999px;

  /* Una sola curva para todo. Mezclar aceleraciones distintas en la misma
     pantalla es lo que hace que una interfaz parezca improvisada. */
  --ease:cubic-bezier(.32,.72,0,1);
  --rapido:.18s;
  --normal:.28s;
}

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none!important }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  min-height:100dvh;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--f-ui);
  font-size:var(--fs-base);
  line-height:1.6;
  font-feature-settings:'cv02','cv03','cv04','cv11';  /* las variantes limpias de Inter */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3{ margin:0; line-height:1.2; font-weight:600; letter-spacing:-.018em }
p{ margin:0 }

:focus-visible{
  outline:2px solid var(--anillo);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

::selection{ background:var(--acento); color:var(--acento-tinta) }

/* El rotulo del logotipo. Va aqui y no en el atributo del SVG porque
   font-family="var(--f-marca)" no lo entiende ningun navegador. */
.logotipo-txt{
  font-family:var(--f-marca);
  font-size:15px;
  font-weight:700;
  letter-spacing:.2em;
}
/* "LABS" va mas apagado que "ARKAIA": es el apellido, no el nombre. */
.logotipo-txt--tenue{ opacity:.55; font-weight:500 }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ============================================================
   CAMPOS
   Etiqueta encima del campo, no flotando dentro. Es menos vistoso y
   mejor: la etiqueta no desaparece al escribir, no se confunde con el
   valor y el navegador la lee bien.
   ============================================================ */
.campo{ display:flex; flex-direction:column; gap:.4rem }

.campo-eti{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--tinta-2);
  letter-spacing:-.005em;
}

.campo input{
  width:100%;
  height:44px;
  padding:0 .875rem;
  background:var(--campo-fondo);
  border:1px solid var(--borde);
  border-radius:var(--r-md);
  color:var(--tinta);
  font-family:inherit;
  /* 16px reales: por debajo de eso iOS hace zoom al enfocar y descuadra
     la pantalla entera. */
  font-size:16px;
  line-height:1.4;
  transition:border-color var(--rapido) var(--ease),
             box-shadow var(--rapido) var(--ease),
             background-color var(--rapido) var(--ease);
}
.campo input::placeholder{ color:var(--tinta-3) }

.campo input:hover:not(:focus){ border-color:var(--borde-fuerte) }

.campo input:focus{
  outline:none;
  border-color:var(--acento);
  background:var(--campo-fondo-activo);
  box-shadow:0 0 0 3px var(--acento-halo);
}

.campo input[aria-invalid="true"]{
  border-color:var(--error);
}
.campo input[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px var(--error-halo);
}

/* El autocompletar de Chrome pinta el fondo de azul claro y se lleva por
   delante la paleta. No hay propiedad que lo desactive: la unica salida es
   una sombra interior del color que toque. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tinta);
  -webkit-box-shadow:0 0 0 1000px var(--campo-fondo) inset;
  caret-color:var(--tinta);
  transition:background-color 9999s;
}

/* --- Campo con boton dentro (ver contrasena) ----------------- */
.campo-caja{ position:relative; display:flex }
.campo-caja input{ padding-right:4.25rem }

.campo-ojo{
  position:absolute; right:.35rem; top:50%;
  transform:translateY(-50%);
  padding:.35rem .55rem;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--tinta-3);
  transition:color var(--rapido), background-color var(--rapido);
}
.campo-ojo:hover{ color:var(--tinta); background:var(--sutil) }

.campo-ayuda{
  font-size:var(--fs-sm);
  color:var(--tinta-3);
}


/* ============================================================
   BOTONES
   ============================================================ */
.boton{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%;
  height:44px;
  padding:0 1.25rem;
  border-radius:var(--r-md);
  font-size:var(--fs-base);
  font-weight:550;
  letter-spacing:-.008em;
  white-space:nowrap;
  transition:background-color var(--rapido) var(--ease),
             border-color var(--rapido) var(--ease),
             color var(--rapido) var(--ease),
             transform var(--rapido) var(--ease),
             opacity var(--rapido);
}
.boton:active{ transform:scale(.988) }
.boton[disabled]{ cursor:not-allowed }

.boton--principal{
  background:var(--acento);
  color:var(--acento-tinta);
  box-shadow:var(--sombra-boton);
}
.boton--principal:hover{ background:var(--acento-vivo) }

.boton--suave{
  background:var(--superficie-2);
  border:1px solid var(--borde);
  color:var(--tinta);
}
.boton--suave:hover{ background:var(--sutil); border-color:var(--borde-fuerte) }

/* Estado de espera: el texto se desvanece y aparece un disco girando. No se
   quita el texto del DOM para que el boton no cambie de ancho. */
.boton.esperando{ pointer-events:none }
.boton.esperando > *{ opacity:0 }
.boton.esperando::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  opacity:.85;
  animation:girar .6s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }


/* ============================================================
   CASILLA
   ============================================================ */
.casilla{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-sm);
  color:var(--tinta-2);
  cursor:pointer;
  user-select:none;
}
/* La casilla nativa se esconde pero sigue en el arbol: es la que recibe el
   foco del teclado y la que anuncia el lector de pantalla. */
.casilla input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.casilla-marca{
  position:relative;
  width:16px; height:16px; flex:none;
  border:1px solid var(--borde-fuerte);
  border-radius:4px;
  background:var(--campo-fondo);
  transition:background-color var(--rapido), border-color var(--rapido);
}
.casilla-marca::after{
  content:'';
  position:absolute; left:4.5px; top:1px;
  width:4px; height:8px;
  border:solid var(--acento-tinta);
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform var(--rapido) var(--ease);
}
.casilla input:checked + .casilla-marca{ background:var(--acento); border-color:var(--acento) }
.casilla input:checked + .casilla-marca::after{ transform:rotate(45deg) scale(1) }
.casilla input:focus-visible + .casilla-marca{ outline:2px solid var(--anillo); outline-offset:2px }


/* ============================================================
   ENLACES DE APOYO
   ============================================================ */
.enlace{
  color:var(--acento-texto);
  font-weight:500;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color var(--rapido);
}
.enlace:hover{ text-decoration:underline }


/* ============================================================
   AVISO DE ERROR
   role="alert" en el HTML: quien use lector de pantalla tiene que
   enterarse de que ha fallado sin ir a buscarlo.
   ============================================================ */
.aviso{
  display:flex; align-items:flex-start; gap:.55rem;
  padding:.625rem .75rem;
  border:1px solid var(--error-borde);
  border-radius:var(--r-md);
  background:var(--error-fondo);
  color:var(--error-texto);
  font-size:var(--fs-sm);
  line-height:1.5;
}
.aviso svg{ flex:none; margin-top:.1rem; width:15px; height:15px }


/* ============================================================
   SEPARADOR CON TEXTO
   ============================================================ */
.separador{
  display:flex; align-items:center; gap:.85rem;
  font-size:var(--fs-sm);
  color:var(--tinta-3);
}
.separador::before,
.separador::after{
  content:''; flex:1; height:1px; background:var(--borde);
}


/* ============================================================
   ACCESIBILIDAD
   Con "reducir movimiento" activo la pantalla se monta terminada.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}