/* ── login.css — el guión de la unidad ─────────────────────────────────────
   El login es un guión de caballería (banderín de doble punta) que cuelga de
   un asta dorada; escudo, título y formulario van cosidos en el paño. Detrás,
   San Jorge en penumbra. Nadie más usa estas clases. */

.login-page {
  --cola: 72px;          /* profundidad de la doble punta */
  /* Composición: el jinete carga hacia el guión (pegado, un poco detrás) y
     los DOS juntos quedan centrados; si no entran, el jinete se achica. */
  --guion-w: min(460px, 78vw);
  --asta-w: min(560px, 86vw);                       /* el asta sobresale del paño (+14px de remate) */
  --solape: 80px;                                   /* cuánto se mete el jinete detrás del paño */
  /* Ancho del conjunto = jinete − solape + medio paño + media asta + remate: tiene que entrar en 96vw. */
  --jinete-w: min(calc(76vh * .871), calc(96vw - var(--guion-w) / 2 - var(--asta-w) / 2 - 14px + var(--solape)));   /* .871 = ancho/alto de la imagen */
  --jinete-h: calc(var(--jinete-w) / .871);
  /* Centro del paño corrido para que el conjunto (jinete a la izquierda, asta a la derecha) quede centrado. */
  --corrimiento: calc((var(--jinete-w) - var(--solape) + var(--guion-w) / 2 - var(--asta-w) / 2 - 14px) / 2);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(80% 70% at 50% 30%, #2a0a10, var(--bg) 75%);
  color: var(--text);
}
.login-page ::selection { background: rgba(var(--oro-rgb), .45); color: #fff; }

/* San Jorge en penumbra: el bronce apagado para que no compita con el paño. */
.login-jinete {
  position: fixed;
  left: calc(50% + var(--corrimiento) - var(--guion-w) / 2 - var(--jinete-w) + var(--solape));
  bottom: 0;
  z-index: 0;
  height: var(--jinete-h);
  width: var(--jinete-w);
  object-fit: contain;
  object-position: right bottom;
  filter: brightness(.38) sepia(.3) saturate(1.4) hue-rotate(-12deg);
  opacity: .9;
  pointer-events: none;
  user-select: none;
}

/* Asta metálica con sus dos remates. */
.login-asta {
  position: absolute;
  top: 5vh;
  left: calc(50% + var(--corrimiento));
  transform: translateX(-50%);
  width: var(--asta-w);
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(#f3d680, #a8812a 60%, #6e5217);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
  z-index: 2;
}
.login-asta::before,
.login-asta::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #fff2c0, var(--oro) 45%, #6e5217);
}
.login-asta::before { left: -14px; }
.login-asta::after { right: -14px; }

/* El guión: alto según su contenido + la cola de doble punta. */
.login-guion {
  position: relative;
  z-index: 1;
  width: var(--guion-w);
  margin: calc(5vh + 5px) auto 6vh calc(50% - var(--guion-w) / 2 + var(--corrimiento));
  padding: 44px 10% calc(var(--cola) + 48px);
  box-sizing: border-box;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
}
.login-guion__pano,
.login-guion__bordado {
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 75% calc(100% - var(--cola)), 50% 100%, 25% calc(100% - var(--cola)), 0 100%);
  pointer-events: none;
}
.login-guion__pano {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 12%, transparent 88%, rgba(0, 0, 0, .28)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 5px),
    linear-gradient(var(--pano-1, #8a1626), var(--pano-2, #6e1020));
  transform-origin: top center;
  animation: guion-flamea 7s ease-in-out infinite;
}
/* Bordado: línea de oro + pespunte, siguiendo la misma forma del paño. */
.login-guion__bordado {
  inset: 14px 14px 18px;
  border: 2px solid var(--oro);
  border-bottom: 0;          /* la cola corta el borde: sin línea suelta en las puntas */
  animation: guion-flamea 7s ease-in-out infinite;
  transform-origin: top center;
}
.login-guion__bordado::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(var(--oro-rgb), .55);
  border-bottom: 0;
}
@keyframes guion-flamea { 50% { transform: skewY(.5deg) scaleY(.996); } }

/* ── Contenido cosido en el paño ── */
.login-box {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  animation: login-entrar .7s cubic-bezier(.16, 1, .3, 1);
}
@keyframes login-entrar { from { opacity: 0; transform: translateY(-14px); } }

.login-img {
  width: 104px;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}

.login-box .title-content {
  margin: 0 0 6px;
  font-family: var(--fuente-titulo, 'Cinzel', Georgia, serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--oro-claro, #f3e3b3);
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.login-box .title-content span { white-space: nowrap; }
.login-box .title-content small {
  display: block;
  margin-top: .45em;
  font-size: max(.55em, 13px);
  font-weight: 600;
  letter-spacing: .32em;
  color: var(--oro);
}

.login-campo {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oro-claro, #ecd9a6);
}
.login-box input {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px;
  font: 400 1.05rem var(--font-family);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  background: rgba(12, 7, 8, .5);
  border: 1px solid rgba(var(--oro-rgb), .4);
  border-radius: 10px;
  caret-color: var(--oro);
  transition: border-color .2s, box-shadow .2s;
}
.login-box input::placeholder { color: #b59fa2; }
.login-box input:focus-visible,
.login-box input:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(var(--oro-rgb), .25);
}
.login-box input:disabled { opacity: .6; }

.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  font: 700 1.05rem var(--font-family);
  letter-spacing: .16em;
  color: #fff;
  background: #1a0a0d;
  border: 1px solid var(--oro);
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-login:not(:disabled):hover { background: var(--oro); color: #1a0a0d; }
.btn-login:focus-visible { outline: 3px solid var(--oro-claro, #f3e3b3); outline-offset: 3px; }
.btn-login:disabled { cursor: progress; opacity: .85; }

/* Loader del botón mientras responde el server */
.btn-login__spinner {
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .3);
  border-top-color: currentColor;
  animation: login-girar .8s linear infinite;
}
.btn-login--cargando .btn-login__spinner { display: inline-block; }
@keyframes login-girar { to { transform: rotate(360deg); } }

/* Ver contraseña */
.pass-wrap { position: relative; display: block; }
.login-box .pass-wrap input { padding-right: 60px; }
.pass-ver {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #c9b3a8;
  transition: color .15s;
}
.pass-ver:hover, .pass-ver:focus-visible { color: var(--oro-claro, #f3e3b3); outline: none; }
.pass-ver__ico--ocultar { display: none; }
.pass-ver[aria-pressed="true"] .pass-ver__ico--ver { display: none; }
.pass-ver[aria-pressed="true"] .pass-ver__ico--ocultar { display: block; }

/* Error: tarjeta oscura sobre el paño (una caja roja se perdía en el granate). */
.login-error {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 0;
  padding: 12px 14px;
  font-size: .95rem;
  line-height: 1.4;
  color: #ffd4cc;
  background: rgba(12, 7, 8, .72);
  border: 1px solid var(--danger);
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .login-guion__pano, .login-guion__bordado, .login-box { animation: none; }
}

/* Celular: el guión ocupa el ancho y la estatua se retira. */
@media (max-width: 760px) {
  .login-page { --cola: 52px; --corrimiento: 0px; --guion-w: 90vw; }
  .login-jinete { display: none; }
  .login-asta { top: 3vh; width: 94vw; }
  .login-guion { width: 90vw; margin-top: calc(3vh + 5px); padding: 34px 10% calc(var(--cola) + 36px); }
  .login-img { width: 84px; }
}