/* =========================
   COLEMEX - Registro Cliente (Split SERIO)
   Compatible con tu HTML:
   .registro-wrapper / .registro-izquierda / .registro-derecha
   ========================= */

:root{
  /* ✅ Paleta institucional (seria) */
  --gold: #C8A24A;
  --gold-soft: rgba(200,162,74,.14);

  --header-bg: #343B44;
  --header-border: #2B3139;

  /* Fondo general */
  --bg-overlay: rgba(0,0,0,.42);

  /* Izquierda (panel limpio tipo formulario de tu captura) */
  --left-bg: #F7F8FA;
  --left-text: #121417;
  --left-muted: rgba(18,20,23,.70);

  /* Derecha (panel oscuro elegante) */
  --right-top: rgba(20,25,30,.92);
  --right-bottom: rgba(52,59,68,.92);

  /* Form */
  --input-bg: #FFFFFF;
  --input-border: rgba(18,20,23,.18);
  --input-focus: rgba(200,162,74,.55);

  --radius: 18px;
  --shadow: 0 18px 45px rgba(0,0,0,.25);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 44px;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  font-family: 'Merriweather', serif;
  background: #0f1318;
  color: #fff;

  /* Tu fondo (no se rompe) */
  background-image: url("../assets/mazo-libro.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  position: relative;
}

/* Overlay para legibilidad */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: -1;
}

/* =========================
   Split container
   ========================= */
.registro-wrapper{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}

/* =========================
   IZQUIERDA: Identidad (CLARA, seria)
   ========================= */
.registro-izquierda{
  background: var(--left-bg);
  color: var(--left-text);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);

  padding: clamp(22px, 3.5vw, 54px);
  text-align: center;

  /* separador elegante */
  border-right: 1px solid rgba(18,20,23,.08);
}

/* Logo arriba */
.logo-colemex{
  width: 120px;
  height: auto;
  margin: 0 auto 6px;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
}

/* COLEMEX */
.registro-izquierda h1{
  font-family: 'Cinzel', serif;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: 1px;
}

/* Texto institucional */
.descripcion{
  margin: 0 auto;
  max-width: 52ch;
  color: var(--left-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.75;
}

/* =========================
   DERECHA: Formulario (OSCURO ELEGANTE)
   ========================= */
.registro-derecha{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: clamp(22px, 3.5vw, 54px);
  color: #fff;

  background: linear-gradient(180deg, var(--right-top), var(--right-bottom));
}

/* Brillos sutiles (luce PRO) */
.registro-derecha::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 20%, rgba(200,162,74,.18), transparent 55%),
    radial-gradient(circle at 35% 75%, rgba(0,0,0,.35), transparent 55%);
  opacity: .95;
  pointer-events: none;
}

/* Logo grande tipo “marca” (sin tocar tu HTML)
   -> usamos el logo de la izquierda como “watermark” en la derecha */
.registro-derecha::after{
  content:"";
  position: absolute;
  inset: 0;
  background-image: url("../assets/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(520px, 70%);
  opacity: .10;
  pointer-events: none;
  filter: grayscale(20%);
}

/* Que el contenido quede arriba del watermark */
.registro-derecha > *{
  position: relative;
  z-index: 1;
}

/* Título form */
.registro-derecha h2{
  font-family: 'Cinzel', serif;
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: .6px;
  color: var(--gold);
  text-align: center;
}

/* Subtexto */
.subtexto{
  margin: 0 auto 18px;
  text-align: center;
  max-width: 58ch;
  color: rgba(255,255,255,.86);
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.5;
}

/* Mensaje (success/error) */
#mensaje{
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  display: none; /* se muestra cuando tenga clase */
}

/* Si el JS pone clase, se verá */
.mensaje-error{
  display: block;
  background: rgba(220, 53, 69, .15);
  border: 1px solid rgba(220, 53, 69, .35);
  color: #ffd6d6;
}

.mensaje-exito{
  display: block;
  background: rgba(40, 167, 69, .15);
  border: 1px solid rgba(40, 167, 69, .35);
  color: #d7ffe0;
}

/* Form */
#form-registro{
  width: min(520px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

/* Inputs */
#form-registro input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;

  padding: 12px 14px;
  font-size: 14px;
  outline: none;

  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

#form-registro input::placeholder{
  color: rgba(255,255,255,.70);
}

#form-registro input:focus{
  border-color: rgba(200,162,74,.62);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 4px var(--gold-soft);
}

/* Botón (serio, dorado) */
#btn-submit{
  margin-top: 6px;
  border: 1px solid rgba(200,162,74,.60);
  background: var(--gold);
  color: #1a1a1a;

  font-family: 'Cinzel', serif;
  font-weight: 800;
  letter-spacing: .4px;

  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  min-height: 46px;

  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .2s ease, opacity .2s ease;
}

#btn-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

#btn-submit:active{
  transform: translateY(0);
  filter: brightness(.98);
}

#btn-submit:disabled{
  opacity: .75;
  cursor: not-allowed;
}

/* Link de login */
.login-link{
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  text-align: center;
}

.login-link a{
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border-bottom: 2px solid rgba(200,162,74,.55);
}

.login-link a:hover{
  border-bottom-color: rgba(200,162,74,.95);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .registro-wrapper{
    grid-template-columns: 1fr;
  }

  .registro-izquierda{
    border-right: none;
    border-bottom: 1px solid rgba(18,20,23,.08);
  }

  .registro-derecha{
    min-height: 520px;
  }

  .registro-derecha::after{
    background-size: min(380px, 78%);
    opacity: .12;
  }
}

@media (max-width: 520px){
  .registro-izquierda,
  .registro-derecha{
    padding: 18px 14px;
  }

  #form-registro{
    width: 100%;
  }

  #btn-submit{
    width: 100%;
  }
}