/* El marco móvil: fondo oscuro, columna centrada y una barra de pestañas abajo, como una app.
   Lo de adentro usa las clases .aidict-* (aidict.css). */

html, body {
  margin: 0;
  background: #0b1622;
  color: #e8ecf1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

.frame {
  max-width: 700px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 76px);
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #1b2734;
  border-top: 1px solid #2e3f52;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  color: #898d92;
  font-weight: 600;
  text-decoration: none;
}

.tabbar-item--active { color: #267dff; }

/* button_to envuelve el botón en un <form>: que no rompa las filas de acciones */
.aidict-actions form, .aidict-grades form { display: contents; }

.login {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15vh;
}

/* Toggle Meta / Nativo / Ambos (langview_controller.js) */
[data-lang-view="target"] .lv-native,
[data-lang-view="native"] .lv-target { display: none; }

/* "Ver más" del dorso: un <details> con el turbo frame perezoso adentro */
.aidict-card-more summary { list-style: none; display: inline-block; margin-top: 8px; }
.aidict-card-more summary::-webkit-details-marker { display: none; }

/* Acciones: en la webapp eran <button>; aquí algunas son <a> (link_to) o <form> (button_to) */
.aidict-actions { flex-wrap: wrap; }
.aidict-actions a, .aidict-btn-back { text-decoration: none; }
.aidict-actions a, .aidict-actions button { white-space: nowrap; display: inline-flex; align-items: center; }

/* Filas de la lista: aquí son <a>. En el móvil, término y gloss arriba y los chips abajo
   (en una sola línea el gloss se quedaba sin ancho). */
.aidict-row { text-decoration: none; }
@media (max-width: 560px) {
  .aidict-row { flex-wrap: wrap; row-gap: 6px; }
  .aidict-row-gloss { flex: 1 1 50%; min-width: 0; }
  .aidict-row .aidict-level--compact { flex-basis: 100%; }
}