/* public/css/login.css */
/* Login – Matanga 3D
   Fondo más claro con destellos y fix de “corte” horizontal. */

/* ===== Page background ===== */
body {
  background:
    /* Destello principal (primario) */
    radial-gradient(1400px 700px at 20% -10%, color-mix(in oklab, var(--primario, #a78bfa) 35%, transparent), transparent 60%),
    /* Destello secundario */
    radial-gradient(1100px 600px at 90% 0%, color-mix(in oklab, var(--secundario, #22d3ee) 22%, transparent), transparent 60%),
    /* Base más clara con tinte primario */
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--primario, #a78bfa) 14%, #121218) 0%,
      color-mix(in oklab, var(--primario, #a78bfa) 20%, #0f0f14) 100%
    );
  color: #fff;
}

/* ===== Card ===== */
.card{
  max-width: 520px;
  margin: 3rem auto;
  background: rgba(12,12,12,.9);
  border: 1px solid #222;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}

/* ===== Title ===== */
.title{
  font: 800 clamp(1.35rem, 2.6vw, 1.7rem) "tipografia3", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  margin: 0 0 .75rem;
  letter-spacing: .2px;
}

/* ===== Form ===== */
.form{ margin-top:.25rem; }
.form input{
  width: 100%;
  background: #0f0f10;
  border: 1px solid #262626;
  color: #fff;
  border-radius: 12px;
  padding: .8rem .95rem;
  margin: .55rem 0;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form input::placeholder{ color:#9ca3af; }

/* Focus ring accesible en color secundario */
.form input:focus{
  border-color: var(--secundario, #22d3ee);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--secundario, #22d3ee) 20%, transparent);
  background: #111214;
}

/* Estados de error en inputs si Laravel agrega .is-invalid */
.form input.is-invalid{
  border-color:#f87171;
  box-shadow:0 0 0 4px color-mix(in oklab, #f87171 22%, transparent);
}

/* ===== Button ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--secundario, #22d3ee);
  color: #0b0b0b;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.15rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px color-mix(in oklab, var(--secundario, #22d3ee) 30%, transparent);
}
.btn:active{ transform: translateY(0); }
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--secundario, #22d3ee) 28%, transparent);
}
.btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(.2);
}

/* ===== Aux ===== */
.muted{ color:#a1a1aa; font-size:.95rem; }
.muted a{
  color: var(--secundario, #22d3ee);
  text-decoration: none;
  font-weight: 700;
}
.muted a:hover{ text-decoration: underline; }

/* Mensaje de error */
.error{
  color:#f87171;
  margin-top:.35rem;
  font-size:.95rem;
  border-left: 3px solid #f87171;
  padding-left: .5rem;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 560px){
  .card{ margin: 2rem 1rem; padding: 1rem; }
  .btn{ width: 100%; }
}

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .card, .btn, .form input{ transition: none; }
}

/* ===== Fix "corte" horizontal en el fondo (igual que registro) ===== */
html, body { height: 100%; }
#app { min-height: 100%; background: transparent; }

main, .main, .content, .page-content, .container, .wrapper {
  background: transparent !important;
}

header, .site-header, .navbar, .app-header {
  background: transparent !important;
  box-shadow: none !important;
}

main::before, main::after,
.content::before, .content::after,
header::after, header::before {
  content: none !important;
  background: none !important;
}

/* Reducimos artefactos de composición con blur + gradientes */
.card{
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateZ(0);
}
/* Si el corte persiste, probá quitar el blur:
.card{ -webkit-backdrop-filter:none; backdrop-filter:none; }
*/