/*  Botón reutilizable
    ¿Por qué? Centraliza estilos comunes y elimina duplicación.
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

.small-btn {
  /* --- tamaño y forma --- */
  min-width: 100px;
  height: 33px;
  border-radius: 10px;
  margin: 10px;
  padding: 15px;

  /* --- colores --- */
  background: var(--color-primary);
  color: var(--color-bg-contrast);
  border: none;

  /* --- tipografía --- */
  font-family: "Poppins", sans-serif;
  font-size: var(--sds-typography-body-size-medium);
  font-weight: var(--sds-typography-body-font-weight-regular);
  line-height: 1; /* 100 % */

  /* --- alineación de contenido --- */
  display: flex;            /* centra horizontal y verticalmente */
  justify-content: center;
  align-items: center;
  gap: 0.25rem;             /* espacio si pones iconos con texto */

  /* --- efectos --- */
  filter: drop-shadow(0 4px 4px var(--color-shadow));
  cursor: pointer;
  text-decoration: none;    /* elimina subrayado cuando es <a> */
}

/* opcional: efecto hover */
.small-btn:hover {
  opacity: 0.9;
}

.small-btn.disabled,
.small-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none; /* evita clics fantasma en Safari/IE */
}

.icon-btn {
  /* --- Tamaño fijo --- */
  width: 40px;
  height: 32px;
  padding: 0;
  margin: 0 0.5rem;
  border-radius: 6px;

  /* --- Colores (hereda la paleta de .small-btn) --- */
  background: var(--color-primary);
  color: var(--color-bg-contrast);
  border: none;

  /* --- Tipografía / Icono centrado --- */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  /* Ajusta según tamaño de tu icono */
  line-height: 1;

  /* --- Sombra y cursor --- */
  filter: drop-shadow(0 2px 2px var(--color-shadow));
  cursor: pointer;
  text-decoration: none;
  /* En caso de usar <a> */

  /* --- Efecto visual al hacer hover --- */
  transition: opacity 0.2s;
}

.icon-btn:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.icon-btn:disabled,
.icon-btn.disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}