/* Menú de herramientas, compartido por todas las páginas de herramientas (el HTML lo pone scripts/build.js).
   Va dentro de la cabecera, junto al logo: botón "Herramientas" + herramienta actual + acceso discreto a Mi tablero.
   Panel: agrupado por categorías; en el celular sale desde abajo. */
.tb-menu-wrap { position: relative; margin-left: 14px; }
.tb-spacer { flex: 1; }
/* "Herramientas" es lo principal de la barra: botón blanco lleno, que salta a la vista sobre el azul */
.tb-menu {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: 0; background: #fff; color: #16213a; font: 800 14px/1 "Manrope", sans-serif;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25); transition: background .15s, transform .15s;
}
.tb-menu:hover { background: #fdeee8; }
.tb-menu:active { transform: scale(.97); }
.tb-menu[aria-expanded="true"] { background: #fdeee8; }
.tb-menu svg { width: 16px; height: 16px; flex: none; }
.tb-menu .tb-chev { width: 12px; height: 12px; transition: transform .15s; }
.tb-menu[aria-expanded="true"] .tb-chev { transform: rotate(180deg); }
.tb-current { overflow: hidden; color: rgba(255, 255, 255, .7); font: 600 13px/1 "Manrope", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.tb-current::before { content: "›"; margin-right: 8px; color: rgba(255, 255, 255, .4); }
/* "Mi tablero" es secundario: discreto, solo contorno y una notita amarilla pequeña como icono */
.tb-board {
  display: inline-flex; flex: none; align-items: center; gap: 7px; margin-right: 4px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8); font: 600 13px/1 "Manrope", sans-serif; text-decoration: none;
  transition: background .15s, color .15s;
}
.tb-board:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tb-board svg { width: 15px; height: 15px; flex: none; }
.tb-board b { color: #fff; font-weight: 800; }
.tb-board.on { border-color: rgba(255, 255, 255, .5); color: #fff; }

.menu-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(22, 33, 58, .45); }
.menu-panel {
  position: absolute; left: 0; top: calc(100% + 12px); z-index: 60;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 6px 18px; width: min(660px, calc(100vw - 40px));
  padding: 16px; border-radius: 16px; background: #fffdf9; color: #16213a; box-shadow: 0 22px 50px rgba(22, 33, 58, .32);
  font-family: "Manrope", sans-serif;
}
.mp-head { display: none; }
.mp-group { min-width: 0; }
.mp-group:first-of-type { grid-row: span 2; }
.mp-group h3 { margin: 4px 10px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a8270; }
.mp-group ul { margin: 0; padding: 0; list-style: none; }
.mp-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
a.mp-item:hover { background: #f3eee5; }
.mp-item.on { background: #fdeee8; }
.mp-item svg { width: 34px; height: 34px; flex: none; }
.mp-item b { display: block; font-size: 14.5px; font-weight: 800; }
.mp-item span { display: block; color: #5d687c; font-size: 12.5px; line-height: 1.3; }
.mp-item.soon { opacity: .55; }
.mp-item em {
  margin-left: auto; padding: 2px 7px; border-radius: 999px; background: #efeae1; font-style: normal;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5d687c;
}
.mp-all { grid-column: 1 / -1; margin: 6px 10px 2px; color: #d2481f; font-size: 13px; font-weight: 800; text-decoration: none; }
.mp-all:hover { text-decoration: underline; }

/* Celular: el panel sale desde abajo, como una hoja */
@media (max-width: 700px) {
  .tb-menu-wrap { margin-left: 8px; }
  .tb-menu { padding: 8px 11px; font-size: 13px; }
  .tb-board, .tb-current { display: none; }
  .menu-panel {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82vh; overflow-y: auto;
    grid-template-columns: 1fr; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0;
    animation: mp-up .2s ease-out;
  }
  .mp-group:first-of-type { grid-row: auto; }
  .mp-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 4px; }
  .mp-head::before { content: ""; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #d9d2c4; }
  .mp-head b { font-size: 17px; font-weight: 800; }
  .mp-close { border: 0; background: none; font-size: 26px; line-height: 1; color: #5d687c; cursor: pointer; }
}
@media (min-width: 701px) { .menu-backdrop { background: transparent; } }
@keyframes mp-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }
@media print { .tb-menu-wrap, .tb-current, .tb-board, .menu-backdrop { display: none !important; } }