/* Identidad LFR - SOLO la pantalla de acceso (index.php). Se carga despues de main.css */
:root {
  --lfr-ink: #0B1B2E;
  --lfr-deep: #0F5163;
  --lfr-amber: #F2A541;
  --lfr-amber-hover: #F6BA66;
  --lfr-text: #E8EEF3;
  --lfr-muted: #8FA3B5;
  --lfr-field: #10243A;
  --lfr-line: rgba(255, 255, 255, 0.10);
  --lfr-field-border: #5A7089;
}

body { background: var(--lfr-ink); }

/* Texto solo para lectores de pantalla */
.lfr-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fondo: azul tinta con luz petroleo arriba, calidez ambar abajo y reticula tenue */
.container-login100 {
  min-height: 100vh;
  min-height: 100dvh; /* sin saltos por la barra del navegador en movil */
  background-color: var(--lfr-ink);
  background-image:
    radial-gradient(1100px 620px at 88% -12%, rgba(15, 81, 99, 0.85), transparent 62%),
    radial-gradient(900px 520px at -12% 112%, rgba(242, 165, 65, 0.16), transparent 60%),
    linear-gradient(160deg, #0B1B2E 0%, #0C2337 55%, #0B1B2E 100%);
}
.container-login100::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px;
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}

/* Tarjeta */
.wrap-login100 {
  width: 100%;
  max-width: 400px;
  padding: 44px 36px 36px;
  background: rgba(11, 27, 46, 0.72);
  border: 1px solid var(--lfr-line);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* El sello es la unica marca del login (sin texto debajo) */
.login100-form-avatar {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  margin-bottom: 64px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* Campos */
.input100 {
  background: var(--lfr-field);
  color: var(--lfr-text);
  border: 1px solid var(--lfr-field-border); /* 3:1 contra el campo (WCAG 1.4.11) */
  border-radius: 12px;
  font-size: 16px; /* 16px evita el zoom automatico de iOS al enfocar */
  transition: border-color 0.2s;
}
.lfr-pass-wrap .input100 { padding-right: 52px; }
.input100::placeholder { color: var(--lfr-muted); }
.input100:focus { border-color: var(--lfr-amber); }
.input100:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--lfr-field) inset;
  -webkit-text-fill-color: var(--lfr-text);
}
.focus-input100 {
  border-radius: 12px;
  color: rgba(242, 165, 65, 0.5);
}
.symbol-input100 {
  color: var(--lfr-muted);
  border-radius: 12px;
}
.input100:focus + .focus-input100 + .symbol-input100 { color: var(--lfr-amber); }

/* Mostrar / ocultar contrasena (area tactil de 44px) */
.lfr-toggle-pass {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lfr-muted);
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
}
.lfr-toggle-pass:hover { color: var(--lfr-text); }
.lfr-toggle-pass:focus-visible { outline: 2px solid var(--lfr-amber); outline-offset: -4px; }
/* El aviso de validacion de main.js no debe tapar el boton del ojo */
.lfr-pass-wrap.alert-validate::before { right: 50px; }
.lfr-pass-wrap.alert-validate::after { right: 55px; }

/* Mensajes de error / aviso del servidor */
.lfr-alert {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.lfr-alert .fa { margin-top: 3px; }
.lfr-alert-error {
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #FECACA;
}
.lfr-alert-warn {
  background: rgba(242, 165, 65, 0.12);
  border: 1px solid rgba(242, 165, 65, 0.45);
  color: #FDE3BD;
}

/* Boton */
.login100-form-btn {
  background: var(--lfr-amber);
  color: var(--lfr-ink);
  border-radius: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.login100-form-btn[disabled] { cursor: progress; opacity: 0.75; }
.login100-form-btn::before {
  background: var(--lfr-amber-hover);
  border-radius: 12px;
}
.login100-form-btn:hover { color: var(--lfr-ink); }
.login100-form-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .input100:focus + .focus-input100 { animation: none; }
  .input100, .symbol-input100, .login100-form-btn, .login100-form-btn::before, .lfr-toggle-pass { transition: none; }
}

@media (max-width: 480px) {
  .wrap-login100 { padding: 36px 22px 28px; border-radius: 18px; }
}