/* Generado al sacar los <style> del cuerpo del documento: un <style> ahi es
   invalido en HTML5 y abortaba la validacion W3C. El <link> queda en la MISMA
   posicion del documento, asi que el orden de cascada no cambia.
   No mover este <link> de sitio sin revisar la cascada. */

/* ===== Anti-zoom iOS del modal de acceso (antes inline en navbar-tech.php L537) ===== */

/* Anti-zoom iOS: inputs con font-size < 16px provocan zoom automático al enfocar
   en Safari iOS, descuadrando el modal e impidiendo escribir cómodo. */
.login-modal-container .login-form-input { font-size: 16px !important; }
@media (max-width: 768px) { .login-modal-container .login-form-input { font-size: 16px !important; } }
@media (max-width: 576px) { .login-modal-container .login-form-input { font-size: 16px !important; } }
@media (max-width: 360px) { .login-modal-container .login-form-input { font-size: 16px !important; } }
/* Scroll suave con muchos campos en móvil (iOS/Android) */
.login-modal-overlay { -webkit-overflow-scrolling: touch; }
.login-modal-container { -webkit-overflow-scrolling: touch; max-height: 92vh; }
@media (max-width: 576px) { .login-modal-container { max-height: none; } }

/* === Registro: features portadas del checkout (medidor, coincidencia, generador) === */
.password-strength-meter { height: 4px; border-radius: 2px; background: rgba(148,197,253,0.12); margin-top: 8px; overflow: hidden; transition: opacity .3s ease; }
.password-strength-fill { height: 100%; border-radius: 2px; width: 0%; transition: width .3s ease, background-color .3s ease; }
.password-strength-fill[data-strength="0"] { width: 0%; }
.password-strength-fill[data-strength="1"] { width: 25%; background: #ef4444; }
.password-strength-fill[data-strength="2"] { width: 50%; background: #f59e0b; }
.password-strength-fill[data-strength="3"] { width: 75%; background: #3b82f6; }
.password-strength-fill[data-strength="4"] { width: 100%; background: #10b981; }
.password-strength-text { font-size: .7rem; font-weight: 600; margin-top: 4px; text-align: right; transition: color .3s ease; }
.password-strength-text[data-strength="1"] { color: #ef4444; }
.password-strength-text[data-strength="2"] { color: #f59e0b; }
.password-strength-text[data-strength="3"] { color: #3b82f6; }
.password-strength-text[data-strength="4"] { color: #10b981; }
.login-form-input.input-valid { border-color: #10b981 !important; background: rgba(16,185,129,0.06) !important; }
.login-form-input.input-invalid { border-color: #ef4444 !important; background: rgba(239,68,68,0.06) !important; }
.login-field-hint { font-size: .72rem; margin-top: 4px; display: none; align-items: center; gap: 4px; }
.login-field-hint.visible { display: flex; }
.login-field-hint.hint-error { color: #ef4444; }
.login-field-hint.hint-success { color: #10b981; }
.btn-generar-username { margin-left: auto; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; border: none; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; }
.btn-generar-username:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(59,130,246,0.4); }
.btn-generar-username:disabled { opacity: .6; cursor: wait; }
.btn-generar-username .fa-spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-form-label { display: flex; align-items: center; }
.login-form-labelrow { display: flex; align-items: center; }
.username-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.username-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; border: 2px solid; }
.username-chip.available { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: #34d399; }
.username-chip.available:hover { background: rgba(16,185,129,0.15); border-color: #10b981; transform: translateY(-1px); }
.username-chip.available .chip-icon { color: #10b981; }
.username-suggestions-loading { font-size: 12px; color: #60a5fa; font-weight: 500; padding: 4px 0; }