/* CABECERA MÓVIL, una sola para toda la app (ver templates/includes/
   mobile_topbar.html). Fichero propio: NO toca Bootstrap ni style-v2, y solo se
   carga en las páginas que la pintan.

   Las medidas, los colores y la curva salen de la MAQUETA HTML de la portada
   que hizo ChatGPT (chat "Rediseño HOME móvil PBC", 13/08/2026). Estaban dentro
   de static/css/mobile-home.css: se mudan aquí tal cual, sin cambiar un valor,
   porque el 13/08 Guille pidió la MISMA cabecera también en el perfil y dos
   copias acaban siendo dos cabeceras distintas.

   En escritorio no existe: estas pantallas son solo de móvil. */

.pbc-mtop { display: none; }

@media (max-width: 767.98px) {
  .pbc-mtop {
    --mtop-blue: #086BC9;
    --mtop-bg: #F4F8FC;
    --mtop-ink: #15263B;

    position: relative;
    display: block;
    /* 162px, no los 142px de la maqueta: con la curva metida 30px por debajo,
       el óvalo blanco subía hasta los 120px y cortaba por detrás las píldoras
       de la racha y los puntos (foto de Guille, 13/08/2026). Con 162 las
       píldoras acaban en 129 y la curva no empieza hasta 140. */
    height: calc(162px + env(safe-area-inset-top));
    padding: calc(22px + env(safe-area-inset-top)) 22px 30px;
    overflow: hidden;
    color: #fff;
    background: var(--mtop-blue);
  }
  /* Sin las píldoras de racha y puntos (la portada, Guille 14/08/2026) los 162px
     dejarían un azul vacío enorme: la cabecera se ajusta a lo que hay. La curva
     de abajo sigue igual, va pegada al borde inferior. */
  .pbc-mtop--sin-pildoras {
    height: auto;
    padding-bottom: 26px;
  }
  /* Con TÍTULO de pantalla (clases, planes, chat) la cabecera crece con lo que
     lleva dentro: la altura clavada de 162px es solo para la portada. */
  .pbc-mtop--con-titulo {
    height: auto;
    padding-bottom: 46px;
  }
  /* SOLO LA MARCA y sin título (el calendario de clases): barra fina, nada del
     azul vacío de 162px que quedaba debajo del logo (Guille, 18/08/2026: "el top
     está feo"). Con título (clases hub, chat) manda la regla de arriba. */
  .pbc-mtop--solo-marca:not(.pbc-mtop--con-titulo) {
    height: auto;
    padding: calc(12px + env(safe-area-inset-top)) 22px 24px;
  }
  .pbc-mtop svg { display: block; flex: 0 0 auto; }

  /* La curva de abajo: el mismo óvalo del color del fondo que hay en la maqueta. */
  .pbc-mtop::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -7%;
    left: -7%;
    bottom: -30px;
    height: 52px;
    border-radius: 50% 50% 0 0;
    background: var(--mtop-bg);
  }
  .pbc-mtop-bar,
  .pbc-mtop-pills,
  .pbc-mtop-heading { position: relative; z-index: 1; }

  /* Título de la pantalla, dentro del azul. Medidas de la maqueta de CLASES
     (aprobada por Guille el 14/08/2026), reutilizadas para todas. */
  .pbc-mtop-heading { margin-top: 18px; }
  .pbc-mtop-heading h1 {
    margin: 0;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -1.2px;
  }
  .pbc-mtop-heading p {
    margin: 8px 0 0;
    color: #DCECFF;
    font-size: 16px;
    font-weight: 700;
  }

  /* Flecha de atrás: mismas medidas que la campana y la ayuda, para que los tres
     botones de la cabecera pesen igual. */
  .pbc-mtop-back {
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin-left: -10px;
    border: 0 !important;
    background: none !important;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 44px;
    text-decoration: none;
  }
  .pbc-mtop-back svg {
    width: 26px !important;
    height: 26px !important;
    display: block;
  }
  /* Con flecha, la marca deja de ser el primer elemento y el reparto lo hace
     ella: así el logo queda pegado a la flecha y los botones a la derecha. */
  .pbc-mtop-back + .pbc-mtop-brand { margin-right: auto; }

  .pbc-mtop-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
  }
  /* La marca es la IMAGEN del logo, del mismo alto (30px) y en el mismo sitio
     que en Intercambios, para que sea la misma marca en todas las pantallas
     (Guille, 18/08/2026). Las clases -name y -sub eran el texto de antes y ya no
     se usan; se dejan escondidas por si alguna pantalla vieja las trae. */
  .pbc-mtop-brand {
    margin: 3px 0 0;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .pbc-mtop-brand img {
    display: block;
    /* !important a propósito: viewport-fix.css trae `img { width:auto !important;
       height:auto !important }` en el móvil y, al empatar en !important, gana el
       selector más concreto. Sin esto el logo salía a su tamaño natural, gigante
       y cortado (foto de Guille en Clases, 18/08/2026). */
    width: auto !important;
    height: 30px !important;
    max-width: none !important;
  }
  .pbc-mtop-brand-name,
  .pbc-mtop-brand-sub { display: none; }
  /* Los botones de la derecha (ayuda y foto) van juntos: ninguno manda sobre el
     otro (feedback de Guille sobre la campanita). */
  .pbc-mtop-actions { display: inline-flex; align-items: center; gap: 10px; }

  /* Campana del centro de avisos: mismo peso visual que la ayuda, ninguna manda
     sobre la otra. Vive aquí porque la cabecera es una sola para toda la app. */
  .pbc-avisos-bell {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
  }
  .pbc-avisos-bell-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Punto ROJO, no amarillo (Guille, 14/08/2026): el amarillo se confundía con
       la píldora de puntos y no se leía como "tienes algo sin leer". */
    width: 11px;
    height: 11px;
    background: #E0353B;
    border: 2px solid #126EF8;
    border-radius: 50%;
  }

  /* La RUEDITA: en el perfil ocupa el sitio de la foto (allí llevaría a donde ya
     estás). Mismas medidas clavadas que la campana y por el mismo motivo: sin
     ellas, el móvil real la pintó del tamaño de media pantalla, tapando la marca
     (foto de Guille, 14/08/2026). */
  .pbc-mtop-gear {
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 44px;
    text-decoration: none;
  }
  .pbc-mtop-gear svg {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    display: block;
  }

  /* Medidas clavadas con !important: las hojas de siempre (mobile-responsive,
     style-v2, Bootstrap) tocan enlaces e imágenes sin mirar la clase y en el
     móvil real la foto salía cuadrada y fuera del marco (foto de Guille,
     13/08/2026). Aquí manda esta hoja y no hay discusión. */
  .pbc-mtop-avatar {
    position: relative;
    display: block !important;
    box-sizing: border-box !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin-top: -5px;
    border: 0 !important;
    background: none !important;
    flex: 0 0 62px;
  }
  .pbc-mtop-avatar-photo {
    position: absolute !important;
    z-index: 1;
    top: 7px !important;
    left: 7px !important;
    box-sizing: border-box !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #E8F1FA;
    object-fit: cover !important;
  }
  .pbc-mtop-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mtop-blue);
  }
  .pbc-mtop-avatar-frame {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    pointer-events: none;
  }

  .pbc-mtop-pills { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .pbc-mtop-pill {
    display: inline-flex;
    min-width: 0;
    height: 43px;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 17px;
    color: var(--mtop-ink);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 11px rgba(0, 45, 103, 0.10);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .pbc-mtop-pill:first-child { min-width: 98px; }
  .pbc-mtop-pill-ico { width: 25px; height: 25px; }
}

/* Pantallas estrechas: los mismos ajustes que trae la maqueta para 374px, pero
   aplicados hasta 409px. La maqueta esta dibujada a 430px de ancho; en un movil
   de 375 la cabecera se quedaba sin sitio y partia las palabras. */
@media (max-width: 409.98px) {
  .pbc-mtop { padding-right: 17px; padding-left: 17px; }
  .pbc-mtop-pills { gap: 7px; }
  .pbc-mtop-pill { gap: 7px; padding: 0 11px; font-size: 13px; }
}

/* ── Pantallas que cambian el menú de la web por la cabecera de la app ──────
   Guille, 14/08/2026, probando el móvil: "en clases sigues teniendo arriba del
   todo el menú y no quiero que haya menú, quiero que esté el mismo top que el
   resto". La página añade `has-pbc-mtop` al <body> y aquí se esconde la barra
   de la web y se quita el hueco que reservaba. SOLO dentro de la media query:
   en el escritorio el menú de siempre no se toca (lección de PR #1510). */
@media (max-width: 767.98px) {
  body.has-pbc-mtop > .navbar { display: none !important; }
  body.page-legacy.has-pbc-mtop { padding-top: 0 !important; }
}