/* ==========================================================================
   Barra superior en una sola fila y el desplegable de OneDrive

   Antes eran dos franjas: arriba la marca con un buscador, debajo las
   secciones. El buscador se fue —la búsqueda es la primera pantalla del
   inicio, con su campo grande— y las secciones subieron a ocupar ese hueco.
   La barra pasa de unos 146 px de alto a unos 70, que es alto que gana la
   portada.

   El panel de sincronización deja de ser una franja permanente y cuelga del
   botón de OneDrive.
   ========================================================================== */

/* La barra es un panel propio y no una prolongación de la portada. Vuelve al
   blanco, pero no al blanco plano de la página: lo que la separa ahora es la
   materia, no el tono.

   Son cuatro cosas a la vez. Un blanco translúcido con desenfoque detrás, así
   que el contenido que pasa por debajo se adivina y la barra se lee como una
   lámina de vidrio delante. Un degradado muy corto de arriba abajo, que es lo
   que da el brillo. Una línea blanca por dentro del borde superior, el reflejo
   del canto. Y una sombra baja y ancha que la levanta del papel: eso es lo que
   pone la jerarquía, porque una cosa que proyecta sombra está delante de la
   que la recibe. */
.barra{
  position:sticky;
  top:0;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74))!important;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(17,24,39,.07)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 26px -14px rgba(17,24,39,.22)!important;
}

/* Las píldoras recuperan su gris —sobre blanco vuelve a leerse— y ganan su
   propio canto de luz arriba, para que no parezcan agujeros recortados en la
   barra sino piezas apoyadas en ella. */
.barra-nav,
.barra-admin,
.conexion-estado,
.barra-marca .escudo,
.barra-avatar{
  background:#ededea!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(17,24,39,.04)!important;
}
.barra-nav button:hover{background:rgba(255,255,255,.75)}
.barra-nav button[aria-current="page"]{
  background:#fff;
  box-shadow:0 1px 3px rgba(17,24,39,.14), inset 0 1px 0 #fff;
}

.barra-marca{flex:none}

/* Las secciones se llevan el espacio libre del centro. Si no caben, la fila
   se desplaza en horizontal en vez de romper la barra; la barra de
   desplazamiento se oculta porque el gesto ya es evidente. */
.barra-navegacion{
  flex:1 1 auto;
  min-width:0;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.barra-navegacion::-webkit-scrollbar{display:none}

.barra-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:max-content;
  min-width:100%;
  min-height:0;
  padding:0!important;
  max-width:none;
}

.barra-perfil{flex:none}

/* Por debajo de este ancho la marca y las seis secciones ya no conviven en
   una línea: la fila de secciones baja a la suya, como estaba antes. */
@media(max-width:1180px){
  .barra-superior{flex-wrap:wrap}
  .barra-navegacion{order:3;flex-basis:100%}
  .barra-inner{justify-content:flex-start}
}

/* ===================== DESPLEGABLE DE ONEDRIVE =====================
   El panel conserva su HTML y su guion: lo único que cambia es que en vez de
   ser una franja de ancho completo, es una tarjeta que cuelga del botón.

   La visibilidad tiene dos llaves. `hidden` la pone sincronizacion.js y dice
   si hay algo que contar; `data-abierto` lo pone el usuario al pulsar el
   botón. Hacen falta las dos: sin la primera el desplegable mostraría un
   panel vacío, y sin la segunda volvería a aparecer solo. */
.sincro{
  position:absolute;
  top:calc(100% - 8px);
  right:max(16px,calc(50vw - 620px));
  z-index:40;
  width:min(540px,calc(100vw - 32px));
  border:1px solid var(--borde)!important;
  border-radius:16px;
  background:#fff!important;
  box-shadow:0 24px 60px rgba(17,24,39,.16);
  display:none;
}
.sincro:not([hidden])[data-abierto="si"]{display:block}

/* El nivel ya no se dice con el fondo de una franja —ahora es una tarjeta
   blanca— sino con una línea de color arriba. */
.sincro::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  border-radius:16px 16px 0 0;
  background:#1f7a4d;
}
.sincro[data-nivel="aviso"]::before{background:#a9700f}
.sincro[data-nivel="error"]::before{background:#b3311c}

.sincro-inner{
  display:block!important;
  padding:18px 20px!important;
  max-width:none;
}
.sincro-resumen{margin:0 0 14px;line-height:1.5}
.sincro-acciones{gap:8px}
.sincro-detalle{margin-top:14px;max-height:min(52vh,380px)}

@media(max-width:640px){
  .sincro{right:12px;left:12px;width:auto}
}