/* public/css/registro.css */
/* ===========================================================
   Registro – Matanga 3D (Cuadrillé + destellos)
   Respeta --primario / --secundario / --secundario-rgb
   =========================================================== */

/* ===== Fondo + cuadrillé ===== */
body{
  position: relative;
  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;

  /* Variables del grid independiente para auth */
  --reg-grid-size: 64px;
  --reg-grid-size-md: 56px;
  --reg-grid-size-sm: 44px;
  --reg-line-rgb: var(--secundario-rgb, 138,64,32);
  --reg-line-alpha: .18;
  --reg-vignette: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.25) 100%);
}
/* Líneas del cuadrillé */
body::before{
  content:"";
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--reg-line-rgb), var(--reg-line-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--reg-line-rgb), var(--reg-line-alpha)) 1px, transparent 1px);
  background-size: var(--reg-grid-size) var(--reg-grid-size),
                   var(--reg-grid-size) var(--reg-grid-size);
  background-position: 0 0, 0 0;
}
/* Viñeta sutil */
body::after{
  content:"";
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background: var(--reg-vignette);
}
/* Tamaños del cuadriculado en responsive */
@media (max-width:1200px){
  body::before{
    background-size: var(--reg-grid-size-md) var(--reg-grid-size-md),
                     var(--reg-grid-size-md) var(--reg-grid-size-md);
  }
}
@media (max-width:768px){
  body::before{
    background-size: var(--reg-grid-size-sm) var(--reg-grid-size-sm),
                     var(--reg-grid-size-sm) var(--reg-grid-size-sm);
  }
}

/* Accesibilidad básica si no existe en global */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== Card ===== */
.card{
  position: relative;
  z-index: 1; /* sobre el cuadrillé */
  max-width: 520px;
  margin: 3rem auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%),
    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);
  -webkit-backdrop-filter: blur(8px);
  transform: translateZ(0);
  transition: box-shadow .2s ease, transform .2s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--secundario, #22d3ee) 40%, #222);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--secundario, #22d3ee) 22%, transparent),
    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; }
.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;
}
.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(--primario, #915858);
  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; }

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

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

/* ===== Motion ===== */
@media (prefers-reduced-motion: reduce){
  .card, .btn, .form input{ transition: none; }
}

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

/* Si el layout pinta fondos sólidos, anular acá */
main, .main, .content, .page-content, .container, .wrapper {
  background: transparent !important;
}
/* Headers con sombra/overlay */
header, .site-header, .navbar, .app-header {
  background: transparent !important;
  box-shadow: none !important;
}
/* Anula decoraciones que dibujan barras */
main::before, main::after,
.content::before, .content::after,
header::after, header::before {
  content: none !important;
  background: none !important;
}

/* Nota: si ves banding o artefactos, bajar/eliminar blur: */
/* .card{ -webkit-backdrop-filter:none; backdrop-filter:none; } */