/* CABECERA DE ESCRITORIO para las pantallas que nacieron como pantallas de la
   app (ver templates/includes/desktop_app_header.html).

   Por qué existe (aviso del profe Darío, repetido el 28/08/2026): esas páginas
   no extienden base.html, así que no llevan el menú de la web, y su única
   salida era la flecha de la cabecera móvil... que mobile-topbar.css esconde
   por encima de 767px (`.pbc-mtop { display: none }`). En el ordenador la
   página quedaba sin menú y sin flecha: un callejón sin salida del que solo se
   salía escribiendo la dirección a mano.

   Regla de oro al revés que la cabecera móvil: aquí NO se pinta nada por debajo
   de 768px (allí manda la cabecera azul de siempre) y sí por encima. Fichero
   propio con prefijo pbc-dnav-: no toca Bootstrap, ni style-v2, ni ninguna
   clase de las pantallas que lo incluyen. */

.pbc-dnav { display: none; }

@media (min-width: 768px) {
  .pbc-dnav {
    /* Paleta unica (pbc-design-tokens.css): el mismo azul que el menu de la web. */
    --dnav-blue: hsl(var(--pbc-blue));
    --dnav-ink: hsl(var(--pbc-ink));

    display: block;
    position: sticky;
    top: 0;
    /* Por debajo del 1024 del menú de base.html: si algún día una pantalla
       llevara las dos, manda el de siempre. */
    z-index: 1020;
    font-family: var(--pbc-font);
  }

  .pbc-dnav-bar {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 12px 28px;
    background: var(--dnav-blue);
  }

  .pbc-dnav-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
  .pbc-dnav-logo img { display: block; height: 30px; width: auto; }

  .pbc-dnav-links {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
  }

  .pbc-dnav-links a {
    color: hsl(var(--pbc-on-color));
    text-decoration: none;
    font-size: var(--pbc-text-base);
    font-weight: var(--pbc-weight-bold);
    white-space: nowrap;
    opacity: .92;
  }

  .pbc-dnav-links a:hover { opacity: 1; text-decoration: underline; }

  /* MIGA DE PAN: la fila blanca de debajo, siempre visible, con el botón de
     volver. Es la pieza que pidió Guille el 28/08/2026 ("que siempre se pueda
     volver a mis clases"), y va aparte del menú a propósito: el menú te lleva a
     otra sección, esta te devuelve de donde viniste. */
  .pbc-dnav-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
    background: hsl(var(--pbc-surface));
    border-bottom: 1px solid hsl(var(--pbc-line-soft));
    font-size: var(--pbc-text-base);
    color: hsl(var(--pbc-muted));
  }

  .pbc-dnav-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid var(--dnav-blue);
    border-radius: 999px;
    color: var(--dnav-blue);
    background: hsl(var(--pbc-surface));
    font-weight: var(--pbc-weight-bold);
    text-decoration: none;
    white-space: nowrap;
  }

  .pbc-dnav-back:hover { background: hsl(var(--pbc-blue-soft)); color: var(--dnav-blue); }
  .pbc-dnav-back svg { flex-shrink: 0; }

  .pbc-dnav-here {
    color: var(--dnav-ink);
    font-weight: var(--pbc-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pbc-dnav-sep { color: hsl(var(--pbc-line)); }
}

/* Al imprimir (la hoja de deberes del alumno se imprime) no sale ni el menú ni
   la miga: el papel es para la tarea. */
@media print {
  .pbc-dnav { display: none !important; }
}