/*
 * Que ninguna barra tape lo que hay debajo.
 *
 * Dos capas viven pegadas a los bordes y no se van nunca: el aviso del
 * Conclave arriba y la barra de estado abajo. Cada una publica su altura
 * (--codex-banner-height, --codex-hud-height), pero solo las respetaban la
 * portada y el mapa. El resto de pantallas se dibujaban por debajo y perdian
 * la cabecera y el pie: se veia el titulo del grimorio partido por el aviso y
 * los botones del panel principal escondidos tras el saldo.
 *
 * La regla se pone en un sitio y vale para todas, incluidas las que se
 * escriban manana, porque lo que se declara es "esto es una pantalla" y no
 * "esta pantalla concreta".
 */

:root {
  --codex-banner-height: 0px;
  --codex-hud-height: 0px;
  /* Un respiro para que el contenido no quede lamiendo la barra. */
  --codex-respiro-pantalla: 0.5rem;
}

/*
 * Las pantallas que ocupan todo. Se listan por id porque cada sistema crea la
 * suya y no comparten clase; anadir una pantalla nueva es anadir una linea.
 */
/*
 * course-system-container se queda fuera: sus margenes van en un style en
 * linea, que gana a cualquier hoja, asi que reserva las barras el mismo. Meterlo
 * aqui daria la falsa impresion de estar cubierto.
 */
#authenticated-home-overlay,
#grandhall-lobby-overlay,
#aptitude-questionnaire-container,
.academy-map {
  padding-top: calc(var(--codex-banner-height) + var(--codex-respiro-pantalla));
  padding-bottom: calc(var(--codex-hud-height) + var(--codex-respiro-pantalla));
  box-sizing: border-box;
}

/*
 * La sala en vivo se queda fuera a proposito: dentro se camina y se mira, y
 * recortarle el alto le cambiaria el encuadre de la camara. Alli las barras se
 * apartan solas.
 */
body.codex-en-sala .codex-content-banner {
  display: none;
}

/*
 * El panel de personaje y las fichas se abren dentro de otras pantallas, asi
 * que solo necesitan no meterse debajo del pie.
 */
#character-status-panel,
#character-panel-overlay {
  padding-bottom: calc(var(--codex-hud-height) + var(--codex-respiro-pantalla));
  box-sizing: border-box;
}

/*
 * QA-UX-004: una pantalla concreta puede compactar su estetica en movil, pero
 * no puede reducir los objetivos tactiles por debajo de 44px ni recortar el
 * texto de navegacion. El cuestionario hacia ambas cosas en <=768px y llegaba
 * a 32px en <=360px. Esta capa global fija la invariante de accesibilidad sin
 * obligar al componente a perder su estilo propio.
 *
 * La zona de pregunta se hace desplazable porque el propio componente limita
 * la pantalla a 100dvh y oculta overflow: con texto grande, sin este scroll el
 * contenido extra queda inaccesible aunque siga en el DOM.
 */
@media (max-width: 768px) {
  #aptitude-questionnaire-container .scale-option {
    min-height: 44px !important;
  }

  #aptitude-questionnaire-container .test-navigation .btn-primary,
  #aptitude-questionnaire-container .test-navigation .btn-secondary {
    min-height: 44px !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #aptitude-questionnaire-container .test-question-area {
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * QA-UX-005: character.js define las pestanas a 44px, pero la capa movil
   * posterior las rebajaba a 40px con !important. Tambien existen controles
   * heredados de 28-34px. La pantalla de Personaje no puede perder el minimo
   * tactil por una regla de compactacion posterior.
   */
  .character-status button,
  .character-status select,
  .character-status input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 44px !important;
  }
}

/*
 * Movil estrecho: la barra de estado apretaba nombre, nivel y saldo en la
 * misma linea y se solapaban. Se deja que bajen de linea antes que encimarse.
 */
@media (max-width: 720px) {
  /*
   * Nombre, nivel, Ecos y Arcanitas iban intentando caber en una sola linea de
   * 390 pixeles y acababan escritos unos sobre otros. Se les deja bajar de
   * linea: ocupar dos renglones se lee, superponerse no.
   */
  #codex-hud.visible {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    row-gap: 0.35rem;
    column-gap: 0.5rem;
  }

  #codex-hud .codex-hud-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #codex-hud .codex-hud-actions button {
    padding-inline: 4px;
    overflow-wrap: anywhere;
  }
}


/*
 * UX-INT-001: el inventario autenticado de 390/1440 px encontro controles
 * con objetivos tactiles inferiores a 44 px en Ajustes y Mochila.
 * Reglas dirigidas a los controles reales, sin agrandar las casillas/rangos
 * nativos ni alterar el resto de los botones de la academia.
 *
 * user-settings.js inyecta su CSS DESPUES de la carga de esta hoja, por eso
 * usamos IDs (mayor especificidad), no un selector .codex-settings-close que
 * su regla posterior podria sobrescribir.
 */
#codex-settings-overlay #codex-settings-close,
#codex-settings-overlay #codex-setting-language,
#inventory-ui.inventory-panel .inventory-header .close-btn {
  min-height: 44px;
  box-sizing: border-box;
}

/*
 * UX-INT-001: el texto de las conversaciones permite desplazar, pero escondía
 * la barra tanto en Firefox (scrollbar-width: none) como en Chromium/WebKit.
 * El alumnado no tenía ninguna pista de que una explicación seguía debajo.
 *
 * dialogue.js inyecta esas reglas DESPUÉS de esta hoja; el selector combinado
 * gana por especificidad y conserva el alto máximo y overflow-y: auto.
 */
.dialogue-box .dialogue-text {
  scrollbar-width: thin;
  scrollbar-color: #765137 rgba(118, 81, 55, 0.12);
}

.dialogue-box .dialogue-text::-webkit-scrollbar {
  display: block;
  width: 9px;
}

.dialogue-box .dialogue-text::-webkit-scrollbar-track {
  background: rgba(118, 81, 55, 0.12);
}

.dialogue-box .dialogue-text::-webkit-scrollbar-thumb {
  background: #765137;
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}