/* Login y registro: diseno original de Mi Espacio (login.php y registro.php). */
:root{
  --panel-w:360px;
  --avatar:140px;
  --panel:#FF9500;
  --accent:#FFB347;
  --gp-orange:#FF9500;
  --gp-orange-light:#FFB347;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:linear-gradient(145deg,var(--gp-orange) 0%,var(--gp-orange-light) 50%,var(--gp-orange) 100%);
  color:#333;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:50px 16px 24px;
}
.login-wrapper{position:relative;width:100%;max-width:var(--panel-w);
  background:#fff;border-radius:24px;box-shadow:0 8px 22px rgba(0,0,0,.18);
  padding:130px 35px 32px}
.avatar{width:var(--avatar);height:var(--avatar);border-radius:50%;overflow:hidden;
  border:4px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.25);background:#fff;
  position:absolute;left:50%;top:-30px;transform:translateX(-50%)}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
h2{text-align:center;margin-bottom:1.4rem;font-size:1.6rem;color:#000}
p{margin-bottom:1rem;font-size:.95rem;line-height:1.5}
form{display:flex;flex-direction:column;gap:1.15rem}
.input-group{position:relative}
.input-group i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--panel)}
.input-group input{width:100%;padding:.65rem .8rem .65rem 2.5rem;
  border:1px solid var(--accent);border-radius:6px;background:#fff;font-size:1rem;font-family:inherit}
.input-group input:focus{outline:none;border-color:var(--panel)}
button{padding:.75rem;border:none;border-radius:6px;background:#000;color:#fff;
  font-weight:700;font-size:1rem;font-family:inherit;cursor:pointer;transition:.3s}
button:hover{background:#333}
.extras{display:flex;justify-content:flex-end;font-size:.8rem}
.extras a{color:#b35f00;text-decoration:none;font-weight:700;font-size:.9rem}
.extras a:hover{text-decoration:underline}
.register{margin:1.4rem 0 0;font-size:.9rem;text-align:center}
.register a{color:#b35f00;font-weight:600;text-decoration:none}
.register a:hover{text-decoration:underline}
.btn-google{display:block;margin:1.5rem auto 0;padding:.6rem 1.2rem;
  background:#007AFF;color:#fff;border-radius:4px;font-weight:600;text-decoration:none;
  text-align:center;width:fit-content}
.btn-google i{margin-right:8px}
.btn-google:hover{background:#0056CC}
.acepto{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;line-height:1.4}
.acepto input{margin-top:3px;accent-color:var(--panel)}
.acepto a{color:#b35f00;font-weight:600}
.pie-acceso{margin:1.2rem 0 0;font-size:.75rem;text-align:center;color:#666}
.pie-acceso a{color:inherit}

/* Mensajes con el mismo aspecto del login original */
.gp-aviso{padding:.6rem;border-radius:6px;text-align:center;margin-bottom:1rem;color:#fff;background:#007AFF;font-size:.92rem}
.gp-aviso.error{background:#e74c3c}
.gp-aviso.exito{background:#1e8449}
.gp-aviso.alerta{background:#b35f00}
.gp-aviso a{color:inherit}
.gp-boton{display:block;width:100%;padding:.75rem;border:none;border-radius:6px;background:#000;color:#fff;
  font-weight:700;font-size:1rem;text-align:center;text-decoration:none;cursor:pointer;transition:.3s;margin-top:.6rem}
.gp-boton:hover{background:#333}
.gp-boton.claro{background:#fff;color:#000;border:1px solid var(--accent)}
.gp-boton.claro:hover{background:#fff6e8}

.gp-tarjeta svg{display:block;max-width:100%;height:auto;margin:0 auto}
.gp-tarjeta ul{list-style:none;margin-bottom:1rem}
code{overflow-wrap:anywhere}
.gp-chico{font-size:.8rem;color:#666}

/* Ver u ocultar la contrasena */
.input-group.has-toggle input{padding-right:56px}
.input-group.has-toggle .toggle-pass{position:absolute;right:10px;top:0;bottom:0;width:40px;
  display:flex;align-items:center;justify-content:center;border:0;background:transparent;
  cursor:pointer;color:#666;padding:0;line-height:0;z-index:1}
.input-group.has-toggle .toggle-pass i{position:static;transform:none;color:inherit}
.input-group.has-toggle .toggle-pass:hover,
.input-group.has-toggle .toggle-pass:active,
.input-group.has-toggle .toggle-pass:focus{background:transparent!important;box-shadow:none}
.input-group.has-toggle .toggle-pass:focus-visible{outline:2px solid var(--panel);outline-offset:2px}
.toggle-pass .eye-off{display:none}
.toggle-pass[aria-pressed="true"] .eye{display:none}
.toggle-pass[aria-pressed="true"] .eye-off{display:inline-block}

@media(max-width:500px){
  :root{--avatar:115px}
  .login-wrapper{padding:100px 24px 28px}
}