/* @overa/ui-kit 0.2.0 · nuevo: el selector de aplicaciones de la suite
   (`js/app-switcher.js`, `<overa-app-switcher>`). Usa las variables de
   `app.css` (claro y oscuro salen solos de allí); los valores de después de la
   coma son por si una app aún no enlaza `app.css`. Prefijo `ov-` (lo común de
   la suite que no viene de app-sign). */

overa-app-switcher { display: inline-block; position: relative; vertical-align: middle; }
overa-app-switcher[hidden] { display: none; }

.ov-apps-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius, 8px);
  background: transparent; color: var(--dim, #5B6474); cursor: pointer;
}
.ov-apps-button:hover { background: var(--bg3, #EEF0F4); color: var(--tx, #1E2536); }
.ov-apps-button[aria-expanded="true"] { background: var(--a-soft, #FDF1EC); color: var(--a, #AB4722); }
.ov-apps-button:focus-visible,
.ov-apps-search:focus-visible,
.ov-apps-item:focus-visible { outline: 2px solid var(--a, #AB4722); outline-offset: 2px; }

.ov-apps-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  width: 320px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px;
  background: var(--modal-bg, #FFFFFF); color: var(--tx, #1E2536);
  border: 1px solid var(--bd, #E4E7EC); border-radius: var(--radius-lg, 10px);
  box-shadow: 0 12px 32px var(--shadow, rgba(30,37,54,.12)), 0 2px 6px var(--shadow, rgba(30,37,54,.08));
}
.ov-apps-panel[hidden] { display: none; }

.ov-apps-search {
  display: block; width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px; margin: 0 0 10px;
  font: inherit; font-size: var(--fs-md, 14px); color: var(--tx, #1E2536);
  background: var(--input-bg, #FFFFFF); border: 1px solid var(--bd2, var(--bd, #D0D5DD)); border-radius: var(--radius, 8px);
}
.ov-apps-search::placeholder { color: var(--dim, #5B6474); }

.ov-apps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.ov-apps-grid > li { margin: 0; padding: 0; }

.ov-apps-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 84px; box-sizing: border-box; padding: 10px 4px 8px;
  border: 1px solid transparent; border-radius: var(--radius, 8px);
  color: var(--tx, #1E2536); text-decoration: none; cursor: pointer; text-align: center;
}
.ov-apps-item:hover { background: var(--bg3, #EEF0F4); }
.ov-apps-item[aria-current="page"] { background: var(--a-soft, #FDF1EC); border-color: var(--a, #AB4722); cursor: default; }

.ov-apps-icon { display: inline-flex; width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 1px var(--bd, #E4E7EC); }
.ov-apps-icon svg { display: block; width: 40px; height: 40px; }
.ov-apps-name { font-size: var(--fs-sm, 12px); line-height: 1.3; overflow-wrap: anywhere; }

.ov-apps-empty { margin: 8px 0 4px; font-size: var(--fs-md, 14px); color: var(--dim, #5B6474); text-align: center; }
.ov-apps-empty[hidden] { display: none; }