/* ================================================================
   includes/apps-hermanas.css — tira de herramientas bajo la barra.
   Se apoya en tokens.css; si una app trae su propio tema claro, los
   colores se leen igual porque la tira lleva fondo propio oscuro,
   como la barra de la que cuelga.
   ================================================================ */
.fm-hermanas{
  position:sticky; top:var(--fran-barra-alto,0px);
  z-index:calc(var(--z-barra,20) - 1);
  display:flex; align-items:center; gap:.7rem;
  padding:.4rem clamp(.7rem,2.5vw,1.4rem);
  background:rgba(8,10,22,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.09);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#e7e9f5;
  overflow:visible;
}
.fm-hermanas .fm-h-tit{
  flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:#7f8aa8;
}
@media(max-width:620px){ .fm-hermanas .fm-h-tit{ display:none; } }

/* La lista se desliza en horizontal si no cabe: nunca parte en dos filas */
.fm-hermanas .fm-h-lista{
  flex:1 1 auto; display:flex; align-items:center; gap:.35rem;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.fm-hermanas .fm-h-lista::-webkit-scrollbar{ display:none; }

.fm-hermanas a{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .7rem; border-radius:999px;
  font-size:12.5px; font-weight:600; line-height:1.2;
  color:#c7cde4; text-decoration:none; white-space:nowrap;
  border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.fm-hermanas a:hover{ background:rgba(255,255,255,.09); color:#fff; }
.fm-hermanas a.act{
  background:rgba(89,224,255,.16); color:#fff;
  border-color:rgba(89,224,255,.5);
}
.fm-hermanas .fm-h-ic{ font-size:13px; line-height:1; }
/* Algún título del catálogo es larguísimo ("Símulador de Nómina Docente en
   Castilla y León") y se comía la tira entera: se recorta con puntos y el
   nombre completo queda en el title. */
.fm-hermanas .fm-h-lista a>span:not(.fm-h-ic){
  max-width:19ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Las de pago dicen QUÉ RANGO hace falta, con el mismo nombre, icono y color
   que en la cuenta y en la tienda (_sso/rangos.php). La tira no puede dar a
   entender que algo es de acceso libre cuando no lo es. */
.fm-hermanas .fm-h-rango{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.22rem;
  font-size:10px; font-weight:800; letter-spacing:.03em;
  padding:.12rem .4rem; border-radius:999px; line-height:1.5;
  background:rgba(255,255,255,.1); color:#cfd5ea;
  border:1px solid rgba(255,255,255,.14);
}
.fm-hermanas .fm-h-rango.r-vip       { color:#6ee7a5; border-color:rgba(34,197,94,.45);  background:rgba(34,197,94,.14); }
.fm-hermanas .fm-h-rango.r-premium   { color:#b9a8ff; border-color:rgba(124,92,255,.5);  background:rgba(124,92,255,.16); }
.fm-hermanas .fm-h-rango.r-ultra     { color:#5fd9ee; border-color:rgba(6,182,212,.5);   background:rgba(6,182,212,.16); }
.fm-hermanas .fm-h-rango.r-legendario{ color:#fbc26a; border-color:rgba(245,158,11,.5);  background:rgba(245,158,11,.16); }
.fm-hermanas a.pago{ color:#b3bad4; }
.fm-hermanas a.pago:hover{ color:#fff; }
.fm-hermanas .fm-h-panel a{ display:flex; align-items:center; gap:.4rem; }
.fm-hermanas .fm-h-panel a>span:not(.fm-h-ic):not(.fm-h-rango){ flex:1; }
/* En la tira de arriba el nombre se recorta, pero el rango nunca: es lo que
   evita el chasco de pulsar y encontrarse un muro. */
@media(max-width:620px){
  .fm-hermanas .fm-h-lista a>span:not(.fm-h-ic):not(.fm-h-rango){ max-width:12ch; }
}

/* Desplegable con el resto del sitio */
.fm-hermanas .fm-h-mas{ flex:0 0 auto; position:relative; }
.fm-hermanas .fm-h-mas>summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .7rem; border-radius:999px;
  font-size:12.5px; font-weight:600; color:#c7cde4;
  border:1px solid rgba(255,255,255,.14);
}
.fm-hermanas .fm-h-mas>summary::-webkit-details-marker{ display:none; }
.fm-hermanas .fm-h-mas>summary:hover{ background:rgba(255,255,255,.09); color:#fff; }
.fm-hermanas .fm-h-mas[open]>summary{ background:rgba(255,255,255,.12); color:#fff; }
.fm-hermanas .fm-h-n{
  font-size:10.5px; font-weight:800; color:#0b1020;
  background:#7f8aa8; border-radius:999px; padding:.05rem .38rem;
}
.fm-hermanas .fm-h-panel{
  position:absolute; right:0; top:calc(100% + .45rem); z-index:5;
  width:min(320px,86vw); max-height:min(64vh,460px); overflow-y:auto;
  background:#11162b; border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:.6rem; box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:.5rem;
}
.fm-hermanas .fm-h-grupo{ display:flex; flex-direction:column; gap:.15rem; }
.fm-hermanas .fm-h-grupo>b{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#7f8aa8; padding:.2rem .55rem;
}
.fm-hermanas .fm-h-panel a{
  white-space:normal; border-radius:9px; padding:.42rem .55rem; font-weight:500;
}

@media(prefers-reduced-motion:reduce){ .fm-hermanas a{ transition:none; } }
@media print{ .fm-hermanas{ display:none; } }

/* ================================================================
   MÓVIL: HOJA DESLIZANTE, NO TIRA
   Por debajo de 720px ya no hay sitio para una segunda barra pegada
   arriba (la de secciones ya bajó a .fm-tabbar, ver barra.css): esta
   se convierte en una hoja que sube desde abajo al tocar, en esa barra
   inferior, la sección en la que ya se está (includes/barra.js,
   alternarHoja). Mismo HTML de siempre, solo cambia dónde vive.
   ================================================================ */
/* El botón de cerrar lo inyecta el JS siempre; solo tiene sentido en la
   hoja móvil (sus estilos están abajo), en escritorio no se ve. */
.fm-h-cerrar{ display:none; }
@media(max-width:720px){
  .fm-h-cerrar{ display:block; }
  .fm-hermanas{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    z-index:calc(var(--z-tooltip,80) + 16);   /* por encima de cualquier z-index propio de una app (visto: 40) */
    flex-direction:column; align-items:stretch;
    max-height:min(78vh,640px); overflow-y:auto;
    border-radius:18px 18px 0 0;
    border-bottom:0;
    box-shadow:0 -12px 40px rgba(0,0,0,.55);
    padding:.9rem 1rem calc(1.1rem + env(safe-area-inset-bottom,0px));
    backdrop-filter:blur(14px);
    transform:translateY(105%);
    transition:transform var(--dur-3,.32s) var(--ease-out,ease);
    pointer-events:none;
  }
  .fm-hermanas.fm-h-abierta{ transform:translateY(0); pointer-events:auto; }

  /* Un asa visual arriba, como cualquier hoja de móvil, y el título
     ("Herramientas") vuelve a verse: aquí es el titular de la hoja,
     no una etiqueta perdida en una tira horizontal. */
  .fm-hermanas::before{
    content:""; position:absolute; left:50%; top:.5rem;
    width:36px; height:4px; border-radius:99px;
    background:rgba(255,255,255,.25);
    transform:translateX(-50%);
  }
  .fm-hermanas .fm-h-tit{
    display:block; order:-1; font-size:13px; letter-spacing:.04em;
    margin:.4rem 2.2rem .5rem 0; color:#e7e9f5;
  }

  .fm-h-cerrar{
    position:absolute; right:.7rem; top:.6rem;
    width:32px; height:32px; border-radius:999px; border:0;
    background:rgba(255,255,255,.1); color:#e7e9f5;
    font-size:15px; line-height:1; cursor:pointer;
  }
  .fm-h-cerrar:hover{ background:rgba(255,255,255,.18); }

  /* La lista de herramientas hermanas pasa de tira horizontal a
     columna: aquí hay sitio de sobra y no tiene sentido deslizar. */
  .fm-hermanas .fm-h-lista{
    flex-direction:column; align-items:stretch;
    overflow-x:visible; gap:.3rem;
  }
  .fm-hermanas .fm-h-lista a,
  .fm-hermanas .fm-h-panel a{
    padding:.6rem .7rem; border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
  }
  .fm-hermanas .fm-h-lista a>span:not(.fm-h-ic):not(.fm-h-rango){
    max-width:none; flex:1;
  }

  /* El desplegable "Más del sitio" ya no flota: se abre dentro del
     propio scroll de la hoja, que es donde de verdad hay espacio. */
  .fm-hermanas .fm-h-mas{ margin-top:.3rem; }
  .fm-hermanas .fm-h-panel{
    position:static; width:auto; max-height:none;
    margin-top:.4rem; box-shadow:none;
    background:rgba(255,255,255,.04);
  }
}

/* Fondo oscuro tras la hoja: toca fuera y se cierra. */
.fm-h-fondo{
  position:fixed; inset:0; z-index:calc(var(--z-tooltip,80) + 15);   /* por encima de cualquier z-index propio de una app */
  background:rgba(4,6,16,.55);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-3,.32s) ease;
}
.fm-h-fondo-on{ opacity:1; pointer-events:auto; }
@media(min-width:721px){ .fm-h-fondo{ display:none; } }
body.fm-h-bloqueo{ overflow:hidden; }