/* Modal Overlay */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.modal.show { display: flex; animation: fadeIn 0.3s; }

/* Modal Content */
.modal-content { background: white; width: 90%; max-width: 400px; border-radius: 20px; padding: 25px; position: relative; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.modal-lg { max-width: 700px; } /* Más ancho para registro */

.close-modal { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: #9ca3af; }
.close-modal:hover { color: var(--text-dark); }
.modal-content h2 { margin-bottom: 20px; text-align: center; color: var(--text-dark); }

/* Tabs (Main) */
.tabs-header { display: flex; border-bottom: 1px solid #e5e7eb; margin-bottom: 20px; }
.tab-link { flex: 1; background: none; border: none; padding: 15px; cursor: pointer; font-weight: 500; color: var(--text-light); border-bottom: 2px solid transparent; }
.tab-link.active { color: var(--blue-primary); border-bottom-color: var(--blue-primary); background: #eff6ff; }

/* Sub Tabs (Correo/Cedula/Tel) */
.sub-tabs { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.sub-tab { flex: 1; border: 1px solid #e5e7eb; background: white; padding: 10px 5px; border-radius: 8px; font-size: 0.8rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text-light); }
.sub-tab.active { border-color: var(--blue-primary); color: var(--blue-primary); background: #eff6ff; }
.sub-tab i { font-size: 1.2rem; }

/* Formularios */
.input-group { position: relative; margin-bottom: 15px; width: 100%; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.input-group input, .input-group select { width: 100%; padding: 12px 15px 12px 40px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 0.95rem; outline: none; background: #f9fafb; color: var(--text-dark); }
.input-group input:focus { border-color: var(--blue-primary); background: white; ring: 2px solid var(--blue-primary); }

/* Registro Grid */
.register-form .row {
    flex-wrap: wrap; 
}
.register-form .row .input-group { flex: 1; }
.scrollable-y { max-height: 70vh; overflow-y: auto; padding-right: 5px; } /* Scroll para móviles */

/* Referral Box */
.referral-box { background: #ecfdf5; padding: 10px; border-radius: 8px; border: 1px dashed var(--green-primary); margin-bottom: 15px; }
.referral-box label { font-size: 0.8rem; color: var(--green-dark); display: block; margin-bottom: 5px; }
.input-clean { width: 100%; border: none; background: transparent; font-family: monospace; letter-spacing: 2px; outline: none; }

/* Footer Modal */
.modal-footer { text-align: center; margin-top: 20px; font-size: 0.9rem; }
.modal-footer a { color: var(--blue-primary); text-decoration: none; font-weight: bold; }

/* Utilities */
.tab-content { display: none; }
.tab-content.active { display: block; animation: slideIn 0.3s; }
.forgot-pass { display: block; text-align: right; font-size: 0.8rem; color: var(--blue-primary); text-decoration: none; margin-bottom: 10px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Mobile adjust for register form */
@media (max-width: 480px) {
    .register-form .row { flex-direction: column; gap: 0; }
 
}

/* --- ESTILO DE PIN (Solo afecta al input dentro del modal) --- */

/* Contenedor del PIN para darle espacio */
#tab-pin {
    padding: 10px 0;
    text-align: center;
}

/* Caja que envuelve el input */
.pin-display {
    margin: 20px 0 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El input transformado para parecer casillas separadas o PIN moderno */
.pin-input {
    width: 90%;            /* Ocupa casi todo el ancho disponible */
    height: 60px;          /* Altura cómoda */
    font-size: 3rem;       /* Puntos o números MUY grandes */
    letter-spacing: 1rem;  /* ESPACIO CLAVE: separa los puntos visualmente */
    text-align: center;    /* Centra el texto */
    
    /* Estilo visual limpio */
    border: none;
    border-bottom: 3px solid #e5e7eb; /* Solo línea inferior gris */
    background-color: transparent;    /* Fondo transparente */
    color: var(--text-dark);          /* Color del texto */
    outline: none;                    /* Quita el borde azul por defecto */
    
    font-family: monospace;           /* Asegura que los puntos tengan el mismo ancho */
    transition: all 0.3s ease;
}

/* Efecto cuando el usuario hace clic para escribir */
.pin-input:focus {
    border-bottom-color: var(--blue-primary); /* Cambia color de la línea */
    letter-spacing: 1.2rem; /* Pequeña animación de expansión */
}

/* Ajuste visual para el placeholder (los puntitos grises iniciales) */
.pin-input::placeholder {
    color: #d1d5db;
    font-size: 3rem;
    opacity: 0.5;
    vertical-align: middle;
}

/* Ajuste del botón entrar para separarlo del input */
#tab-pin .btn-full {
    margin-top: 10px;
}

/* =========================================
   CORRECCIÓN PARA SELECT (PAÍS) EN SAFARI/MÓVIL
   ========================================= */

.input-group select {
    /* 1. Quitar el estilo nativo de Apple/Safari */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 2. Asegurar fondo y color correctos */
    background-color: #f9fafb;
    color: var(--text-dark);
    cursor: pointer;

    /* 3. Flecha personalizada (porque al quitar la nativa, desaparece) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    
    /* 4. Evitar que el texto se corte a la derecha */
    padding-right: 40px; 
}

/* Evitar el Zoom automático en iPhone (letras deben ser 16px mínimo) */
@media screen and (max-width: 768px) {
    .input-group input, 
    .input-group select {
        font-size: 16px !important; /* Fuerza tamaño legible sin zoom */
    }
}


/* =========================================
   FIX CÉDULA (SAFARI / IPHONE)
   ========================================= */

/* 1. El Contenedor: Fuerza a que estén lado a lado */
.cedula-wrapper {
    display: flex !important;    /* !important asegura que nadie lo cambie */
    flex-direction: row;         /* Fila horizontal */
    align-items: flex-start;     /* Alinear al inicio */
    gap: 10px;                   /* Espacio entre la letra y el numero */
    width: 100%;
    margin-bottom: 15px;
}

/* 2. El Selector (V / E / J) */
.cedula-prefix {
    /* Tamaño y Forma */
    width: 75px !important;       /* Ancho fijo suficiente */
    height: 46px !important;      /* Altura exacta para igualar al input */
    padding: 0 10px;              /* Espacio interno */
    margin: 0;                    /* Sin márgenes extra */
    
    /* Estética */
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background-color: #f9fafb;
    color: #1f2937;
    font-size: 1rem;              /* Letra grande (evita zoom en iPhone) */
    font-weight: bold;
    cursor: pointer;

    /* --- TRUCO CRÍTICO PARA SAFARI --- */
    -webkit-appearance: none;     /* Mata el estilo nativo de iPhone */
    -moz-appearance: none;
    appearance: none;

    /* Flechita SVG gris */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

/* 3. El Input de la Cédula (Lado derecho) */
.cedula-wrapper .input-group {
    flex: 1;                      /* Ocupa todo el espacio restante */
    margin-bottom: 0 !important;  /* Quita margen inferior interno */
    width: auto;                  /* Deja que flexbox controle el ancho */
}

/* Asegurar que el input interno tenga la misma altura visual */
.cedula-wrapper .input-group input {
    height: 46px;                 /* Misma altura que el selector */
}


/* =========================================
   ESTILOS ROBUSTOS: CÉDULA Y TELÉFONO
   ========================================= */

/* 1. Control de la Fila (Para PC) */
.register-form .row {
    display: flex;
    gap: 15px; /* Espacio entre el bloque de Cédula y el de Teléfono */
    width: 100%;
}

/* 2. Envoltura de cada combo (Select + Input) */
.combo-wrapper {
    display: flex !important;
    flex: 1; /* Hace que ambos bloques midan lo mismo (50% cada uno en PC) */
    align-items: flex-start;
    gap: 8px; /* Espacio pequeñito entre el select y el input */
    margin-bottom: 15px;
    min-width: 0; /* Evita desbordamientos en flexbox */
}

/* 3. Estilo General de los Selectores (Reset para Safari/PC) */
.combo-select {
    height: 48px !important; /* Altura forzada para igualar input */
    padding: 0 10px 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background-color: #f9fafb;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    
    /* Magia para Safari/iPhone: Elimina el estilo burbuja nativo */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Flecha personalizada */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 12px;
}

/* 4. Anchos Específicos */

/* Cédula (V, E, J) -> Es corto */
.cedula-wrapper .combo-select {
    width: 70px; 
    padding-right: 20px; /* Espacio para la flecha */
}

/* Teléfono (🇻🇪 +58) -> Necesita más espacio */
.phone-wrapper .combo-select {
    width: 105px; /* Un poco más ancho para que quepa la bandera */
    padding-right: 20px;
}

/* 5. El Input de escritura (Cédula y Teléfono) */
.combo-wrapper .input-group {
    flex-grow: 1; /* Ocupa todo el espacio restante */
    margin-bottom: 0 !important;
    width: auto;
}

/* Asegurar altura del input interno */
.combo-wrapper .input-group input {
    height: 48px !important;
    padding-left: 40px; /* Espacio para el icono */
}

/* =========================================
   MEDIA QUERY (CELULARES)
   ========================================= */
@media (max-width: 600px) {
    /* En móvil, rompemos la fila para que quede uno debajo del otro */
    .register-form .row {
        flex-direction: column;
        gap: 0;
    }

    .combo-wrapper {
        width: 100%; /* Ocupa todo el ancho en móvil */
    }
}