/* =====================================================
   AFRODITASS – TEMA NEGRO Y DORADO
   Ingreso, registro y recuperación de contraseña.
   Solo apariencia.
   ===================================================== */
:root{
  --primary:#d4af37;
  --accent:#f5d77a;
  --text:#ece6d6;
  --muted:#a9a293;
  --dark:#0b0b0d;
  --card:#16161a;
  --line:rgba(212,175,55,.25);
  --grad:linear-gradient(135deg,#f5d77a 0%,#d4af37 50%,#a8801f 100%);
}

html,body{background:var(--dark)!important}
body{
  color:var(--text)!important;font-family:'Poppins',sans-serif!important;min-height:100vh;
  background:radial-gradient(ellipse at top,rgba(212,175,55,.10) 0%,rgba(11,11,13,0) 55%),var(--dark)!important;
}
.wrapper,.main-panel,.content{background:transparent!important}
.wrapper{height:auto!important;min-height:100vh}

/* ---------- Tarjeta ---------- */
.card,.card-user,.card-user[style]{
  background:var(--card)!important;border:1px solid var(--line)!important;border-radius:22px!important;
  box-shadow:0 25px 60px rgba(0,0,0,.6)!important;color:var(--text)!important;overflow:hidden;
}
.wrapper .content .card-user{max-width:460px;margin:20px auto 0}
.card-user .card-header{background:transparent!important;border:0!important;padding:18px 26px 0!important}
.card-user .card-header:empty,.card-user .card-header .card-title:empty{display:none}
.card-user .card-body{padding:10px 26px 26px!important;color:var(--text)!important;min-height:0!important}
.card-title,.card-title[style]{
  display:flex;align-items:center;gap:10px;margin:0 0 6px;
  font-family:'Playfair Display',serif!important;font-size:26px!important;color:var(--accent)!important;
}
.card-title b{font-weight:700}

/* ---------- Logo ---------- */
center{display:block;width:100%;text-align:center}
img.af-logo{width:110px!important;height:110px;border-radius:50%;padding:0!important;margin:14px 0 30px;object-fit:cover;box-shadow:0 0 0 6px rgba(212,175,55,.08)}
img.af-logo-sm{width:46px!important;height:46px;border-radius:50%;object-fit:cover}

/* ---------- Textos ---------- */
label,label[style],.form-check-label[style]{color:var(--text)!important;font-size:13px!important;letter-spacing:.3px;margin-bottom:6px}
label b{font-weight:500}
.row[style*="color: black"],.form-group[style]{color:var(--muted)!important;font-size:13px}
div[style*="margin-left: 20px"]{color:var(--text)}
[style*="ff0065"]:not(.btn){color:var(--accent)!important}
div[style*="font-size: 20px"][style*="ff0065"]{font-family:'Playfair Display',serif;font-size:24px!important;margin:0 0 14px;text-align:center}
[style*="b82300"],[style*="b80000"]{color:#ff8f8f!important;font-size:14px!important}
a{color:var(--accent)}
a:hover{color:var(--primary)}
b{font-weight:600}

/* ---------- Campos ---------- */
.form-control,.form-control[style],select[style],textarea[style],input[type=text],input[type=password],input[type=number],input[type=email]{
  background-color:#0f0f12!important;border:1px solid var(--line)!important;color:var(--text)!important;
  border-radius:12px!important;height:46px;padding:10px 14px!important;font-size:14px!important;box-shadow:none!important;
  transition:border-color .2s,box-shadow .2s;
}
textarea.form-control,textarea.form-control[style]{height:auto;min-height:120px;max-height:none!important;line-height:1.6}
.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(212,175,55,.15)!important;outline:0}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:#7d776b!important}
select.form-control option{background:#111;color:var(--text)}
input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;margin-right:6px;vertical-align:middle}
.form-group{margin-bottom:16px}

/* ---------- Botones ---------- */
.btn,.btn-primary,.btn-primary[style],.btn-round{
  background:var(--grad)!important;background-color:transparent!important;border:0!important;color:#111!important;
  font-family:'Poppins',sans-serif;font-weight:600!important;font-size:14px!important;text-transform:none!important;letter-spacing:.2px;
  border-radius:50px!important;padding:12px 24px!important;margin:6px 0!important;
  box-shadow:0 6px 18px rgba(212,175,55,.25)!important;transition:transform .2s,box-shadow .2s;
}
.btn:hover,.btn-primary:hover,.btn-round:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(212,175,55,.4)!important;color:#111!important}
/* Botones secundarios: solo borde */
a.btn[href="registro.php"],a.btn[href="recuper_contra.php"],a.btn[href="index.php"],a.btn[href="../index.php"],a.btn[href="#"]{
  background:transparent!important;border:1px solid var(--primary)!important;color:var(--accent)!important;box-shadow:none!important;
}
a.btn[href="registro.php"]:hover,a.btn[href="recuper_contra.php"]:hover,a.btn[href="index.php"]:hover,a.btn[href="../index.php"]:hover,a.btn[href="#"]:hover{
  background:rgba(212,175,55,.12)!important;color:var(--accent)!important;
}
.card-body > form > .row:last-child .btn-round,form .row > a.btn-round{margin:6px 6px 6px 0!important}
form > .row:last-of-type{padding-left:15px;padding-right:15px}

/* ---------- Pie ---------- */
.footer,.footer[style]{background:transparent!important;border:0!important;color:var(--muted)!important;padding:24px 0!important}
.footer .credits{margin:0 auto!important}
.footer .copyright{color:var(--muted)!important;font-size:13px}

@media (max-width:575px){
  .card-user .card-body{padding:8px 18px 20px!important}
  .card-title{font-size:22px!important}
  form .row > a.btn-round{width:100%;margin-right:0!important}
}

/* ---------- Ajustes ---------- */
[style*="margin-top: -40px"]{margin-top:0!important}
img.af-logo{margin:14px 0 18px}
.btn{white-space:normal!important;line-height:1.35!important}
div[style*="margin-left: 20px"] input[type=checkbox]{margin:0 6px 0 16px!important}
div[style*="margin-left: 20px"]{margin-left:0!important;line-height:2.2}
.update > div[style*="text-align: center"]{margin-top:12px;font-size:14px}

/* ---------- Mejoras del formulario ---------- */
/* Listas desplegables: texto centrado (ya no se corta) y flecha dorada */
select.form-control,select.form-control[style]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  height:46px!important;padding:0 40px 0 14px!important;line-height:44px!important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 16px center!important;
}
input.form-control,input.form-control[style]{height:46px!important;line-height:normal!important}

/* Casillas de preferencias: oscuras con visto dorado */
input[type=checkbox]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:20px!important;height:20px!important;border-radius:6px;cursor:pointer;vertical-align:middle;
  background:#0f0f12;border:1px solid var(--primary);transition:background .15s,box-shadow .15s;
}
input[type=checkbox]:hover{box-shadow:0 0 0 3px rgba(212,175,55,.15)}
input[type=checkbox]:checked{
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
div[style*="margin-left: 20px"] input[type=checkbox]{margin:0 8px 0 0!important}
div[style*="margin-left: 20px"] .form-check-label{margin:0 22px 0 0!important;font-size:14px!important;vertical-align:middle;cursor:pointer}
div[style*="margin-left: 20px"]{margin-top:4px;line-height:2.6!important}

/* Tarjeta de registro: centrada y con línea bajo el título */
.container > .col-md-12{padding:0}
.container .card-user{margin:24px auto}
.container .card-user .card-header{padding:22px 30px 16px!important;border-bottom:1px solid var(--line)!important;margin-bottom:18px}
.container .card-user .card-body{padding:6px 30px 28px!important}
#mensaje_error span[style]{color:#ffb0b0!important}

/* ---------- Mensajes de error / aviso ---------- */
.af-msg:empty{display:none}
.af-msg{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 16px;text-align:left;
  background:rgba(220,53,69,.12);border:1px solid rgba(220,53,69,.4);border-left:4px solid #e5606d;border-radius:12px;
  color:#ffb3ba!important;font-size:14px!important;font-weight:500;line-height:1.5;
}
.af-msg::before{content:"\f071";font-family:FontAwesome;color:#e5606d;font-size:16px;flex:0 0 auto}
.af-msg span[style]{color:inherit!important}
.af-msg + br{display:none}

/* ---------- Campos autocompletados por el navegador (ya no se ponen blancos) ---------- */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--text)!important;caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px #0f0f12 inset!important;box-shadow:0 0 0 1000px #0f0f12 inset!important;
  border:1px solid var(--line)!important;transition:background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus{border-color:var(--primary)!important;-webkit-box-shadow:0 0 0 1000px #0f0f12 inset,0 0 0 3px rgba(212,175,55,.15)!important}
input:autofill{background-color:#0f0f12!important;color:var(--text)!important}

/* ---------- Aviso "Usuario disponible / no disponible" ---------- */
.form-group{position:relative}
#result-username{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:2}
#result-username .alert{
  display:flex;align-items:center;gap:6px;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  font-size:12px!important;line-height:1.2;white-space:nowrap;
}
#result-username .alert b{font-weight:500}
#result-username .alert::before{font-family:FontAwesome;font-size:13px}
#result-username .alert-success{color:#6fdc8c!important}
#result-username .alert-success::before{content:"\f058"}
#result-username .alert-danger{color:#ff8f8f!important}
#result-username .alert-danger::before{content:"\f057"}
#result-username img{width:18px;height:18px}
.card-body form > .row{margin-bottom:6px}

/* Autocompletado del navegador: esta regla debe ganarle a todas las anteriores */
html body input:not(#_):-webkit-autofill,
html body input:not(#_):-webkit-autofill:hover,
html body input:not(#_):-webkit-autofill:focus,
html body input:not(#_):-webkit-autofill:active,
html body textarea:not(#_):-webkit-autofill,
html body select:not(#_):-webkit-autofill{
  -webkit-text-fill-color:#ece6d6!important;caret-color:#ece6d6!important;
  -webkit-box-shadow:0 0 0 1000px #0f0f12 inset!important;box-shadow:0 0 0 1000px #0f0f12 inset!important;
  background-color:#0f0f12!important;background-image:none!important;color:#ece6d6!important;
  border:1px solid rgba(212,175,55,.25)!important;
}
html body input:not(#_):-webkit-autofill:focus{
  border-color:#d4af37!important;
  -webkit-box-shadow:0 0 0 1000px #0f0f12 inset,0 0 0 3px rgba(212,175,55,.15)!important;
  box-shadow:0 0 0 1000px #0f0f12 inset,0 0 0 3px rgba(212,175,55,.15)!important;
}
html body input:not(#_):autofill{background-color:#0f0f12!important;color:#ece6d6!important}

/* Más aire entre filas para que el aviso de usuario no toque la etiqueta de abajo */
.card-body form .form-group{margin-bottom:24px}
#result-username{margin-top:5px}

/* ---------- Registro compacto: todo el formulario cabe sin bajar (pantallas de escritorio) ---------- */
@media (min-width:768px){
  .container .card-user{margin:12px auto 0}
  .container .card-user .card-header{padding:12px 28px 10px!important;margin-bottom:12px}
  .container .card-user .card-title{font-size:22px!important;margin:0}
  .container .card-user img.af-logo-sm{width:36px!important;height:36px}
  .container .card-user .card-body{padding:0 28px 16px!important}
  .container .card-user .card-body > br,.container .card-user form > br{display:none}
  .container .card-user form > .row{margin-bottom:0}
  .container .card-user form .form-group{margin-bottom:12px}
  .container .card-user label,.container .card-user label[style]{font-size:12px!important;margin-bottom:3px}
  .container .card-user .form-control,.container .card-user .form-control[style],
  .container .card-user input.form-control,.container .card-user select.form-control{
    height:38px!important;line-height:36px!important;padding-top:0!important;padding-bottom:0!important;border-radius:10px!important;font-size:13px!important;
  }
  .container .card-user textarea.form-control,.container .card-user textarea.form-control[style]{
    height:64px!important;min-height:64px;line-height:1.5!important;padding:8px 14px!important;resize:vertical;
  }
  /* Preferencias en una sola línea */
  .container .card-user div[style*="margin-left: 20px"]{line-height:38px!important;margin-top:0;white-space:nowrap}
  .container .card-user div[style*="margin-left: 20px"] br{display:none}
  .container .card-user div[style*="margin-left: 20px"] .form-check-label{margin-right:16px!important;font-size:13px!important}
  .container .card-user input[type=checkbox]{width:18px!important;height:18px!important}
  .container .card-user .row[style*="color: black"] .form-group{margin-bottom:6px;font-size:12px}
  .container .card-user .btn{padding:9px 22px!important;margin:2px 6px 2px 0!important;font-size:13px!important}
  .container .card-user .af-msg{margin-bottom:10px;padding:8px 14px;font-size:13px!important}
  .container .card-user #result-username{position:absolute;top:auto;bottom:-15px;margin:0}
  .container .card-user #result-username .alert{font-size:11px!important}
  .container ~ .footer,.container .footer,.footer{padding:8px 0!important}
}
@media (min-width:768px){
  /* hueco fijo para el aviso "Usuario disponible" bajo la primera fila */
  .container .card-user form > .row:first-of-type .form-group{margin-bottom:20px}
  .container .card-user #result-username{bottom:-17px}
}
@media (min-width:768px){
  /* Un poco más grande: campos, letras y botones */
  .container .card-user{margin-top:6px}
  .container .card-user .card-title{font-size:24px!important}
  .container .card-user label,.container .card-user label[style]{font-size:13.5px!important;margin-bottom:4px}
  .container .card-user .form-control,.container .card-user .form-control[style],
  .container .card-user input.form-control,.container .card-user select.form-control{
    height:43px!important;line-height:41px!important;font-size:15px!important;
  }
  .container .card-user textarea.form-control,.container .card-user textarea.form-control[style]{font-size:15px!important;line-height:1.5!important}
  .container .card-user form .form-group{margin-bottom:10px}
  .container .card-user div[style*="margin-left: 20px"]{line-height:43px!important}
  .container .card-user div[style*="margin-left: 20px"] .form-check-label{font-size:15px!important}
  .container .card-user input[type=checkbox]{width:20px!important;height:20px!important}
  .container .card-user .row[style*="color: black"] .form-group{font-size:13px}
  .container .card-user .btn{padding:11px 26px!important;font-size:14.5px!important}
}
@media (min-width:768px){
  /* Registro centrado en la pantalla y un poco más ancho */
  body:has(> .container){display:flex;flex-direction:column;justify-content:center;min-height:100vh;margin:0}
  body > .container{max-width:1120px!important;margin:0 auto!important;padding:10px 16px}
  body > .container .card-user{margin:0 auto}
}
@media (min-width:768px) and (min-height:700px){
  /* Si la pantalla es alta, se aprovecha el espacio */
  .container .card-user .card-header{padding:16px 30px 14px!important;margin-bottom:16px}
  .container .card-user form .form-group{margin-bottom:15px}
  .container .card-user form > .row:first-of-type .form-group{margin-bottom:22px}
  .container .card-user textarea.form-control,.container .card-user textarea.form-control[style]{height:88px!important;min-height:88px}
  .container .card-user .card-body{padding-bottom:22px!important}
}
@media (min-width:768px) and (min-height:700px){
  /* Un poquito más grande en pantallas altas */
  body > .container{max-width:1200px!important}
  .container .card-user .card-title{font-size:27px!important}
  .container .card-user img.af-logo-sm{width:42px!important;height:42px}
  .container .card-user label,.container .card-user label[style]{font-size:14.5px!important}
  .container .card-user .form-control,.container .card-user .form-control[style],
  .container .card-user input.form-control,.container .card-user select.form-control{
    height:46px!important;line-height:44px!important;font-size:16px!important;
  }
  .container .card-user textarea.form-control,.container .card-user textarea.form-control[style]{font-size:16px!important;line-height:1.5!important}
  .container .card-user div[style*="margin-left: 20px"]{line-height:46px!important}
  .container .card-user div[style*="margin-left: 20px"] .form-check-label{font-size:16px!important}
  .container .card-user input[type=checkbox]{width:22px!important;height:22px!important}
  .container .card-user .row[style*="color: black"] .form-group{font-size:14px}
  .container .card-user .btn{padding:12px 30px!important;font-size:15.5px!important}
  .container .card-user form .form-group{margin-bottom:13px}
  .container .card-user .card-header{padding:14px 30px 12px!important;margin-bottom:14px}
}