/* ======================================================
   REGISTRO – UX 2026 (EXTENSIÓN SEGURA)
   NO ROMPE FEED / PERFIL
====================================================== */

.registro {
    width: 100%;
}

/* ======================================================
   CARD PRINCIPAL
====================================================== */

.registro-card {
    margin: 18px 16px;
    padding: 20px;
    border-radius: 20px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* ======================================================
   TÍTULOS
====================================================== */

.registro-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
    color: #ffffff;
}

.registro-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 18px;
}

/* ======================================================
   PROGRESO
====================================================== */

.registro-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.registro-progress span {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.18);
    transition: background .3s ease;
}

.registro-progress span.active {
    background: linear-gradient(90deg, #7b5cff, #4dd0ff);
}

/* ======================================================
   ETAPAS
====================================================== */

.registro-step {
    display: none;
}

.registro-step.active {
    display: block;
    animation: fadeStep .25s ease;
}

@keyframes fadeStep {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ======================================================
   STACK VERTICAL
====================================================== */

.registro-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ======================================================
   FILA DOBLE
====================================================== */

.registro-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .registro-row {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   INPUTS / SELECT
====================================================== */

.registro input,
.registro select {
    height: 50px;
    padding: 0 16px;
    border-radius: 16px;

    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);

    color: #ffffff;
    font-size: 15px;
    font-weight: 400;

    outline: none;
}

/* Placeholder */
.registro input::placeholder {
    color: rgba(255,255,255,0.55);
}

/* Focus */
.registro input:focus,
.registro select:focus {
    border-color: rgba(123,92,255,0.6);
    box-shadow: 0 0 0 2px rgba(123,92,255,0.18);
}

/* ======================================================
   FIX INPUT DATE – MÓVIL
====================================================== */


/* Texto visible */

/* Icono calendario */

/* ======================================================
   FIX SELECT (DESPLEGABLE OSCURO)
====================================================== */

.registro select {
    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #ffffff 50%),
        linear-gradient(135deg, #ffffff 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 12px) 20px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

/* Opciones */
.registro select option {
    background: #141418;
    color: #ffffff;
}

/* ======================================================
   BOTONES
====================================================== */

.registro-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.registro-btn {
    height: 50px;
    padding: 0 22px;
    border-radius: 16px;
    border: none;

    background: linear-gradient(135deg, #7b5cff, #4dd0ff);
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    cursor: pointer;

    transition: transform .15s ease, filter .2s ease;
}

.registro-btn:hover {
    filter: brightness(1.05);
}

.registro-btn:active {
    transform: scale(0.96);
}

/* Secundario */
.registro-btn.secondary {
    background: rgba(255,255,255,0.14);
    color: #ffffff;
}

/* ======================================================
   AVATAR
====================================================== */

.registro-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.registro-avatar img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,0.12);
}

/* ======================================================
   UBICACIÓN (READ ONLY)
====================================================== */

.registro input[readonly] {
    opacity: 0.85;
    cursor: not-allowed;
}

/* ======================================================
   BLINDAJE FINAL
====================================================== */

.registro * {
    box-sizing: border-box;
}

/* ======================================================
   MEJORAS REGISTRO (PRO)
====================================================== */

/* FIX iOS: placeholder visible en input date (Edad) */
input.date-age{ color:#fff; }
input.date-age::-webkit-date-and-time-value{ color:#fff; }
input.date-age:before{
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.75);
  margin-right: 6px;
}
input.date-age:focus:before,
input.date-age:valid:before{ content: ''; }

/* Legal ubicación */
.registro-legal{
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.78);
  margin-top: 10px;
}

/* Reenviar código */
.registro-resend{ margin-top: 14px; }
.registro-resend-btn{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.registro-resend-btn:disabled{ opacity: .55; }
.registro-resend-hint{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
}

/* Avatar input oculto (solo botón) */
#avatarInput{ display:none !important; }

/* Bio con diseño */
.registro-avatar textarea{
  width: 100% !important;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 12px 12px;
  outline: none;
  resize: none;
}
.registro-avatar textarea::placeholder{ color: rgba(255,255,255,0.62); }

/* Glass modal (registro) */
.glass-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
  z-index: 9998;
}
.glass-modal-overlay.open{ opacity: 1; pointer-events: auto; }

.glass-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: min(92vw, 420px);
  background: rgba(18,18,18,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 16px 16px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 9999;
  color: #fff;
}
.glass-modal.open{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.glass-modal h3{ margin: 0 0 8px; font-size: 16px; }
.glass-modal p{ margin: 0 0 14px; color: rgba(255,255,255,0.82); font-size: 13.5px; line-height: 1.35; }
.glass-modal-actions{ display:flex; justify-content:flex-end; gap:10px; }
.glass-modal-btn{
  border: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 800;
}
.glass-modal-btn.primary{
  background: var(--accent, #ff6a4a);
  box-shadow: 0 8px 22px rgba(255, 122, 77, 0.45), inset 0 0 0 1px rgba(255,255,255,0.18);
}


/* iOS/Chrome: evita que input date se vea más grande */
.registro input[type="date"]{
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    line-height: 50px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 16px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
}
.registro input[type="date"]::-webkit-date-and-time-value{
    color:#fff;
    padding:0;
}
.registro input[type="date"]::-webkit-calendar-picker-indicator{
    opacity: 0.9;
    filter: invert(1);
}