/*
  registro.css
  Propósito: estilos para la página de registro de usuarios.
  Secciones principales:
    - :root: variables de color y acentos.
    - body y .registro-card: layout y tarjeta de formulario.
    - inputs, botones y microanimaciones.
    - loader y overlay de éxito (.success-overlay).
    - google-area: espacio para el botón de inicio con Google.
*/

:root{
  --bg:#ffffff;
  --primary:#d90429;
  --accent:#222;
  --success:#16a34a;
  --muted:#666;
}
/* Layout: centrado vertical/horizontal y fondo */
body{font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#fafafa,#fff);display:flex;align-items:center;justify-content:center;height:100vh;margin:0}
.registro-card{width:360px;padding:1.5rem;border-radius:10px;background:var(--bg);box-shadow:0 8px 30px rgba(0,0,0,0.08);text-align:left;transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .35s}
.animate-up{transform:translateY(12px);opacity:0;animation:fadeInUp .6s forwards .12s}
@keyframes fadeInUp{to{transform:none;opacity:1}}
.registro-card h2{margin-top:0;margin-bottom:0.75rem;color:var(--accent)}
.registro-card label{display:block;margin-top:0.6rem;font-size:0.9rem;color:#333}
.registro-card input{width:100%;padding:0.6rem;border-radius:6px;border:1px solid #ddd;margin-top:0.25rem;transition:box-shadow .18s,transform .12s}
.registro-card input:focus{outline:none;box-shadow:0 6px 20px rgba(209,4,41,0.08);transform:translateY(-2px)}
.pass-row{display:flex;gap:0.5rem}
.small{background:#eee;border:none;padding:0.4rem 0.6rem;border-radius:6px;cursor:pointer;transition:transform .12s,background .12s}
.small:hover{transform:translateY(-2px)}
#btnRegistro{width:100%;margin-top:0.8rem;padding:0.7rem;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .12s,box-shadow .12s}
#btnRegistro:active{transform:translateY(1px)}
#btnRegistro[disabled]{opacity:.7;cursor:default}
.msg{margin-top:0.6rem;color:var(--muted);font-size:0.95rem;min-height:1.4em;transition:transform .12s}
.msg.error{color:#b00020;animation:shake .35s}
.msg.success{color:var(--success)}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.google-area{display:flex;flex-direction:column;align-items:center;margin-bottom:0.6rem}
.google-area .muted{font-size:0.85rem;color:#666;margin-top:0.4rem}
.small:active{transform:translateY(1px)}
@media(max-width:420px){.registro-card{width:92%;padding:1rem}}

/* fondo body */
body {
  background-image: url('../Multimedia/EPts.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

/* loader */
.loader{width:36px;height:36px;border-radius:50%;border:4px solid rgba(0,0,0,0.08);border-top-color:var(--primary);margin:10px auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* success overlay */
.success-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.36);z-index:40;color:#fff;animation:fadeIn .18s}
.success-overlay p{margin-top:12px;font-size:1.05rem}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.checkmark-circle{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);position:relative;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.18)}
.checkmark{font-size:56px;color:var(--success);transform:scale(.2);animation:pop .45s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes pop{to{transform:scale(1)}}

/* acciones después del registro */
.after-actions{display:flex;gap:0.6rem;justify-content:center;margin-top:0.6rem}



/* ajuste para checkbox + label más juntos */
.remember-row{display:flex;gap:0.35rem;align-items:center;margin:0.45rem 0;font-size:0.95rem}
.remember-row input[type="checkbox"]{width:16px;height:16px;margin:0}

/* empujar el área de Google más abajo y centrar el botón */
.google-area{display:flex;flex-direction:column;align-items:center;margin:0.9rem 0 0 0}
.google-area .muted{font-size:0.85rem;color:#666;margin-top:0.4rem}
#g_id_signin{ /* espacio para el botón renderizado por Google */ width:100%;max-width:300px;display:flex;justify-content:center}