/* ==========================================================================================
   comun.css — ESTILOS COMPARTIDOS POR TODO EL SITIO
   ==========================================================================================
   Este archivo lo cargan TODAS las páginas. Lo que se cambie aquí cambia en todas de una vez.
   Antes, esto mismo estaba copiado dentro de cada página: cualquier ajuste había que hacerlo
   diez veces, y si se olvidaba una, esa página empezaba a verse distinta a las demás.

   IMPORTANTE — este archivo se carga ANTES del <style> propio de cada página. Eso es a
   propósito: así, si una página necesita algo distinto, lo escribe en su propio <style> y
   manda el suyo, sin tener que pelear con este.
   ========================================================================================== */

/* ==========================================================================================
     PISOS DE LEGIBILIDAD — que ningún texto baje de un tamaño leíble (solo escritorio)
     ==========================================================================================
     ESTE BLOQUE ES IDÉNTICO EN LAS 10 PÁGINAS DEL SITIO. Si algún día hay que ajustar un
     valor, hay que cambiarlo en las 10 — o se desincronizan y cada página empieza a verse
     distinta. Va siempre AL FINAL de la hoja de estilos.

     EL PROBLEMA QUE RESUELVE
     Todo el diseño escala en proporción al ancho de la pantalla (ver "html { font-size:
     clamp(...) }" al principio del archivo). Eso mantiene las proporciones intactas en
     cualquier monitor, pero tiene un efecto secundario grave con el texto: en un portátil de
     1366px el tamaño base baja a 8.5px, así que un texto de 0.8rem terminaba dibujándose a
     6.8px. Varios llegaban a 5px.
     Una tarjeta puede achicarse a la mitad y sigue siendo una tarjeta; una letra a 6px deja de
     ser letra. El ojo humano mide igual frente a cualquier monitor, así que el TEXTO necesita
     un mínimo absoluto que no dependa del tamaño de la pantalla — el resto del diseño no.

     CÓMO SE ESCRIBE
     "max(14px, 1.05rem)" significa "usa el que sea MAYOR de los dos". No son dos reglas
     peleando: es una sola instrucción.
       - En el monitor de diseño (2560px) siempre gana el valor en rem → NADA cambia ahí.
       - En pantallas chicas gana el piso en px → el texto deja de encogerse.
       - En pantallas mayores a 2560px sigue creciendo como siempre, sin tope.

     LOS CUATRO NIVELES (criterio de las plataformas de streaming grandes)
     Un texto que hay que LEER necesita más piso que una etiqueta que solo hay que RECONOCER.
       14px → texto corrido: descripciones, sinopsis, comentarios.
       13px → metadata y botones: duración, categoría, precios, menús, campos de formulario.
       12px → secundarios: fechas, notas al pie, contadores.
       11px → etiquetas en mayúscula (ALQUILER, GRATIS, CAP 01): se reconocen por forma y
              color sin leerse letra por letra, por eso aguantan un piso más bajo.

     LA OTRA MITAD DEL TRABAJO: LAS CAJAS
     Poner piso solo al texto no basta. Si la letra crece dentro de un recipiente que sigue
     encogiéndose, el texto se corta, se parte a media palabra o se monta sobre otro elemento.
     Por eso, a cada botón cuyo texto crece se le pone también un mínimo de relleno, y a los
     elementos con medidas fijas (botón de cuenta, círculos de íconos, ancho del bloque del
     hero) un mínimo de ancho y alto. Esa sección va al final.

     Nada de esto aplica en celular: allí el tamaño base siempre vale 16px (la escala
     proporcional solo existe de 901px para arriba), así que este problema no ocurre.
     Los selectores que no existan en una página concreta simplemente no hacen nada.
     ========================================================================================== */
  @media (min-width: 901px) {

    /* ===== NIVEL 14px — texto corrido, el que de verdad se lee =====
       A varios se les sube además el tamaño de diseño, para que también se lean mejor en el
       monitor grande, no solo en los chicos. */
    .hero-descripcion { font-size: max(14px, 1.05rem); }
    .bloque-recomendado-desc { font-size: max(14px, 1.02rem); }
    .serie-info-descripcion { font-size: max(14px, 1.05rem); }
    .descripcion-pelicula, .descripcion-larga { font-size: max(14px, 0.98rem); }
    .info-pelicula-descripcion { font-size: max(14px, 0.92rem); }
    .caja-bloqueada p { font-size: max(14px, 0.95rem); }
    .post-texto { font-size: max(14px, 0.98rem); }
    .comentario-texto { font-size: max(14px, 0.88rem); }
    .sinopsis-proyecto { font-size: max(14px, 0.98rem); }
    .modal-guion-texto { font-size: max(14px, 0.96rem); }
    .tarjeta-proyecto-descripcion { font-size: max(13px, 0.86rem); }
    .encabezado-series p, .encabezado-contacto p, .peliculas-encabezado p,
    .cabecera-vitrina-proyectos p { font-size: max(14px, 1rem); }
    .modal-historia .modal-sub, .modal-sub { font-size: max(13px, 0.9rem); }

    /* ===== NIVEL 13px — metadata: duración, categoría, precios, estados ===== */
    .hero-duracion { font-size: max(13px, 1rem); }
    .bloque-recomendado-razon { font-size: max(13px, 1.12rem); }
    .serie-info-meta { font-size: max(13px, 0.95rem); }
    .serie-capitulo-titulo { font-size: max(13px, 0.95rem); }
    .info-pelicula-metadata { font-size: max(13px, 0.86rem); }
    .pelicula-capitulo-titulo { font-size: max(13px, 0.88rem); }
    .tarjeta-serie-titulo { font-size: max(13px, 1rem); }
    .tarjeta-rel-titulo { font-size: max(13px, 0.86rem); }
    .tarjeta-proyecto-titulo, .tarjeta-vitrina-proyecto-titulo { font-size: max(13px, 1rem); }
    .recaudo-texto-proyecto { font-size: max(13px, 0.95rem); }
    .meta-proyecto { font-size: max(13px, 0.9rem); }
    .ficha-item-valor { font-size: max(13px, 0.95rem); }
    .comentario-nombre, .post-autor-nombre { font-size: max(13px, 0.85rem); }
    .fila-compra-titulo, .fila-historial-titulo { font-size: max(13px, 0.95rem); }
    .encabezado-perfil p, .tarjeta .subtexto, .detalle-plan { font-size: max(13px, 0.9rem); }
    .estado-vacio, .seccion-vacia, .buscador-resultado-vacio { font-size: max(13px, 0.9rem); }
    .opcion-precio h3 { font-size: max(13px, 1rem); }
    .opcion-precio p.desc, .estado-precio-texto { font-size: max(12px, 0.86rem); }
    .precio-grande span { font-size: max(13px, 0.88rem); }
    .modal-donar-resumen, .modal-donar-estado, .modal-donar-label { font-size: max(13px, 0.88rem); }
    .modal-donar-input, .modal-historia .modal-mensaje, .modal-mensaje { font-size: max(13px, 1rem); }
    .modal-historia label, .campo-contacto label, .campo-check label,
    .modal-historia .campo-check label { font-size: max(12px, 0.85rem); }
    .modal-historia input[type="text"], .modal-historia input[type="email"],
    .modal-historia textarea, .modal-historia select,
    .campo-contacto input, .campo-contacto textarea,
    .post-respuesta-interior textarea, .modal-hilo-pie textarea { font-size: max(13px, 0.92rem); }
    .serie-info-categoria, .serie-info-meta-temporada { font-size: max(12px, 0.92rem); }
    .tarjeta-serie-sub, .tarjeta-contacto-sub, .panel-proyectos-sub { font-size: max(12px, 0.86rem); }

    /* ===== NIVEL 12px — secundarios: fechas, notas al pie, contadores ===== */
    .hero-categoria { font-size: max(12px, 0.9rem); }
    .bloque-recomendado-overline { font-size: max(12px, 1rem); }
    .bloque-recomendado-meta { font-size: max(12px, 0.92rem); }
    .tarjeta .tarjeta-overlay-meta { font-size: max(12px, 1rem); }
    .serie-capitulo-duracion, .pelicula-capitulo-duracion { font-size: max(12px, 0.82rem); }
    .hero-mini-nombre { font-size: max(12px, 0.86rem); }
    .post-fecha, .comentario-fecha, .fila-historial-fecha, .fila-compra-fecha,
    .post-comentarios-contador, .post-like-contador { font-size: max(12px, 0.82rem); }
    .post-comentar-btn, .post-vermas, .post-tooltip, .post-respuesta-nota { font-size: max(12px, 0.82rem); }
    .comentario-audio-tiempo { font-size: max(11px, 0.78rem); }
    .nota-contacto, .linea-o, .subcopy-inversion { font-size: max(12px, 0.85rem); }
    .modal-donar-error, .modal-donar-editar, .modal-donar-nota-telefono,
    .modal-donar-separador { font-size: max(12px, 0.8rem); }
    .tarjeta-proyecto-meta, .tarjeta-vitrina-proyecto-meta { font-size: max(12px, 0.82rem); }
    .ficha-item-label, .paleta-color-codigo { font-size: max(11px, 0.74rem); }
    .avatar-subtexto, .avatar-opcion-nombre, .avatar-estado-guardado { font-size: max(12px, 0.85rem); }
    .buscador-resultado-titulo { font-size: max(13px, 0.85rem); }
    .serie-ver-todas, .serie-lista-flecha { font-size: max(12px, 0.85rem); }

    /* ===== NIVEL 11px — etiquetas en mayúscula ===== */
    .tarjeta-badge { font-size: max(11px, 0.65rem); padding: max(3px, 3px) max(6px, 0.5rem); }
    .tarjeta-overlay-genero-pill { font-size: max(11px, 0.68rem); padding: max(4px, 0.25rem) max(8px, 0.625rem); }
    .serie-etiqueta, .blog-etiqueta, .etiqueta-sembrando, .panel-proyectos-etiqueta,
    .modal-historia .modal-etiqueta, .modal-etiqueta, .modal-donar-etiqueta,
    .encabezado-series .etiqueta, .encabezado-contacto .etiqueta { font-size: max(11px, 0.74rem); }
    .badge, .tag-genero, .etiqueta-destacada, .etiqueta-plan, .etiqueta-estado-historial,
    .tarjeta-serie-etiqueta, .post-categoria, .tarjeta-proyecto-porcentaje,
    .serie-temporada-pill { font-size: max(11px, 0.72rem); }
    .serie-capitulo-badge, .serie-capitulo-candado,
    .pelicula-capitulo-badge, .pelicula-capitulo-candado { font-size: max(10px, 0.64rem); }
    .serie-capitulo-candado--bloqueado, .pelicula-capitulo-candado--bloqueado { font-size: max(11px, 0.8rem); }
    .mini-badge, .mini-acceso-badge { font-size: max(10px, 0.62rem); }
    .mini-acceso-titulo { font-size: max(11px, 0.8rem); }
    .avatar-editar-badge { font-size: max(10px, 0.7rem); }

    /* ===== BOTONES — texto legible Y caja que lo contenga sin recortarlo =====
       A cada botón se le da piso de letra y piso de relleno. Sin el segundo, la letra crecería
       dentro de una caja que sigue encogiéndose y quedaría apretada contra el borde. */
    .btn-hero {
      font-size: max(13px, 0.9rem); padding: max(10px, 0.75rem) max(15px, 1.625rem);
      white-space: nowrap;
    }
    .tarjeta-overlay-btn {
      font-size: max(12px, 0.86rem); padding: max(8px, 0.6875rem) max(8px, 0.625rem);
      flex: 1 1 auto; min-width: 118px;
    }
    .pildora-genero { font-size: max(14px, 1.05rem); padding: max(9px, 0.68rem) max(16px, 1.5rem); }
    nav.menu-escritorio a, .menu-item-desplegable > button {
      font-size: max(14px, 1.12rem); padding: max(9px, 0.65rem) max(12px, 1.4rem);
    }
    .menu-desplegable-panel a { font-size: max(13px, 1.02rem); padding: max(9px, 0.72rem) max(11px, 1rem); }
    .btn-suscribirse { font-size: max(14px, 1.02rem); padding: max(9px, 0.68rem) max(14px, 1.4rem); }
    .btn-cuenta { font-size: max(14px, 1rem); min-width: 132px; min-height: 42px; }
    .btn-cuenta .avatar-mini { min-width: 28px; min-height: 28px; }
    .buscador-caja input { font-size: max(13px, 0.88rem); }
    .btn-cuenta-historia, .btn-sembrar-historia { font-size: max(13px, 0.88rem); }
    .btn-desbloquear, .btn-accion, .btn-elegir, .btn-invertir, .btn-donar-grande,
    .btn-donar-proyecto, .btn-mas-info-proyecto, .btn-leer-guion, .btn-enviar-contacto,
    .btn-enviar-historia, .btn-reactivar, .btn-ver-mas-historial, .btn-volver,
    .btn-subir-foto, .modal-historia .btn-subir-foto, .avatar-tab-btn,
    .modal-donar-continuar, .modal-donar-boton-bold, .post-respuesta-enviar,
    .barra-volver-proyecto a, .blog-pestana {
      font-size: max(13px, 0.92rem); padding: max(9px, 0.7rem) max(13px, 1.1rem);
    }
    .modal-donar-boton-bold span { font-size: max(12px, 0.8rem); }
    .foto-check, .modal-historia .foto-check, .post-adjunto-check { font-size: max(12px, 0.85rem); }
    /* Las X de cerrar: por debajo de cierto tamaño dejan de ser un blanco cómodo. */
    .modal-cerrar, .modal-hilo-cerrar, .modal-donar-cerrar, .modal-historia .modal-cerrar,
    .panel-proyectos-cerrar, .info-pelicula-cerrar, .btn-cerrar-serie {
      font-size: max(14px, 1rem); min-width: 32px; min-height: 32px;
    }
    /* Los círculos del encabezado (buscar, mensajes). */
    .icono-btn { min-width: 42px; min-height: 42px; }
    .icono-btn svg { width: max(17px, 1.35rem); height: max(17px, 1.35rem); }
    .buscador-caja { right: 3.25rem; }

    /* ===== CAJAS CON MEDIDAS FIJAS QUE TAMBIÉN SE ENCOGÍAN ===== */

    /* El bloque de texto del hero tenía un ancho máximo en rem, así que en un portátil quedaba
       en ~425px: los tres botones más el corazón ya no cabían y cada uno partía su propia
       palabra ("Ver / ahora"). Con ancho mínimo propio, y prohibido partir palabras, ya no
       ocurre. Si aun así no cupieran, baja un botón entero a la línea siguiente. */
    .hero-info { max-width: max(600px, 42.5rem); }
    .hero-botones { flex-wrap: wrap; row-gap: max(9px, 0.75rem); }
    /* El corazón se quedaba diminuto al lado de los otros tres: su tamaño estaba en rem y
       seguía encogiéndose mientras los botones vecinos ya no. */
    .btn-hero-favorito { min-width: 42px; min-height: 42px; }

    /* "Desbloquear" salía cortada ("Desbloquea") porque estos dos botones estaban puestos para
       ENCOGERSE y recortaban con puntos suspensivos. Con ancho mínimo real, cuando ya no caben
       lado a lado el segundo baja completo: apilarse sí, cortarse no. */
    .tarjeta-overlay-botones { flex-wrap: wrap; }

    /* Los nombres de las miniaturas salían cortados ("¿Dónde termina el d...") por estar
       forzados a UNA línea. Con dos líneas caben completos, sin achicar la letra ni quitar el
       nombre. El degradado oscuro de abajo crece con el texto. */
    .hero-mini-nombre {
      white-space: normal;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      padding-top: max(20px, 1.375rem);
    }
    /* En pantallas de 1280px o menos el nombre se retira: la miniatura es pequeña y el texto
       encima tapaba la foto sin aportar (al pasar por encima, el banner grande ya muestra el
       título completo con su duración y descripción).
       Va AQUÍ y no en catalogo.html a propósito: este archivo se carga DESPUÉS del <style> de
       cada página, así que la regla de arriba le ganaba a cualquier "display: none" escrito
       allá. Cuando dos reglas pesan igual, manda la que se lee de última — y esa es esta. */
    @media (max-width: 1280px) {
      .hero-mini-nombre { display: none; }
    }

    /* Página de Películas — las tarjetas del bloque editorial (3 por fila sobre la foto de
       fondo). Su ancho y el de su contenedor estaban en rem, así que en pantallas chicas la
       tarjeta se volvía más angosta que su propio contenido. */
    .bloque-editorial-filas { max-width: max(640px, 50rem); }
    .bloque-editorial-fila { flex-wrap: wrap; }
    .bloque-editorial-fila .tarjeta { min-width: 190px; }
    .bloque-editorial-fila .tarjeta .tarjeta-overlay-titulo { font-size: max(15px, 1.2rem); }
    .bloque-editorial-fila .tarjeta .tarjeta-overlay-meta { font-size: max(12px, 0.76rem); }
    .bloque-editorial-fila .tarjeta .tarjeta-overlay-genero-pill { font-size: max(11px, 0.62rem); }
    .bloque-editorial-fila .tarjeta .tarjeta-overlay-btn {
      font-size: max(12px, 0.72rem); min-width: 88px;
    }

    /* ===== TOP 10 (solo Inicio) =====
       Sus reglas propias están escritas con DOS nombres encadenados, y en CSS gana siempre la
       más específica sin importar cuál esté más abajo — por eso los pisos generales no le
       llegaban solos y hay que repetir aquí esa misma forma encadenada. Como estas tarjetas
       son anchas y sobra espacio, además del piso se les sube el tamaño de diseño. */
    .tarjeta-top10-numero-grande { font-size: max(19px, 1.6rem); }
    .tarjeta-top10-overlay-titulo { font-size: max(17px, 1.62rem); }
    .tarjeta-top10-overlay-meta { font-size: max(14px, 1.05rem); }
    .tarjeta-top10-overlay-info .tarjeta-overlay-genero-pill {
      font-size: max(12px, 0.85rem); padding: max(5px, 0.3125rem) max(10px, 0.75rem);
    }
    .tarjeta-top10-overlay-info .tarjeta-overlay-btn {
      font-size: max(14px, 1.05rem); padding: max(11px, 0.8125rem) max(12px, 0.875rem);
      min-width: 130px;
    }
    /* La etiqueta "Top 4" se montaba encima de "ALQUILER": no era un problema de tamaño sino
       de POSICIÓN. Se coloca a una distancia fija del borde superior, calculada para caer
       debajo de la otra etiqueta — pero esa distancia también se encogía, mientras la de
       arriba ya tenía piso y dejó de encoger. Ahora las dos posiciones tienen su mínimo. */
    .tarjeta-badge { top: max(6px, 0.5rem); left: max(6px, 0.5rem); }
    .tarjeta-top10-numero-fijo {
      top: max(31px, 2.125rem); left: max(6px, 0.5rem);
      font-size: max(11px, 0.65rem); padding: max(3px, 3px) max(6px, 0.5rem);
    }

    /* ===== Títulos =====
       Ya son grandes, así que estos pisos casi nunca entran en acción; están por si acaso. El
       título de la tarjeta recorta solo a dos renglones, así que crecer nunca lo desborda. */
    .hero-titulo { font-size: max(26px, 3rem); }
    .tarjeta .tarjeta-overlay-titulo { font-size: max(15px, 1.52rem); }
    .titulo-pelicula, .titulo-proyecto, .serie-info-titulo { font-size: max(24px, 2.2rem); }
    .info-pelicula-titulo { font-size: max(15px, 1.05rem); }
  }


/* ==========================================================================================
   NAVEGACIÓN DE CELULAR — compartida por todo el sitio
   ==========================================================================================
   Antes esto vivía copiado dentro de cada página. Fue la parte que más se desincronizó: en una
   sola sesión se olvidó esconder el panel de Géneros en SIETE archivos, y el círculo de "Ayuda"
   salió ovalado por el mismo motivo. Aquí se escribe una vez y vale para todas.
   ========================================================================================== */
/* ==========================================================================================
     BARRA SUPERIOR Y BARRA INFERIOR EN CELULAR — igual que en Inicio y Películas
     ==========================================================================================
     El logo pasa de texto a imagen, las pastillas de navegación se deslizan en el centro del
     propio encabezado (entre el logo y el botón de mensajes), y aparece la barra fija de abajo
     con Inicio/Ayuda/Buscar/Mi cuenta/Planes, marcando en rojo la página actual.
     ========================================================================================== */
  @media (max-width: 900px) {
    nav.menu-escritorio { display: none; }
    .icono-btn--escritorio { display: none; }
    .btn-suscribirse { display: none; }

    header.barra {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 0.75rem !important;
      padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    }
    header.barra .marca-logo {
      font-size: 0 !important; width: 2.375rem; height: 2.375rem; flex: 0 0 2.375rem;
      background-image: url('logo-gospel-cinema.png');
      background-size: contain; background-position: center; background-repeat: no-repeat;
    }
    header.barra .btn-cuenta { display: none !important; }
    header.barra .barra-iconos {
      margin-left: 0 !important; margin-right: 0 !important;
      flex: 0 0 auto; order: 3;
    }

    .pastillas {
      display: flex !important; position: static !important; top: auto !important;
      flex: 1 1 auto; min-width: 0; order: 2;
      padding: 0 !important; gap: 0.375rem !important;
      overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    .pastillas::-webkit-scrollbar { display: none; }
    .pastilla {
      flex: 0 0 auto; padding: 0.5rem 0.8125rem !important; border-radius: 1rem;
      font-size: 0.76rem !important; font-weight: 600;
      background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--circle-border);
    }
    .pastilla.activa { background: rgba(239,68,68,0.65); color: #fff; border-color: transparent; }
    button.pastilla { font: inherit; cursor: pointer; }

    header.barra .icono-btn--blog { width: 2.375rem; height: 2.375rem; }
    header.barra .icono-btn--blog svg { width: 1.0625rem; height: 1.0625rem; }

    .pastilla-desplegable-panel {
      position: fixed; z-index: 250; left: 1rem; right: 1rem; top: 3.75rem;
      background: rgba(15,10,7,0.98); backdrop-filter: blur(0.875rem);
      border: 1px solid var(--circle-border); border-radius: 0.875rem;
      padding: 0.5rem; display: none; flex-direction: column; gap: 2px;
      box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.5);
    }
    .pastilla-desplegable-panel.abierto { display: flex; }
    .pastilla-desplegable-panel a { padding: 0.6875rem 0.875rem; border-radius: 0.5625rem; font-size: 0.86rem; font-weight: 600; }
    .pastilla-desplegable-panel a:active { background: rgba(245,158,11,0.16); }

    /* El buscador se despliega como una barra fija ancha en vez de expandirse en el hueco
       angosto del encabezado — se abre desde el botón "Buscar" de la barra de abajo. */
    .buscador-caja { position: fixed; left: 1rem; right: 1rem; top: 4.125rem; transform: none; }
    .buscador-contenedor.abierto .buscador-caja { width: auto; }
    .buscador-resultados { position: absolute; left: 0; right: 0; }

    body { padding-bottom: 4.75rem; }
    .barra-movil {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
      background: rgba(12,7,5,0.95); backdrop-filter: blur(1rem);
      border-top: 1px solid var(--circle-border);
      padding: 0.625rem 0.375rem calc(0.625rem + env(safe-area-inset-bottom));
      justify-content: space-around;
    }
    .barra-movil-item {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      font-size: 0.6rem; color: var(--text-muted); font-weight: 600;
      flex: 1; min-width: 0; text-decoration: none;
    }
    .barra-movil-item.activo { color: #ef4444; }
    .barra-movil-item.activo svg { stroke-width: 2.4; }
    .barra-movil-item--destacado svg {
      background: var(--accent-gradient); border-radius: 50%; padding: 0.375rem;
      width: 1.75rem !important; height: 1.75rem !important; color: #fff; margin-bottom: 1px;
      display: block; box-sizing: border-box;
    }
    .barra-movil-item--destacado { color: var(--accent-primary); }
    .barra-movil-item svg {
      width: 1.375rem; height: 1.375rem;
      box-sizing: content-box; padding: 0.1875rem 0; margin-bottom: 1px;
    }
    /* Excepción: el círculo de "Ayuda". La regla de arriba le añade relleno ARRIBA Y ABAJO
       encima del que ya tiene por su cuenta para formar el círculo. Al sumarse, el elemento
       queda más alto que ancho y el círculo se deforma en óvalo. Aquí se le devuelve su
       relleno parejo por los cuatro lados, que es lo que lo mantiene redondo. Va DESPUÉS
       a propósito: las dos reglas pesan igual en CSS, así que gana la que esté más abajo. */
    .barra-movil-item--destacado svg {
      padding: 0.375rem !important; box-sizing: border-box !important;
      width: 1.75rem !important; height: 1.75rem !important; margin-bottom: 1px !important;
    }
    .barra-movil-avatar {
      width: 1.75rem; height: 1.75rem; border-radius: 50%; overflow: hidden;
      display: block; box-sizing: border-box; margin-bottom: 1px; flex: 0 0 auto;
      border: 1.5px solid var(--accent-primary);
    }
    .barra-movil-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .barra-movil-avatar svg { width: 100% !important; height: 100% !important; padding: 0.25rem !important; margin: 0 !important; box-sizing: border-box; }
  }