/* =====================================================================
   COMPONENTE · botón
   Qué hace:    los botones del sitio. Hay UNO principal por pantalla
                (relleno); los demás van solo con borde. Los de borrar o
                anular nunca van rellenos.
   Quién lo usa: todas las pantallas.
   Depende de:  tokens.css
   Requisitos:  arquitectura.md §4.4 (botón principal), R-GEN-13
   Uso:         <button class="boton boton--principal">Publicar</button>
   ===================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--alto-control);
  padding: 0 var(--espacio-4);
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracion-rapida) var(--curva-salida),
              border-color var(--duracion-rapida) var(--curva-salida);
}

.boton:hover {
  background: var(--color-superficie-resaltada);
}

.boton:disabled,
.boton--deshabilitado {
  opacity: 0.55;
  cursor: not-allowed;
}

/* El botón de la acción más importante de la pantalla (uno solo) */
.boton--principal {
  border-color: var(--color-boton-principal);
  background: var(--color-boton-principal);
  color: var(--color-boton-principal-texto);
}

.boton--principal:hover {
  background: var(--color-boton-principal);
  filter: brightness(1.15);
}

/* Borrar, anular: nunca relleno (arquitectura.md §4.4) */
.boton--peligro {
  border-color: var(--color-peligro);
  color: var(--color-peligro);
}

.boton--peligro:hover {
  background: var(--color-peligro-fondo);
}

.boton--chico {
  min-height: 2rem;
  padding: 0 var(--espacio-3);
  font-size: var(--tamano-suave);
}

.boton__icono {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}