/* ══════════════════════════════════════════════════════════════════════════
   DISEÑO ÚNICO · MARCO COMÚN (zona Inicio, chat y marco; Guille 08-09/11/2026)

   El marco que sale en TODAS las pantallas: el menú azul del ordenador (base.html
   y base-v2.html, `nav.navbar`), la cabecera de las pantallas de la app en el
   ordenador (includes/desktop_app_header.html, `.pbc-dnav`), el pie y la línea de
   debajo del título en la cabecera azul del móvil. Maqueta: P3Desk del lienzo
   https://claude.ai/artifact/4hhEPAoAwKMUzikVaEqBEF.

   Reglas:
   · Solo se carga con el interruptor DISENO_UNICO (lo pone la base o el include)
     y todo va dentro de `.pbc-du`: apagado, nada de aquí existe.
   · Solo letra, color y medidas: el menú NO cambia de sitio ni de altura
     (`nav.navbar` sigue fija arriba: el calendario de intercambios la mide).
     El cuerpo de la página (overflow, fondo) tampoco se toca aquí.
   · Ni un color escrito a mano (lo vigila mainmodule/tests/test_du_inicio.py).
   ══════════════════════════════════════════════════════════════════════════ */

/* El escudo de la primera clase, dibujo de línea en vez del emoji. */
.pbc-du .du-marco-shield {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
}

@media (min-width: 768px) {
  /* ── Menú azul del ordenador (base.html y base-v2.html) ──────────────────── */

  /* El MISMO ancho en las dos bases (Guille 11/11/2026, «¿por qué cambia el menú?
     idealmente se queda siempre igual»). base.html lo dejaba en 1280px (el tope de
     .container de pbc-theme.css) y base-v2.html en el de Tailwind (hasta 1536px): en
     Clases el menú salía más estrecho y se partía en dos líneas. Solo el ancho; la
     altura y el sitio no se tocan. */
  .pbc-du > nav.navbar > .container { max-width: 1536px !important; }
  .pbc-du .navbar .nav-links a.nav-item,
  .pbc-du .navbar .nav-links button.nav-item {
    color: hsl(var(--pbc-on-color));
    font-family: var(--pbc-font);
    font-size: var(--pbc-size-label);
    font-weight: var(--pbc-weight-bold);
  }
  /* La sección en la que estás: raya amarilla de 4 px (maqueta P3Desk). */
  .pbc-du .navbar .nav-links a.nav-item.active::after {
    height: 4px;
    bottom: -4px;
    border-radius: 4px;
    background-color: hsl(var(--pbc-gold));
  }
  /* «Gratis» de Intercambios: la chapa verde de la barra del móvil. */
  .pbc-du .navbar .nav-links a.nav-item .nav-free-pill {
    background: hsl(var(--pbc-green));
    color: hsl(var(--pbc-on-color));
    font-weight: var(--pbc-weight-bold);
  }
  /* «Hola, nombre»: píldora blanca con la letra azul. */
  .pbc-du .navbar .profile-dropdown-wrapper .nav-contact-btn {
    background: hsl(var(--pbc-surface)) !important;
    color: hsl(var(--pbc-blue)) !important;
    font-family: var(--pbc-font);
    font-weight: var(--pbc-weight-bold) !important;
  }
  .pbc-du .navbar .profile-dropdown-wrapper .nav-contact-btn svg { stroke: currentColor !important; }
  /* «Hola, nombre» lleva directo al perfil (sin desplegable) y, si tienes llaves, la
     llave dorada con cuántas (Guille 10/11/2026). */
  .pbc-du .navbar .du-marco-yo { display: inline-flex; align-items: center; gap: 6px; }
  .pbc-du .navbar .du-marco-yo .nav-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: hsl(var(--pbc-surface)) !important;
    color: hsl(var(--pbc-blue)) !important;
    font-family: var(--pbc-font);
    font-weight: var(--pbc-weight-bold) !important;
    text-decoration: none !important;
  }
  .pbc-du .navbar .du-marco-llaves {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: hsl(var(--pbc-gold-soft));
    color: hsl(var(--pbc-gold-ink));
  }
  .pbc-du .navbar .du-marco-llave { stroke: hsl(var(--pbc-gold-dark)); }
  .pbc-du .navbar .du-marco-llaves b { font-weight: var(--pbc-weight-bold); }

  /* ── Cabecera de las pantallas de la app en el ordenador (.pbc-dnav) ─────── */
  .pbc-du .pbc-dnav-links a {
    color: hsl(var(--pbc-on-color));
    font-family: var(--pbc-font);
    font-size: var(--pbc-size-label);
    font-weight: var(--pbc-weight-bold);
  }
  .pbc-du .pbc-dnav-back {
    font-family: var(--pbc-font);
    font-weight: var(--pbc-weight-bold);
  }

  /* ── Pie de la web ───────────────────────────────────────────────────────── */
  .pbc-du .site-footer { font-family: var(--pbc-font); }
  .pbc-du .site-footer h3,
  .pbc-du .site-footer h4,
  .pbc-du .site-footer strong { font-weight: var(--pbc-weight-bold); }
}

@media (max-width: 767.98px) {
  /* Cabecera azul del móvil: la línea de debajo del título a 17 y sin negrita
     (maqueta P3Clases). La cabecera, su curva y el logo, igual. */
  .pbc-du .pbc-mtop-heading p {
    font-size: var(--pbc-size-body);
    font-weight: var(--pbc-weight-regular);
  }
}

/* ── Piezas sueltas del marco (salen en muchas pantallas) ──────────────────── */
/* «Bienvenida» (includes/welcome_prompt.html): iconos de línea en vez de emojis
   y el botón que se hunde. */
.pbc-du .pbcwel-ico,
.pbc-du .pbcwel-row-ico { color: hsl(var(--pbc-blue)); }
.pbc-du .pbcwel-ico svg,
.pbc-du .pbcwel-row-ico svg { display: block; }
.pbc-du .pbcwel-go {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbcwel-go:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
/* Hoja de idiomas y de ayuda: la letra de la casa. */
.pbc-du .pbc-lang-row,
.pbc-du .pbc-help-close { font-family: var(--pbc-font); }