/* ==========================================================================
   Ajustes móviles comunes a las páginas públicas (se carga desde detalles/navbar, después del CSS de cada página).
   Solo actúa en pantallas de hasta 768 px: en escritorio no cambia nada.
   ========================================================================== */
@media (max-width: 768px) {

    /* ---------- Texto: sin justificado ni guiones (los mismos bloques que css/texto_rico.css justifica en escritorio) ---------- */
    .info-text,
    .rt, .rt p, .rt li, .rt blockquote,
    .fund-desc, .link-desc, .multimedia-card-desc, .desc-extracto, .divulgacion-card-desc, .project-desc,
    .voces-text, .lab-description-text, .blog-prose p, .home-about p, .newspaper-body-content p,
    .team-project, .comunidad-modal-container p {
        text-align: left;
        text-justify: auto;
        -webkit-hyphens: none;
        hyphens: none;
    }
    /* un párrafo que el administrador justificó a mano también se muestra alineado a la izquierda en el teléfono (centrado y derecha se respetan) */
    .rt [style*="text-align: justify"],
    .rt [style*="text-align:justify"] { text-align: left !important; }
    :where(p, li, h1, h2, h3, h4, figcaption, blockquote, dd, td, th, a, label, span) { overflow-wrap: anywhere; }

    /* ---------- Medios responsivos ---------- */
    img, video, canvas { max-width: 100%; }
    iframe { max-width: 100%; }
    .rt img, .rt video, .rt iframe { height: auto; }
    .rt table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ---------- Buscadores y campos: ancho completo, 16 px (iOS no hace zoom) y 44 px de alto ---------- */
    body .search-input,
    body .search-input-header,
    body input[type="search"].search-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    body select,
    body textarea {
        font-size: 16px !important;   /* !important: gana a los tamaños de cada página (iOS hace zoom con menos de 16 px) */
    }
    body input[type="text"],
    body input[type="search"],
    body input[type="email"],
    body input[type="tel"],
    body input[type="url"],
    body input[type="password"],
    body input[type="number"],
    body select {
        min-height: 44px;
    }

    /* ---------- Botones y enlaces-botón táctiles (44 px) ---------- */
    .btn-ver-mas,
    .btn-ver-completo-custom,
    .btn-action,
    .btn-view-newspaper,
    .btn-how-to-get,
    .btn-publicar-nota,
    .nota-card__btn,
    .category-filter-pill,
    .sm-chip {
        min-height: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .leer-mas { display: inline-flex; align-items: center; min-height: 44px; }

    /* Ficha de especie (Voces): la columna única no debe crecer por el ancho natural de las fotos y videos */
    .vce-cuerpo, .vce-cuerpo--solo-texto { grid-template-columns: minmax(0, 1fr); }
    .vce-cuerpo > *, .vce-media > *, .vce-figura { min-width: 0; }
    .vce-figura img, .vce-figura video { width: 100%; height: auto; }

    /* Encabezado de Notas: el buscador ocupa todo el ancho */
    .header-notas-wrapper { align-items: stretch; }
    .header-notas-wrapper > div { width: 100%; box-sizing: border-box; }

    /* Chat de transmisiones: los mensajes con direcciones largas se parten dentro de la burbuja */
    .chat-messages, .chat-messages * { overflow-wrap: anywhere; word-break: break-word; }

    /* Hijos de rejillas de una columna: pueden encogerse (si no, una URL larga ensancha toda la página) */
    .sala-container > *,
    .notas-grid > *,
    .divulgacion-grid > *,
    .team-grid > * { min-width: 0; }
}