/* ============================================================
   Ajustes para móvil del sitio público.
   Se carga DESPUÉS de tailwind.css (que es una hoja compilada con
   pocas clases: aquí se escriben a mano los ajustes que faltan).
   ============================================================ */

/* --- Barra superior: nunca debe salirse de la pantalla --- */
#main-nav .nav-brand { min-width: 0; flex: 0 1 auto; }
#main-nav .site-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#main-nav .nav-actions { flex-shrink: 0; }
#nav-user-section { flex-shrink: 0; }

@media (max-width: 520px) {
    /* Con sesión iniciada: botones solo con icono y áreas táctiles de 40 px */
    #nav-user-section { gap: .5rem; }
    #nav-user-section > * { margin-left: 0 !important; }
    #nav-user-section .nav-label,
    #nav-user-section #admin-name { display: none; }
    #nav-user-section a,
    #nav-user-section > span,
    #nav-user-section button {
        min-width: 40px; min-height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: .5rem;
    }
    #nav-user-section a i,
    #nav-user-section > span i { margin-right: 0; }
    #main-nav .nav-actions { margin-left: .5rem; }
    #main-nav .site-nombre { font-size: 1.1rem; }
}

/* En pantallas muy estrechas con sesión iniciada solo queda el logo */
@media (max-width: 350px) {
    #main-nav.nav-logged .site-nombre { display: none; }
}

/* --- Portada: titular más pequeño para que no ocupe 5 líneas ni se salga --- */
@media (max-width: 400px) {
    #hero-container h1 { font-size: 2.5rem; line-height: 1.08; }
    /* La tira "100% Seguro / Instantáneo / Soporte 24/7" ensanchaba el contenido a 320 px:
       ahora puede pasar a una segunda fila en vez de empujar el ancho */
    #hero-container .space-x-8 { flex-wrap: wrap; gap: .5rem 1rem; }
    #hero-container .space-x-8 > * { margin-left: 0 !important; white-space: nowrap; }
}

/* --- Tarjetas y formularios --- */
@media (max-width: 420px) {
    .view-section .p-8,
    .view-section .p-12 { padding: 1.5rem; }
}
@media (max-width: 640px) {
    /* 16 px evita que el navegador del teléfono haga zoom al tocar un campo */
    #view-buscar input, #view-buscar select,
    #view-activacion-tv input, #view-activacion-tv select { font-size: 16px; }
    #view-buscar select, #view-activacion-tv select { text-overflow: ellipsis; }
}

/* Seguridad: que nada provoque desplazamiento horizontal de la página */
body { overflow-x: hidden; }