/* Pantallas de acceso (login y cambio obligatorio de contrasena).
   Diseno portado del Sistema de Inventario (ch-almacen): fotografia a la izquierda,
   formulario sobre fondo crema a la derecha. CSS puro: estas pantallas no cargan Tailwind. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #faf7f2;
  color: #2b2520;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid #c4883a; outline-offset: 2px; }

.login-pantalla { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; position: relative; }

/* Mitad izquierda: fotografia del castillo */
.login-foto { position: relative; overflow: hidden; background: #1f1611; min-height: 100vh; }
.login-foto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.login-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,20,15,.88) 0%, rgba(28,20,15,.55) 18%, rgba(28,20,15,.12) 38%, rgba(28,20,15,.2) 62%, rgba(28,20,15,.88) 100%); }
/* Transicion difuminada entre la fotografia y el fondo crema (sin linea ni animacion) */
.login-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(250,247,242,0) 0%, rgba(250,247,242,0) 62%, rgba(250,247,242,.35) 80%, rgba(250,247,242,.8) 93%, #faf7f2 100%); }
.login-foto-logo { position: absolute; top: 1.8rem; left: 2.2rem; z-index: 2; height: 68px; width: auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.login-foto-lema { position: absolute; left: 3rem; right: 3rem; bottom: 2.6rem; z-index: 2; }
.login-foto-lema p { font-family: Georgia, "Times New Roman", serif; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.2;
  margin: 0 0 1.3rem; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.login-barras { display: flex; gap: .55rem; }
.login-barras span { width: 2.5rem; height: .38rem; border-radius: 10px; }
.login-barras span:nth-child(1) { background: #ef4444; } .login-barras span:nth-child(2) { background: #a855f7; }
.login-barras span:nth-child(3) { background: #22c55e; } .login-barras span:nth-child(4) { background: #f59e0b; }
.login-barras span:nth-child(5) { background: #3b82f6; } .login-barras span:nth-child(6) { background: #14b8a6; }

/* Mitad derecha: formulario */
.login-lado { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem 2rem 4rem; background: #faf7f2; position: relative; }
.login-caja { width: 100%; max-width: 384px; }
.login-titulo { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1.2; font-weight: 400; color: #1c140f; margin: 0 0 .45rem; }
.login-texto { color: #6b625a; font-size: .95rem; margin: 0 0 1.4rem; }
.login-etiqueta { display: block; font-size: .85rem; font-weight: 600; color: #3a2f27; margin: 0 0 .4rem .2rem; }
.login-campo { display: block; width: 100%; border: 1px solid #e3dcd2; background: #fff; border-radius: 14px; padding: .8rem 1rem; font-size: .95rem; font-family: inherit;
  color: #1c140f; margin-bottom: .9rem; transition: border-color .15s, box-shadow .15s; }
.login-campo::placeholder { color: #9a9087; }
.login-campo:focus { outline: none; border-color: #c08035; box-shadow: 0 0 0 4px rgba(192,128,53,.18); }
.campo-clave { position: relative; }
.campo-clave .login-campo { padding-right: 2.9rem; }
.ver-clave { position: absolute; right: .5rem; top: .45rem; border: 0; background: transparent; color: #8b8178; width: 2.2rem; height: 2.2rem; border-radius: 8px; cursor: pointer; }
.ver-clave:hover { background: #f2ece4; color: #c08035; }

.login-boton { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; border: 0; border-radius: 14px; padding: .85rem; margin-top: .4rem;
  background: #c08035; color: #fff; font-family: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .15s, box-shadow .15s; }
.login-boton:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.login-boton:hover:not(:disabled), .login-boton:focus-visible { background: #a96d2a; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(192,128,53,.35); }
.login-boton-secundario { background: #fff; color: #5b5249; border: 1px solid #e3dcd2; font-weight: 600; }
.login-boton-secundario:hover:not(:disabled), .login-boton-secundario:focus-visible { background: #f2ece4; color: #a96d2a; box-shadow: none; transform: none; }

.login-error { background: #fdecea; color: #8a2419; border-radius: 12px; padding: .65rem .85rem; font-size: .84rem; margin-bottom: 1rem; }
.login-aviso { background: #eaf6ee; color: #1d5c34; border-radius: 12px; padding: .65rem .85rem; font-size: .84rem; margin-bottom: 1rem; }
.login-nota { background: #fdf3dc; color: #7a5311; border-radius: 12px; padding: .65rem .85rem; font-size: .84rem; margin-bottom: 1.1rem; }
.login-requisitos { margin: .2rem 0 0; padding: 0; list-style: none; color: #6b625a; font-size: .8rem; }
.login-requisitos li { margin: 0 0 .25rem; }
.login-requisitos i { color: #22a35a; margin-right: .35rem; }

.login-ayuda-texto { text-align: center; color: #6b625a; font-size: .88rem; margin: 1.3rem 0 0; }
.login-ayuda-texto a { color: #a96d2a; font-weight: 600; text-decoration: none; }
.login-ayuda-texto a:hover { text-decoration: underline; }
.login-ayuda { margin-top: .7rem; font-size: .82rem; color: #5b5249; background: #f2ece4; border-radius: 12px; padding: .7rem .85rem; text-align: center; }
.login-ayuda[hidden] { display: none; }
.login-pie { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: #a39a91; font-size: .74rem; margin: 0; padding: 0 1rem; }

.giro { width: 1.1rem; height: 1.1rem; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

@media (max-width: 899.98px) {
  .login-pantalla { grid-template-columns: 1fr; }
  .login-foto { min-height: 260px; }
  .login-foto::before { background: linear-gradient(180deg, rgba(250,247,242,0) 84%, rgba(250,247,242,.7) 95%, #faf7f2 100%); }
  .login-foto-logo { top: 1rem; left: 1.1rem; height: 52px; }
  .login-foto-lema { left: 1.3rem; right: 1.3rem; bottom: 2.4rem; }
  .login-foto-lema p { font-size: 1.45rem; margin-bottom: .8rem; }
  .login-barras span { width: 1.8rem; }
  .login-lado { padding: 2rem 1.3rem 4rem; justify-content: flex-start; }
  .login-titulo { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .login-boton, .login-campo { transition: none; }
  .giro { animation-duration: 1.6s; }
}