/*
  CurricuLabs — Botones
  Todos los controles de acción son <button> reales (nunca div clickeables).
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.65em 1.15em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

.btn svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primario: acción principal de un formulario/tarjeta */
.btn--primary {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}
.btn--primary:hover:not(:disabled) { background-color: var(--color-brand-primary-hover); }
.btn--primary:active:not(:disabled) { background-color: var(--color-brand-primary-active); }

/* Secundario: acción alternativa neutra (p. ej. "Editar Datos") */
.btn--secondary {
  background-color: var(--color-surface-secondary);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) { background-color: var(--color-border); }
.btn--secondary:active:not(:disabled) { background-color: var(--color-border-strong); }

/* Fantasma: acción de bajo compromiso (p. ej. "Cancelar") */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn--ghost:hover:not(:disabled) {
  background-color: var(--color-surface-secondary);
  color: var(--color-text);
}

/* Acento: acción cálida y distintiva (p. ej. "Agregar horario") — el único
   botón ámbar de la interfaz; no se usa para más acciones que esta. */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-on-accent-text);
}
.btn--accent:hover:not(:disabled) { background-color: var(--color-accent-hover); }
.btn--accent:active:not(:disabled) { background-color: var(--color-accent-active); }

/* Peligro discreto: Cerrar sesión. Por defecto es un botón neutro (mismo tono
   apagado que el resto de la información secundaria del header); solo se
   vuelve rojo explícito al pasar el mouse o enfocarlo, para que la acción
   "delicada" no compita visualmente con el resto del header en reposo. */
.btn--danger {
  background-color: transparent;
  color: var(--color-text-on-brand-secondary);
  border-color: var(--color-on-brand-wash-strong);
}
.btn--danger:hover:not(:disabled),
.btn--danger:focus-visible {
  background-color: var(--color-error);
  color: var(--color-text-on-brand);
  border-color: var(--color-error);
}

/* Sobre el header de marca (fondo oscuro): tono translúcido, no un botón claro suelto */
.btn--on-brand {
  background-color: var(--color-on-brand-wash-weak);
  color: var(--color-text-on-brand);
  border-color: var(--color-on-brand-wash-strong);
}
.btn--on-brand:hover:not(:disabled) {
  background-color: var(--color-on-brand-wash);
}
.btn--on-brand:active:not(:disabled) {
  background-color: var(--color-on-brand-wash-strong);
}

.btn--sm {
  font-size: var(--text-xs);
  padding: 0.4em 0.75em;
}

.btn--icon {
  padding: 0.5em;
  border-radius: var(--radius-md);
}

.btn--block {
  width: 100%;
}