/* ===== FIX: mensaje de error debajo del botón, sin encimarse ===== */
.auth-form .auth-btn {
display: inline-block;
margin-bottom: 10px; /* espacio entre botón y error */
}
 .auth-form .auth-error {
display: block;
margin: 6px 0 0 0; /* separación real */
padding: 0;
line-height: 1.25;
font-size: 13px;
color: #d11; /* o tu rojo */
text-align: left;
white-space: normal;
word-break: break-word;
/* MUY IMPORTANTE: evitar que por CSS antiguo se vuelva flotante/absoluto */
position: static !important;
}
 /* (Opcional pro) reservar espacio para 1 línea de error y evitar "saltos" */
.auth-form .auth-error {
min-height: 16px;
}
/* Icono combinado (tel + mail) alineado y SIN descuadrar */
.auth-input-group {
position: relative;
}
 /* Bloque del icono dual con ancho fijo */
.icon-combo {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 44px; /* CLAVE: ancho fijo */
display: inline-flex;
align-items: center;
justify-content: center; /* centra los dos iconos dentro del bloque */
gap: 8px;
opacity: .85;
pointer-events: none;
font-size: 18px;
}
 /* El input ahora deja espacio real para el bloque de iconos */
.auth-input-group input {
padding-left: 70px; /* 14px (left) + 44px (width) + margen */
}
 /* Ajuste fino */
.icon-combo i {
line-height: 1;
}
 /* Opcional: si en tu CSS original tienes input muy alto o distinto,
   esto ayuda a mantener el combo centrado visualmente */
.icon-combo i {
display: inline-block;
}
/* === FIX: icono dual (tel + mail) sin descuadrar === */
.auth-input-group {
position: relative;
}
 /* Contenedor dual con ancho fijo (como si fuera 1 icono) */
.auth-input-group .auth-icon-dual {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; /* ancho fijo para alinear */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    opacity: .9;
}
     /* Tamaño consistente de ambos iconos */
    .auth-input-group .auth-icon-dual i {
        font-size: 18px;
        line-height: 1;
    }
     /* Deja espacio suficiente para el icono dual */
    .auth-input-group .auth-icon-dual + input {
        padding-left: 70px !important; /* importante para vencer reglas anteriores */
    }
 /* Importante: evita que reglas de .auth-input-group i afecten al dual */
.auth-input-group > i {
    position: absolute; /* si tu CSS ya lo hace, esto no estorba */
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
}
 /* Password group: asegurar padding correcto con icono lock */
.auth-password-group input {
padding-left: 54px; /* normalmente 50-60; ajusta si tu diseño usa otro */
padding-right: 46px; /* espacio para el ojo */
}
  /* ===============================
   FIX PASSWORD GROUP (LOCK + OJO)
================================ */
 /* Restaurar padding correcto SOLO para contraseña */
.auth-password-group input {
padding-left: 54px !important; /* espacio para el candado */
padding-right: 46px !important; /* espacio para el ojo */
}
 /* Asegurar posición correcta del icono lock */
.auth-password-group > i.ri-lock-line {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
opacity: .9;
}
 /* Asegurar posición correcta del icono ojo */
.auth-password-group .toggle-pass {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
opacity: .9;
}
 /* =====================================
   FIX ICONOS PASSWORD (candado + ojo)
===================================== */
 /* El grupo contraseña debe manejar SUS iconos aparte */
.auth-password-group {
position: relative;
}
 /* Candado (izquierda) */
.auth-password-group .ri-lock-line {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: .9;
    pointer-events: none;
}
 /* Ojo (derecha) */
.auth-password-group .toggle-pass {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    opacity: .9;
}
 /* El input de contraseña con espacio correcto */
.auth-password-group input {
    padding-left: 54px !important; /* espacio para candado */
    padding-right: 46px !important; /* espacio para ojo */
}
 /* IMPORTANTE: evitar que reglas del icono-dual afecten aquí */
.auth-password-group i {
    all: unset;
    position: absolute;
    font-family: remixicon !important;
}
  /* =========================================================
   BASE: MODAL AUTH (login/registro)
   + SUGERENCIAS (PRO) unificado y sin duplicados
   ========================================================= */
 /* ----------------------- FONDO DEL MODAL ----------------------- */
.modal-auth {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0,0,30,0.55);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(6px);
z-index: 9999;
animation: fade-bg .3s ease-out;
}
 .modal-auth.oculto {
    display: none;
}
 @keyframes fade-bg {
from {
    opacity: 0;
}
 to {
    opacity: 1;
}
}
 /* ----------------------- CONTENEDOR PREMIUM (default) ----------------------- */
.modal-auth-contenido {
background: rgba(255,255,255,0.92);
padding: 48px;
width: 420px;
border-radius: 25px;
box-shadow: 0 18px 45px rgba(0,0,50,0.3);
position: relative;
animation: slide-up .35s ease-out;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.4);
}
 @keyframes slide-up {
from {
    opacity: 0;
    transform: translateY(25px) scale(0.96);
}
 to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}
 /* ----------------------- BOTÓN CERRAR ----------------------- */
.modal-auth-cerrar {
position: absolute;
top: 16px;
right: 20px;
font-size: 26px;
cursor: pointer;
color: #666;
transition: .2s;
user-select: none;
}
 .modal-auth-cerrar:hover {
    color: #000;
    transform: scale(1.2);
}
 /* ----------------------- ENCABEZADO ----------------------- */
.auth-header {
text-align: center;
margin-bottom: 32px;
}
 .auth-header h2 {
    font-size: 26px;
    font-weight: 800;
    color: #000066;
    margin: 0;
}
 .auth-sub {
margin: 12px 0 0;
color: #555;
font-size: 15px;
}
 /* ----------------------- TABS PREMIUM ----------------------- */
.auth-tabs {
display: flex;
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
gap: 12px;
}
 .auth-tab {
flex: 1;
padding: 14px 0;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #777;
transition: .25s;
}
 .auth-tab:hover {
    color: #000066;
}
 .auth-tab.activo {
    color: #000066;
    border-bottom: 3px solid #000066;
}
 /* ----------------------- FORMULARIOS ----------------------- */
.auth-form {
margin-top: 35px;
display: flex;
flex-direction: column;
gap: 26px;
}
 .auth-form .auth-input-group + .auth-input-group {
    margin-top: 30px;
}
 .auth-input-group {
display: flex;
align-items: center;
background: #f0f2ff;
border: 1px solid #cfd3ff;
padding: 16px 18px;
border-radius: 13px;
gap: 12px;
transition: .25s;
}
 .auth-input-group:hover {
    border-color: #000066;
    background: #e8eaff;
    transform: scale(1.02);
}
 .auth-input-group i {
    font-size: 22px;
    color: #000066;
}
 .auth-input-group input {
    border: none;
    outline: none;
    background: none;
    flex: 1;
    font-size: 16px;
}
 /* Glow premium al enfocar */
.auth-input-group:focus-within {
    border-color: #0000ff;
    background: #eef0ff;
    box-shadow: 0 0 12px rgba(0, 0, 255, 0.35);
    transform: scale(1.03);
}
 /* ----------------------- BOTÓN PREMIUM (unificado) ----------------------- */
.auth-btn {
background: linear-gradient(135deg, #000066, #0033aa);
color: white;
padding: 16px;
border: none;
border-radius: 13px;
cursor: pointer;
font-weight: 600;
font-size: 17px;
transition: .25s;
box-shadow: 0 6px 18px rgba(0,0,80,0.25);
margin-top: 10px;
}
 .auth-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 26px rgba(0,0,80,0.35);
}
 .auth-btn:active {
    animation: pulseClick .25s ease;
}
@keyframes pulseClick {
0% {
    transform: scale(1);
}
 50% {
    transform: scale(.92);
}
 100% {
    transform: scale(1);
}
}
 /* ----------------------- ERROR ----------------------- */
.auth-error {
color: #cc0033;
font-size: 14px;
min-height: 18px;
}
 /* ---------------- ICONO MOSTRAR/OCULTAR ---------------- */
.auth-password-group {
position: relative;
}
 .toggle-pass {
font-size: 20px;
cursor: pointer;
color: #555;
transition: .2s;
}
 .toggle-pass:hover {
    color: #000066;
}
 /* ---------------- ANIMACIONES FORM ---------------- */
.form-anim-enter {
opacity: 0;
transform: translateY(15px);
animation: fadeSlideIn .35s ease forwards;
}
@keyframes fadeSlideIn {
from {
    opacity: 0;
    transform: translateY(15px);
}
 to {
    opacity: 1;
    transform: translateY(0);
}
}
 .form-anim-exit {
opacity: 1;
transform: translateY(0);
animation: fadeSlideOut .25s ease forwards;
}
@keyframes fadeSlideOut {
from {
    opacity: 1;
    transform: translateY(0);
}
 to {
    opacity: 0;
    transform: translateY(-10px);
}
}
 /* ---------------- SLIDE HORIZONTAL ---------------- */
.form-slide-enter {
animation: slideIn .35s ease forwards;
}
 .form-slide-exit {
animation: slideOut .35s ease forwards;
}
 @keyframes slideIn {
from {
    opacity: 0;
    transform: translateX(40px);
}
 to {
    opacity: 1;
    transform: translateX(0);
}
}
@keyframes slideOut {
from {
    opacity: 1;
    transform: translateX(0);
}
 to {
    opacity: 0;
    transform: translateX(-40px);
}
}
 /* =========================================================
   SUGERENCIAS (PRO)
   - modal en 3 zonas (header / body scroll / footer)
   - grid responsive
   - evita que "se pierda" arriba/abajo
   - scroll estable aunque abras DevTools
   ========================================================= */
 /* Contenedor específico del modal sugerencias */
.modal-auth-contenido.modal-sug-contenido {
width: 980px;
max-width: 95vw;
/* IMPORTANTÍSIMO: el padding lo manejan las secciones */
padding: 0;
border-radius: 24px;
background: rgba(255,255,255,.94);
border: 1px solid rgba(255,255,255,.55);
box-shadow: 0 22px 60px rgba(0,0,50,.28);
backdrop-filter: blur(10px);
display: grid;
grid-template-rows: auto 1fr auto; /* header / body / footer */
max-height: 88vh;
overflow: hidden;
animation: sug-pop .22s ease-out;
}
 @keyframes sug-pop {
from {
    transform: translateY(10px) scale(.985);
    opacity: 0;
}
 to {
    transform: translateY(0) scale(1);
    opacity: 1;
}
}
 /* Botón cerrar estilo pro (sin romper el global) */
.modal-auth-contenido.modal-sug-contenido .modal-auth-cerrar {
top: 14px;
right: 16px;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(0,0,0,.05);
}
 .modal-auth-contenido.modal-sug-contenido .modal-auth-cerrar:hover {
    background: rgba(0,0,0,.10);
    transform: scale(1.08);
}
 /* Header fijo dentro del grid (no sticky) */
.modal-auth-contenido.modal-sug-contenido .sug-header {
padding: 26px 26px 14px 26px;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
border-bottom: 1px solid rgba(0,0,0,.06);
position: relative;
z-index: 2;
}
 /* Footer fijo dentro del grid (no sticky) */
.modal-auth-contenido.modal-sug-contenido .sug-footer {
padding: 14px 18px 18px 18px;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
border-top: 1px solid rgba(0,0,0,.06);
position: relative;
z-index: 2;
}
 /* SOLO aquí vive el scroll (CLAVE) */
.modal-auth-contenido.modal-sug-contenido #sugerencias-wrap {
overflow: auto;
min-height: 0; /* CLAVE: permite que el 1fr se reduzca */
padding: 16px 18px 18px 18px;
box-sizing: border-box;
scroll-behavior: smooth;
}
 /* Scrollbar bonita (Chrome/Edge) */
.modal-auth-contenido.modal-sug-contenido #sugerencias-wrap::-webkit-scrollbar {
    width: 10px;
}
 .modal-auth-contenido.modal-sug-contenido #sugerencias-wrap::-webkit-scrollbar-track {
    background: rgba(0,0,0,.04);
    border-radius: 999px;
}
 .modal-auth-contenido.modal-sug-contenido #sugerencias-wrap::-webkit-scrollbar-thumb {
    background: rgba(0,0,102,.25);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.8);
}
     .modal-auth-contenido.modal-sug-contenido #sugerencias-wrap::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,102,.38);
    }
 /* Estados loading/empty deben vivir en el body */
.modal-auth-contenido.modal-sug-contenido #sug-loading,
.modal-auth-contenido.modal-sug-contenido #sug-empty {
margin: 14px 0;
}
 /* Grid responsive de tarjetas */
.modal-auth-contenido.modal-sug-contenido .sug-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
 /* Cards más consistentes (si tu HTML tiene .sug-card) */
.modal-auth-contenido.modal-sug-contenido .sug-card {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0,0,0,.07);
border: 1px solid rgba(0,0,0,.07);
display: flex;
flex-direction: column;
min-height: 170px;
}
 /* Opcional: si tus cards traen estas clases, les da acabado pro */
.modal-auth-contenido.modal-sug-contenido .sug-card-top {
padding: 14px 14px 10px 14px;
}
 .modal-auth-contenido.modal-sug-contenido .sug-actions {
margin-top: auto;
padding: 0 14px 14px 14px;
}
 /* Clamp del título (si existe .sug-name) */
.modal-auth-contenido.modal-sug-contenido .sug-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
 /* Tabs más premium sin “saltos” */
.modal-auth-contenido.modal-sug-contenido .sug-tabs {
border-radius: 18px;
padding: 10px;
}
 .modal-auth-contenido.modal-sug-contenido .sug-tab {
height: 44px;
}
 /* Breakpoints */
@media (max-width: 980px) {
.modal-auth-contenido.modal-sug-contenido {
    width: 94vw;
}
     .modal-auth-contenido.modal-sug-contenido .sug-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
 @media (max-width: 640px) {
.modal-auth-contenido.modal-sug-contenido .sug-header {
    padding: 18px 16px 12px 16px;
}
 .modal-auth-contenido.modal-sug-contenido #sugerencias-wrap {
    padding: 14px 14px 16px 14px;
}
 .modal-auth-contenido.modal-sug-contenido .sug-footer {
    padding: 12px 14px 14px 14px;
}
 .modal-auth-contenido.modal-sug-contenido .sug-grid {
    grid-template-columns: 1fr;
}
}