/*
 * EL BOTÓN LLENA SU CELDA. Es la decisión que ordena todo lo demás: si el botón ocupa la
 * celda entera, la caja de la celda ES la caja del botón y pulsar en cualquier punto de la
 * celda es pulsar el botón. Sin esto, el botón se encogía a su texto y había que forzarlo
 * desde el CSS de cada pantalla, que es justo lo que no se puede hacer.
 */
.web-button {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: var(--web-button-color);
  font-size: var(--web-button-font-size);
  font-weight: var(--web-button-font-weight);
  background: var(--web-button-bg);
  padding: var(--web-button-padding);
  border: var(--web-button-border-width) solid var(--web-button-border-color);
  border-radius: var(--web-button-border-radius);
}

/* Pulsado / seleccionado / foco: invierte el fondo. */
.web-button:focus,
.web-button:active,
.web-button.is-active {
  outline: none;
  background: var(--web-button-focus-bg);
  color: var(--web-button-focus-color);
  border-color: var(--web-button-focus-border);
}

/* Hover (ratón encima, no seleccionado): indicador inferior de 4px en el color
   de focusBackground, con box-shadow interior -> sin invertir el fondo y SIN
   afectar al layout (no hay salto de altura). */
.web-button:hover:not(:disabled):not(.is-active):not(:focus):not(:active) {
  box-shadow: inset 0 calc(-1 * var(--web-button-hover-bar-width)) 0 0 var(--web-button-hover-bar-color);
}

.web-button:disabled {
  opacity: 0.5;
  cursor: default;
}