/* frontend/css/style.css (REEMPLAZAR SECCIÓN PREELS ANTERIOR) */

/* ================================================ */
/* === ESTILOS PREELS - UI BÚSQUEDA TIPO INSTAGRAM === */
/* ================================================ */

#preels-screen {
    position: relative; /* Necesario para posicionar lista resultados */
    overflow: hidden; /* Evitar scroll principal cuando resultados están visibles */
}

/* Header Preels (Sticky en la parte superior) */
#preels-screen .screen-header.preels-header {
    display: flex; align-items: center;
    padding: var(--space-2) var(--space-4); /* Padding ajustado */
    padding-top: calc(var(--space-2) + env(safe-area-inset-top));
    padding-bottom: var(--space-2);
        border-bottom: var(--border-width) solid #dee2e600;
    background-color: var(--color-bg-surface); /* Fondo sólido */
    position: sticky; /* Hacer sticky */
    top: 0;
    left: 0;
    right: 0;
    z-index: 55; /* Encima del contenido */
    height: auto; min-height: 56px;
    gap: var(--space-2);
}

/* Botón Atrás (Cancelar Búsqueda) */
.preels-search-back {
    background: none; border: none; color: var(--color-text-primary); /* Más visible */
    font-size: 1.2rem; cursor: pointer; padding: var(--space-2);
    width: 36px; height: 36px; border-radius: 50%;
    display: none; /* Oculto por defecto */
    align-items: center; justify-content: center; flex-shrink: 0;
    transition: background-color 0.1s ease;
}
.preels-search-back:hover { background-color: var(--color-bg-element); }

/* Contenedor Búsqueda en Header */
.preels-header .preels-search-container {
    flex-grow: 1; position: relative; margin: 0;
}
.preels-header .input-group {
    background-color: var(--color-bg-element);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    display: flex; align-items: center;
    transition: background-color 0.2s, border-color 0.2s;
}
.preels-header .input-group:focus-within {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-interactive);
}
.preels-header .input-group label { padding-left: var(--space-3); padding-right: var(--space-2); color: var(--color-text-tertiary); }
.preels-header input[type="search"] { flex-grow: 1; border: none; background: none; outline: none; padding: var(--space-2) 0; padding-right: 30px; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.preels-header input[type="search"]::placeholder { color: var(--color-text-tertiary); }
.preels-header input[type="search"]::-webkit-search-cancel-button{ display: none; }
.preels-header .clear-search-btn { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: var(--color-border-interactive); border: none; border-radius: 50%; color: var(--color-bg-surface); font-size: 0.7rem; font-weight: bold; cursor: pointer; display: none; align-items: center; justify-content: center; line-height: 1; transition: background-color 0.15s ease; }
.preels-header .clear-search-btn:hover { background-color: var(--color-text-tertiary); }

/* --- Lista Resultados Usuarios (Overlay Absoluto) --- */
.preels-results {
    position: absolute;
    /* Posicionar justo debajo del header */
    top: calc(56px + env(safe-area-inset-top)); /* Ajustar si min-height es diferente */
    left: 0;
    right: 0;
    bottom: 0; /* Ocupar hasta abajo */
    background-color: var(--color-bg-base); /* Fondo opaco para cubrir galería */
    z-index: 59; /* Encima del main, debajo del header sticky */
    max-height: none; /* Quitar max-height anterior */
    height: auto; /* Permitir que ocupe el espacio */
    overflow-y: auto; /* Scroll interno */
    display: none; /* Oculta por defecto */
    padding-bottom: var(--bottom-nav-height); /* Espacio para no solapar con nav */
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
}
.preels-results.visible { display: block; }
.preels-results::-webkit-scrollbar { width: 5px; }
.preels-results::-webkit-scrollbar-thumb { background-color: var(--color-border-interactive); border-radius: 3px; }
/* Estilos items (sin cambios) */
.preels-results li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); /* Más padding horizontal */ cursor: pointer; border-bottom: 1px solid var(--color-border-divider); transition: background-color 0.1s ease; }
.preels-results li:last-child { border-bottom: none; }
.preels-results li:hover { background-color: var(--color-bg-surface-hover); }
.preels-results li img.avatar-xs { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;} /* Avatar más grande */
.preels-results li .user-info { overflow: hidden; }
.preels-results li strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--font-weight-medium); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.preels-results li small { display: block; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.preels-results .no-results, .preels-results .loading-results { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-tertiary); font-style: italic; cursor: default; }
.preels-results .loading-results i { margin-right: var(--space-2); }

/* --- Estado de Búsqueda Activa --- */
.preels-header.search-active .preels-search-back {
    display: flex !important; /* Mostrar botón atrás */
}
/* Cuando la búsqueda está activa, ocultamos el scroll del main */
 #preels-screen.search-results-visible main#preels-content {
    overflow-y: hidden;
 }


/* Contenido Principal Preels */
#preels-content.preels-main-content {
     padding-top: 0; /* Sin padding superior, header es sticky */
     height: 100%; /* Asegurar que ocupe espacio para scroll */
     overflow-y: auto; /* Scroll por defecto */
}
#preels-gallery {
    /* La galería sigue siendo grid */
    padding-bottom: var(--space-4); /* Espacio al final */
}

/* --- FIN ESTILOS PREELS TIPO INSTAGRAM --- */



/* frontend/css/style.css o components.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS PANTALLA REACTIVACIÓN === */
/* ================================================ */

#reactivation-screen .screen-header {
    /* Estilos header estándar */
}

#reactivation-screen .scrollable-content {
    /* Asegurar padding */
    padding: var(--space-6);
    display: flex; /* Para centrar el form verticalmente */
    justify-content: center;
}

#reactivation-form {
    width: 100%;
    max-width: 400px; /* Limitar ancho */
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.reactivation-step {
    display: none; /* Ocultos por defecto */
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}
.reactivation-step.active {
    display: flex; /* Mostrar paso activo */
}

/* Reutilizar estilos .step-subtitle-main, .code-input-container, .code-input, etc. de registro/login */
/* Si usas los mismos IDs/clases, no necesitas duplicar mucho CSS */

/* Botones */
.reactivation-step-btn, .reactivate-final-submit-btn {
    /* Estilos .btn .btn-primary */
    width: 100%;
}
.reactivate-resend-otp-btn, .reactivate-step-back-btn {
    /* Estilos .btn-link */
    display: block;
    margin: var(--space-sm) auto;
}

/* Paso Éxito */
#reactivation-step-4 {
    /* Reutilizar .success-step */
    align-items: center;
    text-align: center;
}
#reactivation-step-4 .success-checkmark {
    /* Estilos .success-checkmark */
}
#reactivation-step-4 .step-title {
    text-align: center;
}
#reactivation-step-4 .step-subtitle {
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* Mensaje de error específico del paso */
#reactivation-steps-container .step-error-message {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    text-align: left; /* O center si prefieres */
    margin-top: calc(-1 * var(--space-sm) + 4px); /* Ajustar */
    margin-bottom: var(--space-sm);
    min-height: 1.2em;
    display: none; /* Oculto por defecto */
}

/* Input error highlight (reutilizar) */
#reactivation-form input.input-error {
     border-color: var(--color-error) !important;
     box-shadow: 0 0 0 1px var(--color-error);
}