/* Guía flotante de casillas. No mezclar con app.css ni con las hojas de cada pantalla. */

button.guia-marca,
.guia-marca {
  display: none !important;
}

.guia-pista {
  display: inline;
  width: fit-content;
  max-width: 100%;
  border-bottom: 1px solid #111;
  padding-bottom: 1px;
  cursor: help;
}

.fld > span.guia-pista {
  display: inline;
  align-items: unset;
}

.guia-campo {
  box-shadow: none;
}

#guia_globo {
  position: fixed;
  z-index: 80;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  background: #c41e32;
  color: #ffffff;
  border-radius: 10px;
  font: 0.82rem/1.4 "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 12px 28px rgba(31, 26, 22, 0.22);
  pointer-events: none;
}

#guia_globo[hidden] {
  display: none;
}

#guia_globo b {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4e3a3;
  font-weight: 650;
}

#guia_globo::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #c41e32;
  transform: rotate(45deg);
}

#guia_globo.guia-arriba::after {
  bottom: -5px;
  left: var(--guia-flecha, 18px);
}

#guia_globo.guia-abajo::after {
  top: -5px;
  left: var(--guia-flecha, 18px);
}