/* ============================================================================
   Cabecera común de todas las páginas (vistas/comun/cabecera.php).

   Sigue el estilo de la página de inicio de siempre: barra negra, el logo
   de la UPC a la izquierda y enlaces de texto blancos en negrita. Sin
   botones ni cápsulas. En la portada va transparente encima de la imagen
   y se vuelve negra al bajar (variante `--sobre-imagen`).

   Ordenador:  [logo] | INICI › CERCADORS › RECURSOS DOCENTS   Cercadors ▾  Editors ▾ | Accés intern
   Tableta:    [logo] | INICI › CERCADORS › RECURSOS DOCENTS                          ☰
   Teléfono:   [logo] | ‹ CERCADORS                                                    ☰

   Cada sección abre un panel de lado a lado, justo debajo de la barra, con
   sus páginas. En la tableta y el teléfono, secciones y sesión van en el
   menú de tres rayas.

   Convive con páginas muy distintas, algunas con estilos globales
   agresivos (los editores de recursos ponen margen, fondo y borde a todos
   los `button`). Por eso todo va bajo `.ice-cab` con dos
   clases de especificidad y fija cada propiedad que importa.

   No sigue el tema claro/oscuro de ningún proyecto: es la misma en todos.
   ============================================================================ */

.ice-cab {
  position: relative;
  z-index: 40;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  width: auto;
  min-height: 72px;
  margin: 0;
  padding: 12px clamp(16px, 3vw, 48px);
  background: #0b0b0b;
  color: #ffffff;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.ice-cab *,
.ice-cab *::before,
.ice-cab *::after { box-sizing: border-box; }

/* Portada: transparente sobre la imagen, negra en cuanto se baja */
.ice-cab.ice-cab--sobre-imagen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  transition: background-color 0.25s ease;
}
.ice-cab.ice-cab--sobre-imagen.ice-cab--fondo { background-color: #0b0b0b; }

/* ----- Logo de la UPC: lleva a la web de la UPC ----- */
.ice-cab .ice-cab-logo {
  display: block;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.ice-cab .ice-cab-logo img {
  display: block;
  width: 200px;
  max-width: 40vw;
  height: auto;
  margin: 0;
  border: 0;
}

.ice-cab .ice-cab-sep {
  flex-shrink: 0;
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.35);
}

/* ----- Ruta: Inici › sección › página. Todo enlace menos la página actual ----- */
.ice-cab .ice-cab-ruta {
  flex: 1 1 auto;   /* empuja secciones y sesión a la derecha */
  min-width: 0;
  margin: 0;
  padding: 0;
}
.ice-cab .ice-cab-ruta ol {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ice-cab .ice-cab-ruta li {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.ice-cab .ice-cab-ruta li:not(:last-child) { flex-shrink: 0; }

.ice-cab .ice-cab-pas {
  margin: 0;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.ice-cab .ice-cab-pas:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* «Inici» en la portada: es la página actual, pero sigue siendo enlace */
.ice-cab .ice-cab-pas.ice-cab-pas--actual { color: #ffffff; }

.ice-cab .ice-cab-ruta-sep {
  margin: 0 12px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.ice-cab .ice-cab-actual {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}

/* ----- Secciones: cada una abre su panel ----- */
.ice-cab .ice-cab-seccions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* static: el panel se coloca respecto a toda la barra, no al botón */
.ice-cab .ice-cab-seccio { position: static; margin: 0; padding: 0; }

.ice-cab .ice-cab-seccio-boto {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 10px 12px;
  list-style: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease-in-out;
}
.ice-cab .ice-cab-seccio-boto::-webkit-details-marker { display: none; }
.ice-cab .ice-cab-seccio-boto:hover,
.ice-cab .ice-cab-seccio[open] .ice-cab-seccio-boto { color: #ffffff; }

/* La sección en la que estamos: una raya fina debajo */
.ice-cab .ice-cab-seccio-boto--actual { color: #ffffff; box-shadow: inset 0 -2px 0 #3fa9e0; }

.ice-cab .ice-cab-xevro {
  display: block;
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.ice-cab .ice-cab-seccio[open] .ice-cab-xevro { transform: rotate(180deg); }

/* El panel: de lado a lado, justo debajo de la barra */
.ice-cab .ice-cab-panell {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 28px clamp(16px, 3vw, 48px) 32px;
  background: #141414;
  border-top: 1px solid #2a2a2a;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  animation: ice-cab-apareix 0.16s ease-out;
}
@keyframes ice-cab-apareix {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.ice-cab .ice-cab-panell-dins {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 0;
  padding: 0;
}

.ice-cab .ice-cab-panell-titol {
  margin: 0 0 8px;
  padding: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.ice-cab .ice-cab-panell-text {
  margin: 0 0 16px;
  padding: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.5;
}
.ice-cab .ice-cab-panell-tot {
  color: #7cc4ec;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ice-cab .ice-cab-panell-tot:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }

.ice-cab .ice-cab-panell-llista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ice-cab .ice-cab-panell-llista li { margin: 0; padding: 0; }

.ice-cab .ice-cab-panell-pagina {
  display: block;
  height: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ice-cab .ice-cab-panell-pagina:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.ice-cab .ice-cab-panell-nom {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}
.ice-cab .ice-cab-panell-desc {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ----- Enlaces de texto (sesión, a la derecha y en el menú) ----- */
.ice-cab .ice-cab-dreta {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.ice-cab .ice-cab-seccions + .ice-cab-dreta {
  margin-left: 6px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.ice-cab .ice-cab-form { display: contents; margin: 0; }

.ice-cab .ice-cab-enllac {
  display: inline-block;
  height: auto;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(14px, 0.5vw + 11px, 17px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
.ice-cab .ice-cab-enllac:hover {
  color: #cfe3f5;
  background: none;
  text-decoration: none;
}

/* El candado de «Accés intern» */
.ice-cab .ice-cab-cadenat {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 7px 0 0;
  vertical-align: -1px;
  opacity: 0.75;
}

.ice-cab a:focus-visible,
.ice-cab button:focus-visible,
.ice-cab summary:focus-visible { outline: 2px solid #cfe3f5; outline-offset: 3px; }

/* Pantalla grande: todo un poco más grande, que a 15 px se pierde */
@media (min-width: 1600px) {
  .ice-cab { min-height: 84px; gap: 22px; }
  .ice-cab .ice-cab-logo img { width: 236px; }
  .ice-cab .ice-cab-sep { height: 34px; }
  .ice-cab .ice-cab-ruta ol { font-size: 16px; }
  .ice-cab .ice-cab-ruta-sep { font-size: 19px; }
  .ice-cab .ice-cab-seccio-boto { font-size: 17px; }
  .ice-cab .ice-cab-enllac { font-size: 18px; }
  .ice-cab .ice-cab-cadenat { width: 16px; height: 16px; }
}

/* ----- Menú de tres rayas: oculto en el ordenador ----- */
.ice-cab .ice-cab-menu { display: none; }

/* Tableta y teléfono: secciones y sesión, al menú de tres rayas */
@media (max-width: 1023px) {
  .ice-cab .ice-cab-seccions,
  .ice-cab .ice-cab-dreta { display: none; }

  .ice-cab .ice-cab-menu {
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
  }

  /* Botón de tres rayas, cuadrado, como el de la portada de antes */
  .ice-cab .ice-cab-menu-boto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 9px;
    list-style: none;
    cursor: pointer;
  }
  .ice-cab .ice-cab-menu-boto::-webkit-details-marker { display: none; }
  .ice-cab .ice-cab-menu-boto span {
    display: block;
    height: 2px;
    background: #ffffff;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .ice-cab .ice-cab-menu[open] .ice-cab-menu-boto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ice-cab .ice-cab-menu[open] .ice-cab-menu-boto span:nth-child(2) { opacity: 0; }
  .ice-cab .ice-cab-menu[open] .ice-cab-menu-boto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* El desplegable: de lado a lado, justo debajo de la barra */
  .ice-cab .ice-cab-menu-panell {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    margin: 0;
    padding: 4px clamp(16px, 3vw, 48px) 12px;
    background: #1a1a1a;
    border-top: 1px solid #333333;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  }

  /* Cada sección: su nombre en pequeño (lleva a la sección) y sus páginas */
  .ice-cab .ice-cab-menu-grup {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #333333;
  }
  .ice-cab .ice-cab-menu-seccio {
    margin: 0;
    padding: 8px 0 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .ice-cab .ice-cab-menu-pagina {
    margin: 0;
    padding: 10px 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .ice-cab .ice-cab-menu-seccio:hover,
  .ice-cab .ice-cab-menu-pagina:hover { color: #cfe3f5; }

  .ice-cab .ice-cab-menu-panell .ice-cab-enllac {
    display: block;
    width: 100%;
    padding: 16px 0 6px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .ice-cab { gap: 12px; min-height: 60px; padding: 10px 16px; }
  .ice-cab .ice-cab-logo img { width: auto; height: 32px; max-width: 42vw; }
  .ice-cab .ice-cab-sep { height: 22px; }
  .ice-cab .ice-cab-ruta ol { font-size: 12px; }

  /* En el teléfono no cabe la ruta entera: queda «‹ » y el paso anterior,
     para subir un nivel. En la página de inicio, que no tiene paso
     anterior, queda «Inici». */
  .ice-cab .ice-cab-ruta li { display: none; }
  .ice-cab .ice-cab-ruta li:only-child,
  .ice-cab .ice-cab-ruta li.ice-cab-pare { display: flex; }
  .ice-cab .ice-cab-ruta-sep { display: none; }
  .ice-cab .ice-cab-pare .ice-cab-pas::before {
    content: "‹";
    margin: 0 8px 0 0;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .ice-cab .ice-cab-menu-panell { max-height: calc(100vh - 60px); padding: 4px 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ice-cab .ice-cab-menu-boto span,
  .ice-cab .ice-cab-xevro,
  .ice-cab.ice-cab--sobre-imagen { transition: none; }
  .ice-cab .ice-cab-panell { animation: none; }
}