/*
  login_atardecer.css
  Propósito: estilos para la pantalla de login con tema "atardecer".
  Secciones principales:
    - :root: variables de color reutilizables.
    - body: fondo, fuente y posicionamiento centrado.
    - form: estilo del card glassmorphism y animaciones.
    - input/button: estilos de campos y botones con interacciones.
    - animaciones y accesibilidad (reduce-motion, focus-visible).
*/

:root{
  --sun-1: #ff8a65;
  --sun-2: #ffd89b;
  --dusk: #1c2130;
  --card-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.12);
  --accent: #ffe1c6;
}

html, body { height: 100%; }

/* Body: imagen de fondo, centrado del formulario y colores base */
body{
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background-image: url('../Multimedia/fyrY.gif');
  background-repeat: no-repeat; background-size: cover; background-position: center;
  background-color: var(--dusk);
  position: relative; overflow:auto;
}

/* overlay cálido para atardecer */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,138,101,0.14), rgba(255,216,152,0.08));
}

/* contenedor centrado */
form {
  width:360px; max-width:92%; z-index:2; position:relative;
  padding:26px; border-radius:14px; box-sizing:border-box;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(5,5,10,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  transform-origin:center; animation: cardIn 700ms cubic-bezier(.2,.9,.2,1);
}

form h2{margin:0 0 8px 0;color:var(--accent); font-weight:700; letter-spacing:0.2px}
form p.lead{margin:0 0 12px 0;color:rgba(255,230,200,0.9); font-size:0.95rem}

.input-row{display:flex;gap:0.6rem}

input {
  width: 100%; padding:12px 12px; margin:10px 0; border-radius:10px;
  border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color: #fff;
  transition: box-shadow 180ms ease, transform 120ms ease, border-color 140ms ease, background 160ms ease;
}

input::placeholder{ color: rgba(255,255,255,0.6) }

input:focus{ outline:none; border-color: rgba(255,150,100,0.95); box-shadow: 0 10px 30px rgba(255,120,80,0.12); transform: translateY(-3px) }

button {
  width: 100%; padding:12px; margin-top:8px; border-radius:10px; border:none; cursor:pointer;
  background: linear-gradient(90deg,var(--sun-1),var(--sun-2)); color: #2b2b2b; font-weight:700;
  box-shadow: 0 12px 30px rgba(255,130,80,0.18); transition: transform 160ms ease, box-shadow 160ms ease, filter 120ms;
}

button:hover{ transform: translateY(-3px); box-shadow: 0 18px 42px rgba(255,130,80,0.24) }
button:active{ transform: translateY(-1px) scale(0.998) }

#errorMessage { color: #ffd7c5; font-size:0.95em; margin-top:8px }

/* micro-animaciones */
@keyframes cardIn{ from{ opacity:0; transform: translateY(18px) scale(.994) } to { opacity:1; transform: translateY(0) scale(1) } }
@keyframes floaty{ 0%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } 100%{ transform:translateY(0) } }

form{ animation: cardIn 700ms cubic-bezier(.2,.9,.2,1), floaty 6s ease-in-out infinite }

/* accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){ form{ animation:none } }

/* focus visible para teclado */
:focus-visible { outline: 3px solid rgba(255,180,120,0.14); outline-offset: 2px }